javascript - 如何将 Three.js 纹理作为 "WebGLTexture"传递给 WEBGL 代码？

Question

我试图将 Three.js 纹理传递给 gl.texSubImage WEBGL 函数，但出现以下错误:

在 Chrome 上:

在火狐浏览器上:

代码如下 - 目标纹理2被传递到下面的gl.bindTexture并且不被识别。源texture1是加载图像的纹理。

我尝试过:texture2、texture2.image、texture2.image.data、 两者都具有数据纹理和普通纹理，并加载图像作为纹理2。 有什么想法吗？

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

我建议你看看WebGLRenderer.copyTextureToTexture() 。它在内部使用texSubImage。还有一个示例展示了该方法的用法:

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

顺便说一句:在 bindTexture 中使用 image.data 不起作用，因为 API 调用需要 WebGLTexture 对象作为第二个参数。您可以像这样访问纹理的原始 WebGLTexture 对象。

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