您可以在three.js 中将加载为纹理的图像作为另一个纹理mipmap 提供吗？答案

【问题标题】：Can you feed an image loaded as texture as anothers texture mipmap in three.js?您可以在three.js 中将加载为纹理的图像作为另一个纹理mipmap 提供吗？
【发布时间】：2013-01-22 02:52:34
【问题描述】：

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

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

目前我正在使用...

terrainTexture = THREE.ImageUtils.loadTexture

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

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

... mipsTexs 只是一个关联数组，用于知道每个纹理对应的位置。

真正的问题是，当我输入手动 mipmap 并着色时，地形会显示为全黑，但使用 webgl 生成的 mipmap 会出现颜色渗色伪影。

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

【问题讨论】：

标签： javascript three.js webgl textures mipmaps

【解决方案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;

【讨论】：

感谢您的回复。作为记录，我想说画布或图像都可以作为 mipmap 提供。在我的情况下，问题是由于一些不良生成的 mipmap，mipmap piramid 的最后 3 级的大小没有正确的大小，所以整个纹理被视为黑色，被丢弃为正确的纹理。