Question

我有一个像这样的片段着色器：

<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”可能是一个源。我试图将纹理的颜色更改为不同的颜色。是否可以将纹理中的每个像素重新分配给某种颜色？是否也可以着色纹理？我可以在名为“color”的initTexture函数中添加另一个参数，并将其作为4个值（RGBA）的数组，如果无法编辑alpha通道，则可以使用3，然后以某种方式使用该数组来更改颜色纹理为一种纯色还是色调呢？

objectTextures只是一个包含所有创建的WebGLTextures的数组。

Answer 1

我最近发现了一些可能适合您尝试完成的事情。您可能知道如何创建顶点缓冲区，就像您已经为顶点的位置（也可能是纹理坐标）所做的那样。在着色器中为颜色添加一个。

添加到顶点着色器（但看起来像）：

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

好的，那就是每个顶点颜色的基本设置方式。但是现在出现了一个稍微不同寻常的部分：正如你通常所做的那样，不是经历设置缓冲区并为每个顶点填充颜色的业务，而是将其设置为常量值对于所有顶点，基本上是＆＃34;默认值＆＃34;在没有为该位置启用vertexAttribArray时使用。

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

这样你可以＆＃34; tint＆＃34;无论是恒定的颜色还是每个顶点不同的颜色（它不是完成着色的东西的唯一方法，有无限的替代品，但我觉得这样做是优雅和灵活的：）

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

1 个答案: