H5前端技术交流

 找回密码
 立即注册
搜索
热搜: CSS Layabox
查看: 4125|回复: 1

VsCode安装shader glsl环境

[复制链接]

4

主题

5

帖子

74

积分

版主

Rank: 7Rank: 7Rank: 7

积分
74
发表于 2021-4-9 17:40:29 | 显示全部楼层 |阅读模式
本帖最后由 wenxi 于 2021-6-17 12:06 编辑

1、在扩展tab中搜索Shader languages support for VS Code

2、安装后搜索glsl-canvas,并安装


安装完毕后,新建glsl文件,会有代码提示和代码高亮的功能


打开片元着色器代码文件,通过ctrl + Shift + P弹出命令面板,然后输入glsl找到“show glslCanvas”命令,点击运行,可预览代码运行效果


3、安装代码检测插件glsl-linter glsl-lint, 以下说明以glsl-linter插件为例。


之后去https://github.com/KhronosGroup/glslang/releases下载glslang

下载成功后将zip包解压到vscode安装目录内部



然后打开vscode的settings.json文件,添加如下配置



  1. "glsl-linter.validatorPath": "D:\\Microsoft VS Code\\glslang\\bin\\glslangValidator",
  2. "glsl-linter.fileExtensions": {
  3.     "frag.glsl": "frag",
  4.     "vert.glsl": "vert"
  5. },
复制代码
此处扩展项只配置的顶点着色器和片元着色器,其他着色器可自行配置。根据配置可见:顶点着色器文件名必须以frag.glsl结尾,片元着色器代码文件名必须以vert.glsl结尾。

至此,代码检测环境配置完毕,效果如下



引用:
https://zhuanlan.zhihu.com/p/151384233
https://github.com/Jacajack/vscode-glsl-linter/issues/4









最初90%的开发工作将会用去你最初90%的开发时间。剩下的10%的开发量将会用去你另外一个90%的开发时间。
回复

使用道具 举报

4

主题

5

帖子

74

积分

版主

Rank: 7Rank: 7Rank: 7

积分
74
 楼主| 发表于 2021-4-9 18:10:59 | 显示全部楼层

最初90%的开发工作将会用去你最初90%的开发时间。剩下的10%的开发量将会用去你另外一个90%的开发时间。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|武汉明昇时代科技有限公司 ( 鄂ICP备18027164号-1 )

GMT+8, 2022-8-11 10:48 , Processed in 0.207680 second(s), 18 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表