时间戳

首页 > 解决方案 > Three.js 自定义着色器不显示

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

问题描述

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

},

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

谢谢！

标签： three.jstexturesshadercodepen

解决方案

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

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

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

  • 创建着色器通道后，您必须将纹理分配给制服。制服被克隆用于内部材料ShaderPass。这意味着纹理也被克隆了。如果您在材质创建之前加载纹理，则相应的needsUpdate标志设置不正确。
  • 正如@Marquizzo 所述，出于安全原因，您的纹理被阻止。我从three.jsrepo 中添加了一些纹理用于测试目的。

  • 由于几何图形提供了 uv 坐标，因此不需要以下代码行。不需要像 shadertoy 那样即时计算它们。只需vUv在片段着色器中使用变化。

    vec2 uv = gl_FragCoord.xy / resolution.xy;

  • 对于这样简单的一次性着色器，没有必要使用EffectComposer. 尝试使用类似于此官方示例的方法。

  • 您始终必须确保示例文件与代码中的版本相似ShaderPass或EffectComposer匹配。three.js我已在 codepen 中对此进行了更改，以删除所有弃用警告。

推荐阅读