前言
如果你是一个前端开发人员，并且在 WebGL 或者 Three.js 相关的项目中使用到了 GLSL，那么你肯定对于 GLSL 开发过程中的调试和实时预览感到头疼。然而，现在有一款 npm 包叫做 glslify-live 可以帮你解决这个问题。glslify-live 可以让你实时编辑和预览 GLSL 代码，而不需要重新编译或刷新浏览器。
安装
使用 npm 安装 glslify-live：
npm install glslify-live -g
使用
在你的项目目录下创建一个 GLSL 文件（例如 example.frag），并添加你的 GLSL 代码。
在命令行输入以下命令：
glslify-live example.frag
执行以上命令后，一个本地的 Web 服务器会启动。现在你可以在浏览器里访问 http://localhost:9966 来查看你编辑后的 GLSL 代码。
- 在 glslify-live 中编辑你的 GLSL 代码，每当你储存你的更改时，代码就会自动编译并重新加载到浏览器中。
示例代码
考虑以下示例代码。
vertex.glsl：
-- -------------------- ---- -------
--------- ---- ---------
--------- ---- -------
--------- ---- ---
------- ---- ----------------
------- ---- -----------------
------- ---- -------------
------- ---- ----
------- ---- --------
---- ------ -
------- - ----------------------- - ------------ -----------
--- - ---
----------- - ---------------- - --------------- - -------------- -----
-fragment.glsl：
-- -------------------- ---- -------
--------- ----- ------
------- ----- -----
------- ---- ----
------- ---- --------------
---- ------ -
------------ - --------- --------------- -----
-这是一个非常简单的 Shader，它接受一个时间变量并应用一个简单的、基于时间的颜色动画。你可以在 glslify-live 中实时预览你的更改。
结束语
使用 glslify-live，对于那些需要花费大量时间在经常涉及到 GLSL 的项目中的开发人员而言，能够更快地进行开发，而无需担心每次调试都要重新编译或刷新浏览器。我们希望这篇文章能对你有所帮助，同时也推荐大家进一步研究 glslify-live 以及其他类似工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/133488