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

OpenGL 专栏收录该内容
1 篇文章 0 订阅

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

环境配置

vscode 插件安装

安装如下插件:

  • Shader languages support for VS Code
    img

  • glsl-canvas
    v2-df5d67348c5afe6c098925a859f3e321_720w

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

  • 片段(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
image-20211125162904295

语法检查

安装插件GLSL Linter
image-20211125163528500

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

GLSL Linter: failed to run GLSL validator!

那么需要配置Validator Path,从这里下载,我们可以根据自己的电脑选择不同的安装包,此处我们选window的安装包
在这里插入图片描述

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

在这里插入图片描述
打开vscode设置栏,输入glsl,点击GLSL linter configurations,然后就可执行语法检查了。

image-20211125165211956

如果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语法检查

代码补全

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

image-20211125170312881

在跳出的编辑框中输入glsl,选择glsl.json,
在这里插入图片描述

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

在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

晓梦清尘

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值