Question

我最近开始学习着色器和three.js。我尝试显示带有纹理的着色器，但它显示全黑。

这是codepen：https://codepen.io/LDB95/pen/MxmWNq

这些是我的制服：

uniforms: {
tDiffuse: { value: null },
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector2() },
iChannel0: { type: 't', value: new THREE.TextureLoader().load('https://naqyr37xcg93tizq734pqsx1-wpengine.netdna-ssl.com/wp-content/uploads/2017/11/10-Things-We-Can-Learn-From-the-Incredible-Steve-Jobs.jpg')},
iChannel1: { type: 't', value: new THREE.TextureLoader().load('https://gobelmont.ca/Portals/0/xBlog/uploads/2018/8/30/white%20noise.jpg')},

}，

我似乎找不到解决方法。如果有人可以在这里帮助我，那真是太棒了：）

谢谢！

Answer 1

恐怕您的Codepen充满了错误。看来您正在尝试将着色器从shadertoy移植到three.js，对吗？

我已删除此处的所有错误，但效果仍然很糟糕：https://codepen.io/anon/pen/XGRVew

无论如何，请记住以下几点：

创建着色器通道后，必须在之后将纹理分配给制服。为ShaderPass的内部材料克隆了制服。这意味着纹理也被克隆。如果在创建材质之前加载纹理，则相应的needsUpdate标志未正确设置。
如@Marquizzo所述，出于安全原因，您的纹理已被阻止。我已经从three.js仓库中添加了一些纹理用于测试。
由于uv坐标随几何一起提供，因此不需要以下代码行。不必像shadertoy那样即时计算它们。只需在片段着色器中使用变化的vUv。
```
vec2 uv = gl_FragCoord.xy / resolution.xy;
```
对于这样简单的一遍着色器，没有必要使用EffectComposer。尝试使用类似于此官方example的方法。
您始终必须确保示例文件ShaderPass或EffectComposer与代码中的three.js版本相匹配。我已在Codepen中对此进行了更改，以删除所有弃用警告。

Three.js自定义着色器不显示

1 个答案: