在 aframe 中使用 watershader.js 着色器答案

【问题标题】：Using watershader.js shader in aframe在 aframe 中使用 watershader.js 着色器
【发布时间】：2019-03-21 02:34:43
【问题描述】：

我希望了解如何在不复制着色器代码的情况下在框架内使用外部着色器文件。我知道我们可以使用 aframe 的 registershader 定义自定义着色器，但是有没有办法将顶点和片段着色器代码指向外部 URL？

例如，如果我想在 a-frame 中使用此处定义的着色器 - Mr. Doob's water shader，如何在不将着色器代码复制到本地文件的情况下这样做？

【问题讨论】：

标签： three.js shader aframe fragment-shader vertex-shader

【解决方案1】：

如果您来自 Google，正在寻找 A-Frame 的水着色器：这里有一个额外的 example 和 code。

【讨论】：

【解决方案2】：

脚本包含一个全局定义

THREE.ShaderLib[ 'water' ]

如果你将它包含在你的 html 中，你应该可以在任何地方访问它：

THREE.ShaderLib['water'].vertexShader // vertexShader

例如here。

要注册着色器，您只需要正确定义架构中的所有制服：

AFRAME.registerShader('foo', {
  schema: {
    //all uniforms from the water shader lib
  },
  vertexShader: THREE.ShaderLib[ 'water' ].vertexShader,
  fragmentShader: THREE.ShaderLib[ 'water' ].fragmentShader
})

脚本使用THREE.Mirror，如果你想充分利用water ShaderLib，也需要包含它

【讨论】：

谢谢 Piotr，让我试一试
@Niraj here 是使用全局 ShaderLib 对象的示例：)
哈哈哈..这是我的另一个问题的代码，您已修改该代码以提供此问题的答案。你真是太棒了:-) :-)
@Niraj 这似乎是一个后续行动，并且很容易重复使用其他 anwser 的部分:)
再次感谢 Piotr。你太棒了，我可以从你身上学到很多东西