如何更改 WebGL 中的每个像素

【问题标题】：How can I change every pixels in WebGL如何更改 WebGL 中的每个像素
【发布时间】：2020-02-20 10:19:13
【问题描述】：

当我们使用2d画布时，可以像下面这样改变图像颜色

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "images/1.png";

img.onload = function(){
    ctx.drawImage(img,0,0);
    var imgData = ctx.getImageData(0,0,400,400);

    var data = imgData.data;
    for(var i = 0;i<data.length;i+=4){
        data[i]=data[i+1]=data[i+2]=(data[i]+data[i+1]+data[i+2])/3
    }
    ctx.putImageData(imgData,0,0)
}

但是当我通过 WebGL 使用画布时该怎么做。我只能使用 readPixels 读取每个像素，但不知道如何更新。

【问题讨论】：

标签： html canvas webgl

【解决方案1】：

您通常不会在 WebGL 中做类似的事情。相反，您只渲染到画布，通常不会从中读取。

如果要渲染图像，请先将该图像加载到纹理中。然后，您可以将该纹理绘制到画布上，并提供一个在绘制时修改颜色的着色器。

如果您想修改纹理本身，您通常会创建另一个纹理，将其附加到帧缓冲区，然后应用您想要的任何效果从第一个纹理渲染到第二个纹理。然后，您可以将第二个纹理渲染到画布中。

这里是an article with more details

请注意，您的问题听起来好像您是 WebGL 的新手。在 WebGL 中做简单的事情需要相当多的设置，所以我建议你 go read some tutorials

【讨论】：