Question

可以从另一个画布的getImageData数组（在同一个html页面中）创建一个纹理（用于画布中的元素）？也许没有three.js？非常感谢，

珍

Answer 1

关于WebGL的texImage2D方法最酷的事情是它的最后一个参数可以是DOM元素而不是ArrayBuffer，在这种情况下，它将渲染的内容复制到纹理对象中。

例如：

var canvas2d = document.getElementById('canvas2d');
gl.bindTexture(gl.TEXTURE_2D, myTexture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d);

有一个关于此功能的小教程here。

Answer 2

这就是getImageData的意思，让图像处理它然后在任何画布上绘制。

imageData = someContext.getImageData(0, 0, canvasWidth, canvasHeight);
anotherContext.putImageData(imageData, 0, 0);

执行以下操作：http://jsfiddle.net/jaibuu/myRGr/

如果您不打算进行像素操作，则应该只使用drawImage（），而不使用较慢的getImageData / putImageData。

Answer 3

是的，texImage2D可以拍摄ImageData。

var imageData = some2DCanvasContext.getImageData(...);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageData);

以下是测试此功能的WebGL一致性测试之一

https://www.khronos.org/registry/webgl/sdk/tests/conformance/textures/tex-image-and-sub-image-2d-with-image-data.html

从getImageData（Javascript）创建纹理

3 个答案: