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

How do I edit the RGBA values of a texture in WebGL?

本文关键字：纹理 RGBA 编辑 WebGL      更新时间：2023-09-26

我有一个类似的片段着色器：

<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>

这是处理纹理的JavaScript代码：

function handleLoadedTexture(texture) {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.bindTexture(gl.TEXTURE_2D, null);
}
function initTexture(source) {
    var newTexture = gl.createTexture();
    newTexture.image = new Image();
    objectTextures.push(newTexture);
    var index = objectTextures.length - 1;
    objectTextures[objectTextures.length - 1].image.onload = function() {
        handleLoadedTexture(objectTextures[index])
    }
    objectTextures[objectTextures.length - 1].image.src = source;
}

"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;
}

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

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

这样，你就可以在每个顶点上以恒定的颜色或不同的颜色"着色"（这不是实现着色的唯一方法，有无限的选择，但我觉得这样做既优雅又灵活：）

相关文章：