时间戳

首页 > 解决方案 > three.js - 如何在 ShaderMaterial 和 fragmentShader 中使用 alphatest 值

three.js - three.js - 如何在 ShaderMaterial 和 fragmentShader 中使用 alphatest 值

问题描述

感谢@Mugen87，我设法使用后处理方法在我的场景上创建了一个动态蒙版：https ://jsfiddle.net/40gef6sz/ （如果你移动相机，你会看到立方体消失在后面和看不见的圆圈，用此图片：https ://i.imgur.com/sJwKYvZ.jpg ）

我想使用片段着色器脚本在我的蒙版上添加一些效果。在这个小提琴上，你可以看到我的纹理在移动（我用 a 替换了THREE.MeshBasicMateriala THREE.ShaderMaterial）：https ://jsfiddle.net/grc_michael/ghmf5sdo/

当我将这种新材料与后处理方法结合起来时，我无法达到与第一个 jsfiddle 相同的结果。我不知道在我的片段着色器中添加我的#define ALPHATEST 值的位置。你可以在这里看到结果：https ://jsfiddle.net/grc_michael/82bkLn96/

我认为我非常接近预期的结果。有谁知道在我的片段着色器中正确添加 ALPHATEST 值的位置？谢谢

标签： three.jsfragment-shader

解决方案

在这里我们使用您的自定义着色器材料进行原始更新的小提琴：https ://jsfiddle.net/k2c5upfo/1/

当使用图像作为 alpha 贴图时，您可以像内置材质一样对其进行采样。意味着 alpha 测试如下所示：

if (texture2D(texture1,xy).g < 0.5) discard;

推荐阅读