Html 如何更改WebGL中的每个像素

当我们使用canvas by 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的canvas时，如何做到这一点。我只能使用readPixels读取每个像素，但不知道如何更新。

在WebGL中通常不会这样做。相反，您只渲染到画布，通常不从画布读取

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

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

这是

请注意，您的问题听起来可能是WebGL的新手。在WebGL中做简单的事情需要相当多的设置，所以我建议您