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

【问题标题】：Three.js custom shader not displayingThree.js 自定义着色器不显示
【发布时间】：2019-07-29 22:32:12
【问题描述】：

我最近开始学习着色器和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')},

我似乎无法找到解决方法。如果有人可以在这里帮助我，那就太棒了:)

谢谢！

【问题讨论】：

根据Migration guide，Three.js 102版将渲染方式改为RenderTargets，所以示例中的EffectComposer和ShaderPass可能已经过时了。为简单起见，您现在应该只导入 Three.js 版本 100，直到这些示例更新。此外，如果您查看控制台，您会收到Cross-Origin Request Blocked 警告。您的图像未加载。您应该搜索该警告的含义以了解如何修复它。

标签： three.js textures shader codepen

【解决方案1】：

恐怕您的代码笔充满了错误。看来您正在尝试将着色器从 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 中对此进行了更改，以删除所有弃用警告。

【讨论】：

您知道从 r102 中的 WebGLRenderer.render() 中删除 renderTarget 参数是否影响了 EffectComposer 示例？
我们更新了示例，因此它们都可以正常工作而不会出现警告。
啊，我是这么想的。看起来上面的 Codepen 使用的是 this version from cdn.rawgit，与 this newer version from the examples 相比，它看起来是更旧的代码
是的，原codepen中的文件版本不匹配。
我修复了效果，只是为了让你知道我想要达到的效果！ codepen.io/LDB95/pen/YgQxpX