Book of Shaders 00 - 使用 VS Code 编写 GLSL

0x00 写在前面

最近在学习由 Patricio 编写的 The Book of Shaders，这是一本关于 Fragment Shaders（片段着色器）的入门指南。为了在一个相对熟悉的平台运行着色器代码，最后决定使用 VS Code 来配置开发环境。配置好的 VS Code 支持语法检测及代码提示，同时还可以实时预览修改的结果。

本文简单记录下安装和配置的过程。

0x01 安装 VS Code 及相关插件

第一步：安装 VS Code

第二步：在 VS Code 中安装相关的插件

安装插件的步骤：

1. 点击右侧的 Extensions 按钮 (或使用快捷键 ctrl/cmd + shift + x)
2. 在搜索框中输入插件名
3. 点击插件旁的 Install 安装
4. 有的插件需要重启 VS Code，则点击插件旁的 Reload Required

按照安装插件的步骤依次安装插件：

1. Shader languages support for VS Code
2. glsl-canvas
3. GLSL Lint

0x02 语法检测

GLSL Lint 插件还依赖 OpenGL and OpenGL ES shader validator，点击链接即可前往，选择对应的 Release 版本下载。将下载好的压缩文件解压后，配置到系统环境变量中。因为不同的系统配置系统环境变量的方式也有所不同，这里不赘述了。

配置好环境变量后，重新打开 VS Code，新建一个文件来测试一下语法检测是否生效。这里故意删掉了 main 函数的右括号，可以看到第 7 行有红色的下划线提示，鼠标悬停在红线上会显示具体的错误信息。

同时也可以打开 Problems 界面来查看所有报错信息 (打开方式：View → Problems 或使用快捷键 ctrl/cmd + shift + m)。

0x03 代码提示

代码提示通过 VS Code 自带的 Snippets 功能来完成，在 VS Code 中依次点击 File → Preferences → User Snippets，在弹出的框中输入 glsl，点击第一个结果。VS Code 会帮我们创建一个名为 glsl.json 的文件，在该文件中我们可以自定义一些 glsl 的代码片段。

这里不妨直接使用 Lewis Lepton 写好的 配置文件。如果前面的链接访问速度较慢，也可以下载我上传到博客园中备份： glsl.json.zip。

下载完成后，将其中的内容复制粘贴到刚刚创建好的 glsl.json 中并保存，就可以愉快地开始敲代码了。

0x04 Hello World

最后运行一段简单的 glsl 代码来检查上面的配置是否正确吧。

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;
    gl_FragColor = vec4(st.x,st.y,0.0,1.0);
}

使用快捷键 ctrl/cmd + shift + p，输入并选择 Show glslCanvas 按下回车，应该就可以在右侧看到展示结果了。

0x05 其他说明

The Book of Shaders 使用 WebGL 运行环境，与普通的 GLSL 略有差异。一些细节可以前往 GlslCanvas 的项目主页进行查看。

参考资料：

• [1] The Book of Shaders

• [2] Shader Tutorial Series