基于Three.js的glsl编写环境搭建

目前无论是Three.js官方库还是一些其他的做法，基于网页端glsl的编写都是以字符串的形式来编写的，代码整洁尚且不谈，代码提示和格式校验都十分困难。本文介绍一种glsl与js分离的编写环境搭建方法。

一.安装Parcel

Parcel是一款Web 应用打包工具使用简单快捷。
打开终端

npm install -g parcel-bundler

等待自动处理即可安装完成。
安装好以后，先进入项目，cd空格，直接把文件夹拖进去回车。

cd 项目路径

首次进入项目执行，创建json

npm init -y

然后需要发布的时候

parcel index.html

就可以完成发布了，在浏览器中打开http://localhost:1234就可以预览发布后的网页。

二.引用glsl

完成parcel发布以后，在代码中执行引用three，即可自动创建对three.js的引用

import * as THREE from 'three';

同样的，对glsl的引用方法如下，就可以正常加载shader了：

import vertex from './shaders/vertex.glsl';
import fragment from './shaders/fragment.glsl';
...略...
var material = new THREE.ShaderMaterial({
    vertexShader: vertex,
    fragmentShader: fragment,
    uniforms,
});

image.png

三.代码提示

代码提示有各自编辑器的做法，这里编辑器我使用的是vscode，安装了GLSL language support扩展插件，可以识别多种命名.vs, .fs, .fx, .gs, .cs, .tc, .te, .vsh, .fsh, .gsh, .vshader, .fshader, .gshader, .vert, .frag, .geom, .tesc, .tese, .comp, .f.glsl, .v.glsl, .g.glsl, .glsl
而且有代码高亮提示等基础功能：

image.png

---

唯一的缺点是代码格式化的时候会把1.0强制变成1.