0

我正在使用 WebGL 创建一个 2D 渲染引擎，其中我使用纹理图集并一次批处理数百个实体。我需要为每个实体设置一个唯一的 alpha 值，我不知道如何做到这一点。

我当前的片段着色器是这样的：

    precision mediump float;

    uniform float u_alpha;
    uniform sampler2D u_image;

    varying vec2 v_texCoord;

    void main () {
        vec4 texture = texture2D(u_image, v_texCoord);
        gl_FragColor = vec4(texture.rgb, texture.a * u_alpha);
    }

我想将该全局统一更改为统一缓冲区或将应用于 v_texCoord 的唯一值数组，但我不知道该怎么做。

4

1 回答 1

1

您需要将这些值作为属性传递，就像v_texCoord.

在顶点着色器中

attribute float a_alpha;
varying float v_alpha;
...
void main() {
   ...
   v_alpha = a_alpha;  // pass the alpha values to the fragment shader.
   ...
}

在片段着色器中

varying float v_alpha;
...
gl_FragColor = vec4(texture.rgb, texture.a * v_alpha);

除了使用单独的属性，您还可以让您的纹理坐标具有 3 个值。u、v 和 alpha。换句话说，更改v_texCoord为vec3. 更新顶点着色器中的属性以获取vec3. 更新您的 UV 数据，以便每个 UV 也有一个 alpha。将您的片段着色器更改为。

varying vec3 v_texCoord;

void main () {
    vec4 texture = texture2D(u_image, v_texCoord.xy);
    gl_FragColor = vec4(texture.rgb, texture.a * v_texCoord.z);
}
于 2013-04-03T17:38:24.250 回答