CODEWITHSUNDEEP
webglthree.js
SANDeveloper
SANDeveloper

Reputation: 570

Using TEXTURE_2D with Three.js

Is there any way to use TEXTURE_2D in Three.js as a texture?

I have very high-res images which I am trying to use in a Three.js imageviewer. Performance is a problem right now, so I am trying to convert the images to POT to see if it makes any difference. I am using the script suggested here: 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;
}

But I can't figure how to use the returned texture object with THREE.Texture. Any ideas?

Edit 1: I was looking through the Three.js code and found that it implicitly does something like what I am trying to implement: https://github.com/mrdoob/three.js/blob/master/src/loaders/Loader.js

Could anyone confirm?

Upvotes: 0

Views: 889

Answers (1)

WestLangley
WestLangley

Reputation: 104833

Something like this should work:

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 ) );

Upvotes: 2

Related Questions