如何在 A-Frame 中将着色器定义为外部 .glsl 文件（顶点、片段）？

Question

目前，我们可以在 AFRAME.registerShader 中将 vertex/fragment 个着色器指定为字符串。如何将着色器作为单独的文件进行维护，这样我就不必在长字符串中进行编码？

Answer 1

A-Frame 无法自动引用外部着色器文件。它们现在必须是一个字符串。这就是 three.js 着色器的定义方式，将它们定义在 JS 文件中可以更轻松地共享和供其他人使用，而无需引用多个文件。

不过，我们可以做的是使用 构建工具。

在 .glsl 文件中定义顶点和片段着色器...

myVertex.glsl
myFragment.glsl
myAFrameShader.js

像这样编写着色器：

AFRAME.registerShader('my-shader', {
  vertexShader: require('./myVertex.glsl'),
  fragmentShader: require(./myFragment.glsl')
});

然后安装构建工具。 Webpack 运行良好，因为它不会在没有配置的情况下尝试请求 .glsl 文件时抛出。 webpack是一个模块打包器，也就是我们在做的，将多个文件打包成一个：

npm install -g webpack
npm install --g webpack-glsl-loader

然后

webpack --module-bind 'glsl=webpack-glsl' myAFrameShader.js output/myAFrameShader.js

How to define shaders as external .glsl files (vertex, fragment) in A-Frame?