0

Three.js で TEXTURE_2D をテクスチャとして使用する方法はありますか?

Three.js 画像ビューアで使用しようとしている非常に高解像度の画像があります。現在、パフォーマンスが問題になっているため、画像を POT に変換して、違いがあるかどうかを確認しようとしています。ここで提案されているスクリプトを使用しています: http://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences

function createTextureFromImage(image) {
   var gl = renderer.context;
   var texture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, texture);
   if (!isPowerOfTwo(image.width) || !isPowerOfTwo(image.height)) {
       // Scale up the texture to the next highest power of two dimensions.
       var canvas2 = document.createElement("canvas");
       canvas2.width = nextHighestPowerOfTwo(image.width);
       canvas2.height = nextHighestPowerOfTwo(image.height);
       var ctx = canvas2.getContext("2d");
       ctx.drawImage(image, 0, 0, image.width, image.height);
       image = canvas2;
   }
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
   gl.generateMipmap(gl.TEXTURE_2D);
   gl.bindTexture(gl.TEXTURE_2D, null);
   return texture;
}

しかし、返されたテクスチャ オブジェクトを THREE.Texture で使用する方法がわかりません。何か案は？

編集 1: Three.js コードを調べていたところ、実装しようとしているようなことを暗黙的に実行することがわかりました: https://github.com/mrdoob/three.js/blob/master/src/loaders/Loader .js

誰でも確認できますか？

4

1 に答える 1

2

このようなものが機能するはずです：

function createTextureFromImage( image ) {

   var canvas = document.createElement( "canvas" );

   canvas.width = nextHighestPowerOfTwo( image.width );
   canvas.height = nextHighestPowerOfTwo( image.height );

   var ctx = canvas2.getContext( "2d" );

   ctx.drawImage( image, 0, 0, image.width, image.height );

   return canvas;
}

var texture = new THREE.Texture( createTextureFromImage( image ) );
于 2012-10-25T16:23:36.243 に答える