Three.js自定义着色器无法显示

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 repo中添加了一些纹理。
• 由于uv坐标随几何体提供，因此不需要以下代码行。没有必要像shadertoy那样在运行中计算它们。只需在片段着色器中使用变化的vUv。 vec2 uv = gl_FragCoord.xy / resolution.xy;
• 对于这种简单的单通道着色器，没有必要使用EffectComposer。尝试使用类似于官方example的方法。
• 您必须始终确保ShaderPass或EffectComposer等示例文件与代码中的three.js版本匹配。我在codepen中更改了此项以删除所有弃用警告。