使用统一数组设置批处理顶点数组的alpha值

Setting the Alphas of a Batched Vertex Array With a Uniform Array

本文关键字：数组 顶点 alpha 批处理 设置      更新时间：2023-09-26

我正在使用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，但我不知道如何做到这一点

您需要像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和。换句话说，把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);
}
相关文章：