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

Question

https://aframe.io/docs/master/components/material.html#registering-a-custom-glsl-shader

目前，我们可以在 $.dashboard_scroll.remove(this.getView()); 中将顶点/片段着色器指定为字符串。如何将着色器维护为单独的文件，以便我不必在长字符串中进行编码？

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