安装
插件搜索 Shader，安装下图两个扩展，重启VSCode
预览
右键 > show GLSL preview 打开预览窗口
打开后 command + s 会自动应用代码并预览
使用说明
新建工程
创建个文件夹，shader 文件和资源文件放里面就可以了
个人比较喜欢分文件夹放
入口函数
- 着色器的入口点是
void main()，不需要重写
-
需要编辑的函数和网页版一致，都是
void mainImage(vec4 out，vec2 in)
默认参数
- 默认参数输入也和网页版一致
uniform vec3 iResolution; // viewport resolution (in pixels)
uniform float iTime; // shader playback time (in seconds)
uniform float iTimeDelta; // render time (in seconds)
uniform float iFrameRate; // shader frame rate
uniform int iFrame; // shader playback frame
uniform float iChannelTime[4]; // channel playback time (in seconds)
uniform vec3 iChannelResolution[4]; // channel resolution (in pixels)
uniform vec4 iMouse; // mouse pixel coords. xy: current (if MLB down), zw: click
uniform samplerXX iChannel0..3; // input channel. XX = 2D/Cube
uniform vec4 iDate; // (year, month, day, time in seconds)
纹理输入
参考上图的代码下面例子就行，用本地资源靠谱
#iChannel0 "file://duck.png"
#iChannel1 "https://66.media.tumblr.com/tumblr_mcmeonhR1e1ridypxo1_500.jpg"
#iChannel2 "file://other/shader.glsl"
#iChannel2 "self"
#iChannel4 "file://music/epic.mp3"
纹理采样
因为 WebGL 标准，许多选项只能在宽度和高度都是 2 的幂次情况下工作。使用以下语法:
#iChannel0::MinFilter "NearestMipMapNearest"
#iChannel0::MagFilter "Nearest"
#iChannel0::WrapMode "Repeat"
Cubemaps输入
Cubemaps 可以指定为任何其他纹理
它们是 Cubemaps 的路径包含通配符和它们的类型被显式声明的组合
#iChannel0 "file://cubemaps/yokohama_{}.jpg" // 注意 '{}'
#iChannel0::Type "CubeMap"
通配符将通过替换下列集合中的任何值来解析
如果找不到这六个文件中的任何一个，就从下一个集合的第一个开始尝试。
[ 'e', 'w', 'u', 'd', 'n', 's' ]
[ 'east', 'west', 'up', 'down', 'north', 'south' ]
[ 'px', 'nx', 'py', 'ny', 'pz', 'nz' ]
[ 'posx', 'negx', 'posy', 'negy', 'posz', 'negz' ]
音频输入
默认情况下音频输入是禁用的，更改设置 Enable Audio Input 启用。
如果您的通道定义了音频输入，它将从文件扩展名中推断出来。
通道将是一个 2 像素高和 512 像素宽的纹理，宽度可以通过 Audio Domain Size 设置来调整。
第一行包含音频频谱，第二行包含其波形。
键盘输入
如果你想使用键盘输入，你可以在着色器前加上 #iKeyboard。
就可以实现下面几个函数:
bool isKeyPressed(int);
bool isKeyReleased(int);
bool isKeyDown(int);
bool isKeyToggled(int);
此外，还提供以下常量
- Key_A ~ Key_Z
- Key_0 ~ Key_9
- Key_UpArrow、Key_LeftArrow、Key_Shift ……
使用这些常量和函数可以查询键盘的状态。
Include 其他着色器
你也可以通过一个标准的 c 类语法来包括其他文件到你的着色器中
这些着色器不能定义void main() 函数，因此只能用于使用函数、常量定义等
#include "some/shared/code.glsl"
#include "other/local/shader_code.glsl"
自定义 Uniforms
使用自定义 uniform 变量定义那些直接在你的着色器中使用的 uniform 变量
给一个初始值以及一个可选的范围。
// 这将暴露一个滑动条来编辑该值
#iUniform float my_scalar = 1.0 in { 0.0, 5.0 }
// 步长为 0.2
#iUniform float my_discreet_scalar = 1.0 in { 0.0, 5.0 } step 0.2
// 这将公开一个文本字段以给出任意值
#iUniform float other_scalar = 5.0
// 暴露两个文本字段
#iUniform vec2 position_in_2d = vec2(1.0)
// 这将是一个可编辑的颜色选择器
#iUniform color3 my_color = color3(1.0)
// 这将暴露四个滑块
#iUniform vec4 other_color = vec4(1.0) in { 0.0, 1.0 }
已知坑
- 1、着色器的性能不是很好，碰到了不用纠结
- 2、线上音频不能用，VSCode的问题，不用纠结。
- 3、偶现bug会导致音频声音损坏。
