如何修改配置/GLSL文件关联着色器与几何体？解决导入模块错误

问题原因 #

浏览器的ES模块系统仅支持加载JavaScript文件，直接导入.glsl后缀的文件会被识别为非合法模块；但直接将后缀改为.js，GLSL语法又不符合JS规范，导致报错。

三种可行解决方案 #

方案1：将GLSL代码封装为JS模块（无需构建工具） #

把GLSL代码用JS模板字符串包裹，保存为.js文件，以ES模块形式导出：

• 新建vertex.js：

export default `
void main() {
    vec4 localPosition = vec4(position, 1.0);
    vec4 worldPosition = modelMatrix * localPosition;
    vec4 viewPosition = viewMatrix * worldPosition;
    vec4 clipPosition = projectionMatrix * viewPosition;
    gl_Position = clipPosition;
}
`

• 新建fragment.js：

export default `
void main() {
    // 必须输出颜色，否则画面无内容
    gl_FragColor = vec4(1.0, 0.5, 0.2, 1.0);
}
`

• 在main.js中导入：

import vertex from './vertex.js'
import fragment from './fragment.js'

方案2：通过HTML script标签加载GLSL代码 #

在HTML文件中添加类型为自定义着色器的script标签，通过DOM获取代码内容：

• HTML部分：

<script type="x-shader/x-vertex" id="vertexShader">
void main() {
    vec4 localPosition = vec4(position, 1.0);
    vec4 worldPosition = modelMatrix * localPosition;
    vec4 viewPosition = viewMatrix * worldPosition;
    vec4 clipPosition = projectionMatrix * viewPosition;
    gl_Position = clipPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
void main() {
    gl_FragColor = vec4(1.0, 0.5, 0.2, 1.0);
}
</script>

• main.js中获取代码：

const vertex = document.getElementById('vertexShader').textContent;
const fragment = document.getElementById('fragmentShader').textContent;

方案3：使用构建工具处理GLSL文件（推荐用于大型项目） #

如果使用Vite、Webpack等构建工具，可通过插件直接导入.glsl文件：

• Vite：安装vite-plugin-glsl插件，配置后直接导入：

import vertex from './vertex.glsl'
import fragment from './fragment.glsl'

• Webpack：使用raw-loader加载GLSL文件，配置webpack.config.js后，导入方式同上。

额外注意事项 #

• 片段着色器必须输出gl_FragColor（WebGL 1.0）或FragColor（WebGL 2.0），否则几何体无法正常显示颜色。
• Three.js的ShaderMaterial会自动提供position、modelMatrix、viewMatrix、projectionMatrix等内置变量，无需额外声明。

内容的提问来源于stack exchange，提问作者William Gustafsson Knutsson