在框架中使用 watershader.js 着色器

Question

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

例如，如果我想在一帧内使用此处定义的着色器 - Mr. Doob's water shader，我该如何在不将着色器代码复制到我的本地文件的情况下执行此操作？

Answer 1

该脚本包含

的全局定义

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

，也需要将其包括在内

Answer 2

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

在框架中使用 watershader.js 着色器

Using watershader.js shader in aframe

shader

vertex-shader

fragment-shader

three.js

aframe