如何在Three.js Material的Augmented Fragment Shader中自定义Alpha透明度？

Question

我用

THREE.MeshStandardMaterial

扩展

onBeforeCompile

来调整着色器的一些细节。我的顶点着色器工作正常，但我无法弄清楚如何在片段着色器上设置 Alpha/透明度。

这是材料定义：

const material1 = new THREE.MeshStandardMaterial({
    onBeforeCompile: (shader) => {
        shader.uniforms.time = { value: 0 };

        shader.fragmentShader = shaderData.fragment;

        shader.vertexShader = 'uniform float time;\n'
            + 'varying vec3 vPosition;\n'
            + shader.vertexShader;
        shader.vertexShader = shader.vertexShader.replace(
            '#include <begin_vertex>',
            shaderData.vertex
        );
        material1.userData.shader = shader;
    },
});

具体细节并不太重要，但您可以看到我完全替换了片段着色器（暂时用于故障排除）。

我所做的就是复制内置片段着色器并开始自定义它。为了测试，我有这样的东西：

// Dozens of includes.
void main () {
    // Dozens more includes.
    gl_FragColor.a = 0.1;
}

按照我的逻辑，应该以 10% 的透明度绘制像素。然而，事实并非如此。颜色确实发生了变化，但并没有真正与背景融为一体：

以下是注释掉该行后的渲染效果：

这是线条完整时的样子（据说透明度为 10%）：

颜色明显不同，但这并不是我所期望的 10% 透明度。事实上，我可以将其从“0.1”更改为“0.01”，它看起来几乎相同（它在“0.001”处完全消失）。

是否有其他机制可以控制 alpha 透明度的工作原理？

对于上下文，片段着色器的其余部分在这里（这是我尝试自定义的内置片段着色器）：https://github.com/mrdoob/ Three.js/blob/master/src/渲染器/着色器/ShaderLib/meshphysical.glsl.js#L62

编辑：我在这里创建了一个简单的演示：https://codepen.io/min-width/pen/abxgXjx?editors=0010

您可以通过拖动鼠标来旋转该框。在代码中搜索“//TODO：检查一下。”

您会看到它正在尝试调整不透明度，但它没有按预期工作。

最终目标是使用方程来调整不透明度，但现在我只是想得到一个固定值。

Answer 1

只需在材质中添加

transparent: true

即可：

return new THREE.MeshStandardMaterial({
    transparent: true,
    onBeforeCompile: (shader) => {
        shader.fragmentShader = getMyFragShader();
        shader.vertexShader = getMyVertShader();
    },
});

感谢评论者指出这一点！