Установка альфах массива вершинного массива с равномерным массивом

Question

Я создаю 2D-рендеринг с помощью WebGL, в котором я использую Textures Atlases и одновременно выставляю сотни объектов. Мне нужно установить уникальное значение альфа для каждого объекта, и я не понимаю, как это сделать.

Мой текущий фрагмент затенения это:

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, но я не знайте, как это сделать.

Answer 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. Обновите свои УФ-данные, чтобы каждый УФ также имел альфа. Измените шейдер фрагмента.

varying vec3 v_texCoord; 

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