时间戳

首页 > 解决方案 > 在 aframe 中使用 watershader.js 着色器

three.js - 在 aframe 中使用 watershader.js 着色器

问题描述

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

例如，如果我想使用此处定义的着色器 - Doob 先生在 a-frame 内的水着色器，我如何在不将着色器代码复制到本地文件的情况下这样做？

标签： three.jsshaderaframefragment-shadervertex-shader

解决方案

该脚本包含一个全局定义

THREE.ShaderLib[ 'water' ]

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

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

这里的例子。

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

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

如果要充分利用ShaderLib ，该脚本使用THREE.Mirror也需要包含在内water

推荐阅读