1

これは問題ではなく、質問です。

アトラス テクスチャのある地形で作業しています。色のにじみを軽減するために、外部ツールに組み込まれたミップマップを地形テクスチャにフィードしたいと考えています。

とりあえず使って...

terrainTexture = THREE.ImageUtils.loadTexture

... すべてのミップマップ レベルをロードし、それらをレベル 0 テクスチャに追加するには ...

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

... mipsTexs は、各テクスチャに対応する位置を知るための単なる連想配列です。

本当の問題は、手動のミップマップをフィードして色を付けると、地形がすべて黒く表示されますが、webgl で生成されたミップマップで色にじみのあるアーティファクトが発生することです。

手動ミップマップの唯一の例は例にありますが、テクスチャへのミップマップ フィードはキャンバスです。私が見ている真っ黒な問題が、キャンバスの代わりに JS 画像を使用したことが原因であるかどうかを知りたかったのです。

4

1 に答える 1

3

この例は、独自のミップマップを作成する方法を示しています。

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;
于 2013-02-06T19:52:00.740 に答える