Javascript 如何在WebGL中编辑纹理的RGBA值？

我有一个片段着色器，如下所示：

<script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D uSampler;
    varying vec2 vTextureCoord;
    void main() {
        gl_FragColor = texture2D(uSampler, vTextureCoord).rgba;
    }
</script>

source参数只是图像的url，example.png可以是一个源。我正在尝试将纹理的颜色更改为不同的颜色。是否可以将纹理中的每个像素重新指定为特定颜色？也可以给纹理着色吗？我是否可以在initTexture函数中添加另一个名为color的参数，并将其设置为一个包含4个值RGBA的数组，或者如果无法编辑alpha通道，则使用3个值，然后以某种方式使用该数组将纹理的颜色更改为一种纯色或着色

---

objectTextures只是一个数组，它保存创建的所有WebGLTextures。

我最近发现了一些可能非常适合您尝试实现的功能。您可能知道如何创建顶点缓冲区，就像您已经为顶点位置和纹理坐标所做的那样。为着色器中的颜色添加其他颜色

添加到顶点着色器，但它看起来像：

attribute vec4 aColors; 
varying vec4 vColors; 

void main ( void ) { 
    vColors = aColors; //basically the same as you do with texture coordinates
}

您的片段着色器现在如下所示：

precision mediump float;

uniform sampler2D uSampler;

varying vec4 vColor;
varying vec2 vTextureCoord;
void main() {
    gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;
}

好的，这就是基本逐顶点颜色的设置方式。但现在出现了一个稍微不寻常的部分：不像通常那样设置缓冲区并为每个顶点填充颜色，您只需为所有顶点将其设置为常量值，基本上是在该位置未启用VertexAttributeArray时使用的默认值

var colorLocation = gl.getAttribLocation( yourProgram, "aColors" );
var yourColor = [1,0,1,1];
gl.vertexAttrib4fv( colorLocation, yourColor );

---

通过这种方式，您可以使用恒定颜色或每个顶点的不同颜色进行着色。这不是实现着色的唯一方法，有无数种选择，但我觉得这样做既优雅又灵活：

仅用于测试，我将您的颜色和颜色位置设置为全局变量。指定了colorLocation，如initShader部分所示，程序在该部分执行其他getAttributeLocation和getUniformLocation，将程序更改为更正一个，并在drawScene函数中设置VertexAttribute4vColorLocation，即您的颜色。我得到“WebGL:INVALID_VALUE:vertexAttrib4fv:index超出范围”。我做错了什么？没关系，我将colorLocation设置为属性'aColors'而不是'aColor'，它就工作了！非常感谢。“很高兴我能帮助你，”Mythenatical说

var colorLocation = gl.getAttribLocation( yourProgram, "aColors" );
var yourColor = [1,0,1,1];
gl.vertexAttrib4fv( colorLocation, yourColor );