VsCode安装shader glsl环境

Number of views 147
vscode glsl shaderlab

下面的安装过程很复杂，实际上平台就可以运行GLSL代码跟ShaderToy代码，如果只是想快速运行代码，直接在该平台尝试即可,具体可查看平台使用指南

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

image.png

  • 安装后搜索glsl-canvas，并安装

image.png

  • 至此环境安装完成，可新建个工程测试：

image.png

mac运行通过 ⌘ ⇧ P

windows运行通过ctrl ⇧ P

运行结果如下：

image.png

  • 做到这步还没完，我们还得安装个能判断语法是否错误的扩展插件，还是在extension tab中搜索glsl-linter进行安装：

image.png

image.png

  • 解压后把内部的lib，include以及bin里的文件拖动至/usr/local下相对应的文件夹下

  • 做完后点击vscode > preferences > settings > Extensions

image.png

  • 重启vscode

image.png

  • 报错提示生效后，我们需要配置下代码提示，Code > preferences > User snippets,出来搜索框后，搜索glsl，并点击搜索结果：

image.png

点击该链接

image.png

  • 复制该内容贴至glsl.json文件中，保存回到shader文件后，发现已经有了提示操作：

image.png

  • 除了使用glslcanvas进行效果预览外还可以使用glslviewer进行着色器效果预览，可以通过 brew install glslviewer进行安装

  • 安装后通过glslviewer test.frag进行着色器运行，效果如下：

image.png

Shader实验室1593
0 Answers