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

Question

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

这是代码笔：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

恐怕您的代码笔错误百出。您似乎正在尝试将着色器从 shadertoy 移植到 three.js，对吗？

我已经删除了这里的所有错误，但效果看起来仍然很糟糕：https://codepen.io/anon/pen/XGRVew

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

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

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

Three.js custom shader not displaying

shader

textures

three.js

codepen