Is it possible to use an image loaded as a texture to create another texture mipmap in three.js?

Question

Is it possible to use an image loaded as a texture to create another texture mipmap in three.js?

This is not a problem, it's simply a question.

Currently, I am working on a terrain project using an atlas texture. In order to reduce color bleeding, I am planning to create mipmaps externally and then apply them to the terrain texture.

At the moment, I am utilizing...

terrainTexture = THREE.ImageUtils.loadTexture

...to load each mipmap level and combine them with the base texture at level 0...

terrainTexture.mipmaps[mipsTexs[tex.sourceFile]] = tex.image;

...where mipsTexs is an array that helps me keep track of the position of each texture.

The issue I'm facing is that when I manually feed in the mipmaps, the terrain appears all black, while using WebGL-generated mipmaps results in colored terrain with color bleeding artifacts.

In the examples provided, there is only one instance of manual mipmapping, but the mipmaps are created as canvases. I am wondering if the all-black appearance could be due to using JS Images instead of Canvases.

javascript three.js webgl textures mipmaps

Answer 1

Answer №1

Check out this demonstration on creating custom mipmaps:

function createMipmap( size, color ) {

    var canvasImage = document.createElement( "canvas" ),
    context = canvasImage.getContext( "2d" );

    canvasImage.width = canvasImage.height = size;

    context.fillStyle = "#222";
    context.fillRect( 0, 0, size, size );

    context.fillStyle = color;
    context.fillRect( 0, 0, size / 2, size / 2 );
    context.fillRect( size / 2, size / 2, size / 2, size / 2 );
    return canvasImage;

}

var mainCanvas = createMipmap( 128, '#f00' );
var textureCanvas = new THREE.Texture( mainCanvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping );
textureCanvas.repeat.set( 100, 100 );
textureCanvas.mipmaps[ 0 ] = mainCanvas;
textureCanvas.mipmaps[ 1 ] = createMipmap( 64, '#0f0' );
textureCanvas.mipmaps[ 2 ] = createMipmap( 32, '#00f' );
textureCanvas.mipmaps[ 3 ] = createMipmap( 16, '#400' );
textureCanvas.mipmaps[ 4 ] = createMipmap( 8,  '#040' );
textureCanvas.mipmaps[ 5 ] = createMipmap( 4,  '#004' );
textureCanvas.mipmaps[ 6 ] = createMipmap( 2,  '#044' );
textureCanvas.mipmaps[ 7 ] = createMipmap( 1,  '#404' );
textureCanvas.needsUpdate = true;

Answer 2

Check out this demonstration on creating custom mipmaps:

function createMipmap( size, color ) {

    var canvasImage = document.createElement( "canvas" ),
    context = canvasImage.getContext( "2d" );

    canvasImage.width = canvasImage.height = size;

    context.fillStyle = "#222";
    context.fillRect( 0, 0, size, size );

    context.fillStyle = color;
    context.fillRect( 0, 0, size / 2, size / 2 );
    context.fillRect( size / 2, size / 2, size / 2, size / 2 );
    return canvasImage;

}

var mainCanvas = createMipmap( 128, '#f00' );
var textureCanvas = new THREE.Texture( mainCanvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping );
textureCanvas.repeat.set( 100, 100 );
textureCanvas.mipmaps[ 0 ] = mainCanvas;
textureCanvas.mipmaps[ 1 ] = createMipmap( 64, '#0f0' );
textureCanvas.mipmaps[ 2 ] = createMipmap( 32, '#00f' );
textureCanvas.mipmaps[ 3 ] = createMipmap( 16, '#400' );
textureCanvas.mipmaps[ 4 ] = createMipmap( 8,  '#040' );
textureCanvas.mipmaps[ 5 ] = createMipmap( 4,  '#004' );
textureCanvas.mipmaps[ 6 ] = createMipmap( 2,  '#044' );
textureCanvas.mipmaps[ 7 ] = createMipmap( 1,  '#404' );
textureCanvas.needsUpdate = true;

Is it possible to use an image loaded as a texture to create another texture mipmap in three.js?

Answer №1

Similar questions

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?

Incorporating a separate PHP file which includes JavaScript code

`In NestJS Nested Schema, the @Prop decorator and mongoose options are not applied as expected

Strengthening JavaScript Security

Map Infobox appearing on page load

How to use a string condition to filter a list of objects in Javascript?

Transforming the output of a MySQL query into a JSON format organized like a tree

Automatically resize ui-select dropdown box to the left side

Can I use a single component for all routes in NextJS?

Tips for effectively creating and appending elements using JavaScript

Error encountered: AngularJS routes causing 500 internal server error

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

JavaScript constants implemented in a script file

I prefer not to have the entire URL visible to me

The debounced function in a React component not triggering as expected

When attempting to send coordinates to the Polyline component in React Native, an error is encountered stating that NSNumber cannot be converted to

Include a class in the <code> element if it is not nested within a <pre> tag

Do multiple AJAX calls share parameters?

The Data from Req.Body Doesn't Appear After Adding Form Fields

The error message "Unable to map props.theTodos" is displayed