OpenGL GLSL着色器语言的 VScode 环境配置、语法检查和代码补全

OpenGL GLSL着色器语言的 VScode 环境配置、语法检查和代码补全

环境配置

vscode 插件安装

安装如下插件：

• Shader languages support for VS Code
  

• glsl-canvas
  

可以通过新建一个着色器文件调试，我们一般将

• 片段（fragment）着色器文件的后缀名设为：“.fs"或”.fs.glsl"
• 顶点（vertex）着色器文件的后缀名设为：“.vs"或”.vs.glsl"

此处我们新建ourShader.fs文件，代码如下

#ifdef GL_ES
precision mediump float;
#endif

void main(){
    gl_FragColor = vec4(1.);
}

使用快捷键Ctrl/Command+shift+P，打开命令行窗口后输入Show glslCanvas。

语法检查

安装插件GLSL Linter

如果vscode左下角弹出窗口显示：

GLSL Linter: failed to run GLSL validator!

那么需要配置Validator Path，从这里下载，我们可以根据自己的电脑选择不同的安装包，此处我们选window的安装包

然后我们解压，此处我解压到当前工作区下的文件夹中，这里我在当前工作区文件夹下面新建了一个others文件夹，然后将解压后的文件夹复制到其中，注意这里可以放置在任意文件夹，放在工作区下只是为了方便。

打开vscode设置栏，输入glsl，点击GLSL linter configurations，然后就可执行语法检查了。

如果vscode左下角弹出窗口显示：

GLSL Linter: GLSL validator returned exit code 1! #4

那么将当前工作区下的.vscode文件夹下面的settings.json加入如下代码

"glsl-linter.validatorPath": 
// 此处要进行修改，修改为你解压后的那个bin文件夹中的.exe程序文件的路径。
	"F:\\code\\openGL_learn\\demo3\\others\\glsl_Validator\\bin\\glslangValidator.exe", 
"glsl-linter.fileExtensions": {
    ".fs.glsl": "frag",
    ".fs": "frag",
    ".vs.glsl": "vert",
    ".vs": "vert",
    ".tes.glsl": "tese",
    ".tes": "tese",
    ".tcs.glsl": "tesc",
    ".tcs": "tesc",
    ".gs.glsl": "geom",
    ".gs": "geom",
}

保存后，重新打开Vscode 即可实现GLSL语法检查

代码补全

点击文件–> 首选项–> 用户片段

在跳出的编辑框中输入glsl，选择glsl.json，

将这个地址的glsl.json代码复制到你的glsl.json文件中即可正常代码补全与提示。