将 alpha 应用于特定裁剪空间坐标处的纹理

Question

这不完全是我遇到的问题，而是它的简化版本。比如说，我有一个全屏尺寸的图像显示。我想修改此图像的 alpha，以便在屏幕的左半部分（水平方向）alpha 为 0.5，而在右半部分，alpha 为 1。只有 alpha 0.5 或 1，中间没有其他任何东西。

这是我到目前为止（失败的）代码

这是我的 javascript 设置 webgl 的代码

this.gl = canvas.getContext('webgl', {
    alpha: false,
});
this.gl.enable(this.gl.BLEND);
this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
this.gl.clearColor(1, 0, 0, 0); // red to highlight alpha problem

这是我的顶点着色器代码

mediump float;
attribute vec2 coordinates;
attribute vec2 a_texcoord;

varying vec2 v_texcoord;
varying float alpha;

void main() {
    gl_Position = vec4(coordinates.x, coordinates.y, 1.0, 1.0);
    v_texcoord = a_texcoord;
    if (coordinates.x <= 0) {
        alpha = 0.5;
    } else {
        alpha = 1.0;
    }
}

我的片段着色器是标准的简单

precision mediump float;
varying vec2 v_texcoord;
varying float alpha;
uniform sampler2D u_texture;
void main() {
    vec4 color = texture2D(u_texture, v_texcoord).rgba;
    gl_FragColor = color;
}

并且在开奖时

window.canvas.gl.clear(window.canvas.gl.COLOR_BUFFER_BIT);
window.canvas.gl.useProgram(this.drawProgram);
window.canvas.gl.bindBuffer(window.canvas.gl.ARRAY_BUFFER, this.vertexBuffer);
window.canvas.gl.enableVertexAttribArray(this.positionLocation);
window.canvas.gl.vertexAttribPointer(this.positionLocation, 2, window.canvas.gl.FLOAT, false, 0, 0);
window.canvas.gl.bindBuffer(window.canvas.gl.ARRAY_BUFFER, null);
window.canvas.gl.bindBuffer(window.canvas.gl.ARRAY_BUFFER, this.texcoordBuffer);
window.canvas.gl.enableVertexAttribArray(this.texcoordLocation);
window.canvas.gl.vertexAttribPointer(this.texcoordLocation, 2, window.canvas.gl.FLOAT, false, 0, 0);
window.canvas.gl.bindBuffer(window.canvas.gl.ARRAY_BUFFER, null);

window.canvas.gl.bindTexture(window.canvas.gl.TEXTURE_2D, this.texture);
window.canvas.gl.uniform1i(this.textureLocation, 0);
window.canvas.gl.drawArrays(window.canvas.gl.TRIANGLES, 0, 6);

使用这些代码，我无法实现我想要的。首先，透明度不是从屏幕中间开始的（clipspace x = 0），而是从一个看似随机的位置开始。此外，alpha 1.0 逐渐下降到 alpha 0.5，而不仅仅是我希望的 2 个值 0.5 和 1.0。而且我不知道这种逐渐过渡是从哪里来的。

显然我正在学习 webgl，所以任何指针都将不胜感激。关于如何解决问题的任何提示都会对我有很大帮助。提前致谢！

Answer 1

the transparency does not start at the middle of the screen [..]

因为 alpha 是按顶点求值并为片段插值的。

您必须对每个片段而不是每个顶点进行评估。

将coordinates.x或gl_Position.x/gl_Position.w从顶点着色器传递到片段着色器：

mediump float;
attribute vec2 coordinates;
attribute vec2 a_texcoord;

varying vec2  v_texcoord;
varying vec2  pos;

void main() {
    gl_Position = vec4(coordinates.xy, 1.0, 1.0);
    v_texcoord = a_texcoord;
    pos        = coordinates.xy;
}

计算片段着色器中的 alpha 值：

precision mediump float;

varying vec2 v_texcoord;
varying vec2 pos;

uniform sampler2D u_texture;

void main() {
    vec4 color = texture2D(u_texture, v_texcoord).rgba;
    float alpha = pos.x < 0.5 ? 0.5 : 1.0; 
    gl_FragColor = vec4(color.rgb, color.a * alpha);  
}

注意，顶点着色器为每个顶点坐标执行一次。坐标定义图元的角。为每个片段执行片段着色器。顶点着色器的输出参数根据片段在图元上的位置进行插值。插值是片段着色器的输入。
如果在顶点着色器中计算 alpha，那么左侧片段的 alpha 值为 0.5，右侧片段为 1.0。中间的片段在 [0.5, 1.0].
范围内得到一个平滑的内插值当它从顶点着色器传递到片段着色器时，位置也会发生同样的情况。但是由于 alpha 是在片段着色器中计算的，所以每个片段的 alpha 值要么是 0.5 要么是 1.0，取决于 pos.x

的插值

将 alpha 应用于特定裁剪空间坐标处的纹理

Apply alpha to texture at certain clipspace coordinates

javascript

shader

textures

glsl

webgl