How can I pass a three.js texture as "WebGLTexture" to WEBGL code?

Question

I'm trying to pass a three.js texture to gl.texSubImage WEBGL function and I get the following error:

On Chrome:

On Firefox:

The code follows bellow - the destination texture2 is passed to gl.bindTexture bellow and is not recognized. The source texture1 is a texture loaded with an image.

I have tried: texture2, texture2.image, texture2.image.data, both with a datatexture and a normal texture loaded with an image as texture2. Any ideas?

var gl = renderer.getContext();
var position = new THREE.Vector2(0,0);

renderer.setTexture2D( texture2, 0 ); 

gl.bindTexture(gl.TEXTURE_2D, texture2.image.data); //<<< problem

gl.texSubImage2D( gl.TEXTURE_2D, 
                  0, 
                  position.x, 
                  position.y, 
                  gl.RGB, 
                  gl.UNSIGNED_BYTE, 
                  texture1.image);

Answer 1

I suggest you have a look at WebGLRenderer.copyTextureToTexture(). It internally uses texSubImage. There is also an example that shows the usage of the method:

https://threejs.org/examples/webgl_materials_texture_partialupdate.html

BTW: Using image.data in bindTexture does not work since the API call expects a WebGLTexture object as second parameter. You can access the raw WebGLTexture object of a texture like this.

var textureProperties = renderer.properties.get( texture );
console.log( textureProperties.__webglTexture );