three.js 引入 glsl 文件并实现代码高亮的完整方案

在同一个 JavaScript 文件中引入 glsl 着色器代码。

开发 three.js 着色器时，通常需要将 GLSL 与 JavaScript 结合。具体做法是在 ShaderMaterial 中传入配置对象，其中 vertexShader 和 fragmentShader 属性的值均为字符串。最基础的方式是将完整的着色器代码直接作为字符串嵌入 JavaScript 代码中。

//vertexShader字符串
const vertexShader = `
void main() {
            gl_Position = vec4(position, 1.0);
        }
`;

//fragmentShdaer字符串
const fragmentShader = `
void main() {
            gl_Fragment = vec4(1.,0.,0.,1.);
        }
`;

//作为值传入对象的vertexShader,fragmentShader属性
const material = new THREE.ShaderMaterial({
    vertexShader, //键值对同名，可省略值
    fragmentShder,
})

将 glsl 文件与 js 文件分离管理。

虽然上述内联字符串方式可以正常运行，但将着色器代码与 JavaScript 代码混在同一文件夹中不利于项目管理。因此，建议将 JavaScript 文件与 GLSL 文件分别存放，形成独立目录结构。

推荐的文件目录结构如下： （1）shader 文件夹 vertexShader.glsl fragmentShader.glsl （2）app.js （3）index.html

然而，JavaScript 原生不支持直接 import glsl 文件。因此，常见的变通做法是将 .glsl 后缀改为 .js，并将着色器代码作为 JavaScript 模块中的字符串进行导入。修改后的文件结构变为：

（1）shader 文件夹 vertexShader.js fragmentShader.js （2）app.js （3）index.html

//vertexShader.js
const vertexShader = `
void main() {
            gl_Position = vec4(position, 1.0);
        }
`;
export default vertexShader;

//app.js
import vertexShader from './shader/vertexShader.js';
import fragmentShader from './shader/fragmentShader.js';

这种分离方式确实实现了文件管理的独立，且从运行时角度看没有问题，因为 JavaScript 最终仍是以字符串形式将着色器传递给 GPU。但主要问题在于，在代码编辑器中，这些着色器仅被视为普通字符串，无法获得语法高亮，所有代码显示为同一种颜色，极大影响开发体验。

实现 glsl 代码的高亮显示。

为了解决高亮问题，需要安装并配置 Comment target templates 插件。

使用步骤非常简单，只需在字符串模板前添加注释标记 /*glsl*/，告知插件该字符串内容为 glsl 语言即可。

//vertexShader.js
const vertexShader = /*glsl*/`
void main() {
            gl_Position = vec4(position, 1.0);
        }
`;
export default vertexShader;

配置完成后，在 VSCode 中的显示效果如下：

在 three.js 中引入着色器的方式多样，例如也可以将代码放入 html 中的 <script> 标签内。Comment target templates 插件使得着色器以字符串形式导入时也能获得高亮，极大提升了便利性。此外，通过某些打包工具也可直接引入 .glsl 文件，但配置相对复杂。目前介绍的这种通过重命名和插件高亮的方式，已能很好地满足开发需求。

总结。

本文介绍了 three.js 引入 glsl 文件并实现代码高亮的方法。更多相关内容可搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！