ShaderToy（1）——ShaderTOy简介与VSCode配置

---

---

前言

shadertoy是由Inigo Quilez和 Pol Jeremias创立的一个WebGL网站
在这个系列的教程我们将学习shaderToy的一些基本的函数与用法

---

一、Shadertoy简介与VSCode配置

1.Shadertoy简介

shadertoy是由Inigo Quilez和 Pol Jeremias创立的，它主要是用来写FragmentShader(片段着色器)的一个网站，所有的图形都由程序生成，没有模型的输入(顶点着色器给定所以无法进行模型输入)，这就导致它的计算效率的下降，所以它被称为Shadertoy(着色器玩具)，但就是由于这样的原因，学习Shadertoy网站可以使我们加深对shader的理解。
ShaderToy网站

2.ShaderToy在VSCode上配置

插件下载

Shader languages support————使在VSCode下的shader代码高亮，在写shader的时候实现自动提醒的插件。

ShaderToy————GLSL脚本的运行(OpenGL Shader Languages)

HLSL preview————Shader效果的展示

glsl canvas

GLSL Linter

GLSL Linter库配置

下载VSCode的GLSL依赖包

链接: 下载
下载glslang-master-windows-x64-Release.zip

在VSCode下配置路径

1.点击设置，选择扩展，点击GLSL linter configuration

2.设置路径：路径为刚下载的压缩包解压后的文件夹下的glslang-master-windows-x64-Release文件夹下的bin文件夹下的glslangValidator.exe文件

3.用户配置
按 Ctrl + Shift + P 打开设置（json），添加如下代码：

{
"glsl-linter.validatorPath": "D:\\WorkInstaller\\OpenGL\\glslang\\glslang\\bin\\glslangValidator.exe",//(与上文设置的路径相同)
"glsl-linter.fileExtensions": {

    ".fs.glsl": "frag",
    ".vs.glsl": "vert",
    ".tes.glsl": "tese",
    ".tcs.glsl": "tesc",
    ".gs.glsl": "geom"
},
"shader-toy.enabledAudioInput": true
}

设置->用户代码片段->搜索glsl.json
下载配置文件
将配置文件代码复制到json并保存