Question

当我们按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读取每个像素，但不知道如何更新。

Answer 1

在WebGL中，您通常不会做类似的事情。而是只渲染到画布上，而通常不阅读它。

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

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

这里是an article with more details

请注意，您的问题听起来像您是WebGL的新手。要在WebGL中完成简单的工作，需要进行大量设置，因此我建议您go read some tutorials

如何更改WebGL中的每个像素

1 个答案: