javascript - 你能在 three.js 中提供一个作为纹理加载的图像作为另一个纹理 mipmap 吗？

Question

这是一个问题，而不是问题。

我在具有 map 集纹理的地形中工作。为了减轻颜色渗色，我想使用外部工具中内置的 mipmap 来提供地形纹理。

目前我正在使用...

terrainTexture = THREE.ImageUtils.loadTexture 

...加载每个 mipmap 级别并将它们添加到级别 0 纹理...

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

... mipsTexs 只是一个关联数组，用于了解每个纹理对应于哪个位置。

真正的问题是，当我提供手动 mipmap 和彩色时，地形看起来全黑，但 webgl 生成的 mipmap 有颜色渗色伪影。

手动 mipmap 的唯一示例在示例中，但提供给纹理的 mipmap 是 Canvas 。我想知道我看到的全黑问题是否是由于使用 JS 图像而不是 Canvas 造成的。

Answer 1

This example显示如何构建您自己的 mipmap:

function mipmap( size, color ) {

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

    imageCanvas.width = imageCanvas.height = size;

    context.fillStyle = "#444";
    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 imageCanvas;

}

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