在 webgl 的大纹理中更改 20 到 200 个单独像素的最佳方法？

Posted 2023-02-22

【中文标题】在 webgl 的大纹理中更改 20 到 200 个单独像素的最佳方法？

【英文标题】：Best way to change 20 to 200 separate pixels in a large texture in webgl?

【发布时间】：2016-08-11 03:10:49

【问题描述】：

所以我试图找出最快的方法，例如使用 webgl 在纹理中更改 200 个单独的像素（每个像素具有独特的颜色和不同的位置）。

是否可以将坐标和颜色值传递给着色器，以便它可以一次性完成？还是有一些限制会阻止这样做？

【问题讨论】：

不要 100% 理解你想要做什么，但是有developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/…。

澄清一点-我有一个很大的纹理，需要更改其中的各种像素。所以我有一个坐标列表和新的颜色值； (x:5,y:65)=rgb(1,20,50) , (x:45,y:8)=rgb(10,50,70) , ...等我一直在研究，看来就像我必须将它存储在另一个纹理中，并使用 for 循环来循环数据？还是有更好的办法？

是的，您只需使用.texSubImage2D。详情见其他评论。

谢谢！我尝试了 texSubImage2D，它可以工作。 :) 在下面用代码发布了答案。我注意到每个渲染周期对 texSubImage2D 的调用越多，渲染就越慢。我正在修改的纹理是 4096x4096，所以也许这就是为什么？这可能没问题，但如果有人知道如何加快速度，请告诉我。

【参考方案1】：

WaclawJasper 建议使用 .texSubImage2D， 以下是我的使用方法。

var dataTypedArray = new Uint8Array(4); // Don't need to do this if the data is already in a typed array
    dataTypedArray[0] = 0;
    dataTypedArray[1] = 0;
    dataTypedArray[2] = 255;
    dataTypedArray[3] = 255;

    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texSubImage2D(gl.TEXTURE_2D, 0, posX, posY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, dataTypedArray);