从 getImageData (Javascript) 创建纹理答案

【问题标题】：Creating texture from getImageData (Javascript)从 getImageData (Javascript) 创建纹理
【发布时间】：2013-02-28 14:48:39
【问题描述】：

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

詹妮弗

【问题讨论】：

标签： canvas webgl textures texture-mapping getimagedata

【解决方案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。

【讨论】：

教程很有趣但是源代码的链接坏了所以我还没有完全理解..你认为我可以使用 texImage2d 代替 getImageData 还是我应该使用它们的组合?
我认为你根本不需要使用getImageData，如果你只是想基于另一个画布的“屏幕截图”来创建纹理。

【解决方案2】：

这就是 getImageData 的重点，获取图像来操作它，然后在任何画布上绘制。

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

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

如果你不打算进行像素操作，你应该只使用 drawImage()，而不使用 getImageData/putImageData，虽然速度较慢。

【讨论】：

是的，我知道，但我不想将图像绘制到第二个画布中，我想使用像素数组（如果我理解正确的话是一种颜色缓冲区）来创建立方体的纹理（例如）。换句话说，我想将图像“附加”到 3d 元素作为它的纹理。再次感谢
无论如何，您都需要从 imageData 创建位图缓冲区/画布，然后将位图用作纹理。（如果您不需要像素操作，则直接使用画布。

【解决方案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

【讨论】：