Shader Toy：让VS Code秒变GLSL实时编辑器的终极工具
Shader Toy：让VS Code秒变GLSL实时编辑器的终极工具
【免费下载链接】shader-toyShadertoy-like live preview for GLSL shaders in Visual Studio Code项目地址: https://gitcode.com/gh_mirrors/sh/shader-toy
Shader Toy是一款强大的Visual Studio Code扩展，它能让你在VS Code中实时预览GLSL着色器效果，提供类似Shadertoy.com的开发体验。通过"显示GLSL预览"命令，开发者可以立即查看 shader 代码的渲染结果，极大提升了GLSL开发效率。
🌟 核心功能：让GLSL开发如虎添翼
🔍 实时预览与多视图支持
Shader Toy最核心的功能是实时预览GLSL着色器效果。只需在命令面板输入"Shader Toy: Show GLSL Preview"或右键点击编辑器选择该命令，即可分屏显示全屏quad渲染效果。对于多通道依赖的复杂shader，还可以使用"Shader Toy: Show Static GLSL Preview"命令打开多个独立预览窗口，实现多视图并行开发。
图：VS Code中Shader Toy的实时预览界面，左侧为代码编辑区，右侧为渲染结果
🎛️ 丰富的Uniform变量支持
Shader Toy提供了完整的常用Uniform变量集，包括：
iResolution- 屏幕分辨率iGlobalTime/iTime- 全局时间iTimeDelta- 时间增量iFrame- 帧计数器iMouse- 鼠标位置和状态iDate- 日期信息iSampleRate- 采样率iChannelN(0-9) - 纹理通道iChannelResolution[]- 纹理分辨率
这些变量可以直接在shader中使用，无需额外配置，完美兼容Shadertoy风格的代码。
🖼️ 灵活的纹理输入系统
通过简单的指令即可在shader中定义纹理输入，支持多种来源：
#iChannel0 "file://duck.png" // 本地图片 #iChannel1 "https://example.com/image.jpg" // 网络图片 #iChannel2 "file://other/shader.glsl" // 其他shader输出 #iChannel3 "self" // 当前shader的上一帧输出还可以控制纹理的采样行为：
#iChannel0::MinFilter "NearestMipMapNearest" #iChannel0::MagFilter "Nearest" #iChannel0::WrapMode "Repeat"🎭 立方体纹理支持
通过通配符语法轻松加载立方体纹理：
#iChannel0 "file://cubemaps/yokohama_{}.jpg" #iChannel0::Type "CubeMap"系统会自动尝试替换通配符为'e'/'w'/'u'/'d'/'n'/'s'等方向后缀，加载完整的六面立方体纹理。项目中提供了完整的yokohama立方体纹理示例，位于demos/cubemap/目录下。
🎹 键盘交互支持
在shader顶部添加#iKeyboard指令即可启用键盘输入支持，系统会自动暴露以下函数：
bool isKeyPressed(int); // 按键按下瞬间 bool isKeyReleased(int); // 按键释放瞬间 bool isKeyDown(int); // 按键持续按下 bool isKeyToggled(int); // 按键切换状态配合Key_A到Key_Z、Key_UpArrow等常量，轻松实现交互式shader控制。
🛠️ 自定义Uniform与实时调节
Shader Toy支持自定义uniform变量，并提供直观的UI控制器：
#iUniform float my_scalar = 1.0 in { 0.0, 5.0 } // 滑块控制器 #iUniform float my_step = 1.0 in { 0.0, 5.0 } step 0.2 // 带步长的滑块 #iUniform color3 my_color = color3(1.0) // 颜色选择器 #iUniform vec2 position = vec2(1.0) // 向量控制器这些控制器会显示在预览窗口中，方便实时调整参数并查看效果变化。
🚀 快速上手：从零开始的GLSL创作
🔧 安装与启动
- 克隆仓库：
git clone https://gitcode.com/gh_mirrors/sh/shader-toy - 在VS Code中打开项目
- 安装依赖：
npm install - 按F5运行扩展开发宿主窗口
- 在新窗口中打开任意.glsl文件
- 右键选择"Shader Toy: Show GLSL Preview"或通过命令面板启动预览
✏️ 编写第一个Shader
创建一个简单的GLSL文件，输入以下代码：
void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; gl_FragColor = vec4(uv, 0.5 + 0.5*sin(iTime), 1.0); }保存后启动预览，你将看到一个随时间变化的色彩渐变效果，这是一个基础的Shadertoy风格着色器。
🔄 ShaderToy兼容性
Shader Toy提供了与Shadertoy.com的高度兼容性。对于使用mainImage函数的Shadertoy代码，只需稍作调整即可在本扩展中运行：
- 将
fragCoord替换为gl_FragCoord - 将
fragColor替换为gl_FragColor
例如，以下是一个简单的Shadertoy移植示例：
void main() { float time = iGlobalTime * 0.5; vec2 uv = (gl_FragCoord.xy / iResolution.xx - 0.5) * 8.0; // 复杂的图形算法... gl_FragColor = vec4(r, g, b, 1.0); }📝 高级功能探索
🎥 录制与截图功能
Shader Toy内置了强大的录制功能，支持两种模式：
- 实时渲染：适合预览和交互场景
- 离线渲染：适合生成高质量视频，确保无丢帧
通过预览窗口的录制按钮即可开始录制，支持自定义帧率、比特率和输出格式等参数。截图功能则可以快速保存当前帧画面，默认使用预览窗口分辨率，也可通过设置自定义截图分辨率。
🎵 音频输入支持（实验性）
启用音频输入后，可以将音频作为纹理输入到shader中。音频纹理为2像素高、512像素宽，第一行是频谱数据，第二行是波形数据。通过这种方式，可以创建音乐可视化效果的shader。
🧩 Shader模块化与包含
支持C风格的#include指令，实现代码复用：
#include "common/math.glsl" #include "effects/noise.glsl"被包含的文件不能定义void main()函数，适合存放工具函数、常量定义等可复用代码。项目的demos/common/目录提供了一些通用的数学和工具函数示例。
💻 WebGL 2.0与GLSL ES 3.00支持
通过设置shader-toy.webglVersion为WebGL2，可以启用WebGL 2.0支持，从而使用GLSL ES 3.00特性。这包括顶点着色器支持，通过#iVertex指令在片段着色器中声明顶点着色器：
#iVertex attribute vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); }🐞 错误诊断与调试
Shader Toy提供了强大的错误诊断功能，能够在代码编辑器中直接标记编译错误，并在预览窗口中显示详细的错误信息。
图：Shader Toy的错误诊断界面，右侧显示详细的编译错误信息
错误信息包含文件名、行号和具体错误描述，点击错误可以直接跳转到对应的代码行，大大简化了调试过程。
🎨 创意示例与演示
项目的demos/目录包含了丰富的示例shader，展示了各种高级效果：
- metaballs.glsl- metaball效果演示
- raymarcher_88.glsl- 光线追踪示例
- volume_points_0.glsl- 体积点渲染
- ltc_quad.glsl- LTC光照演示
- webgl2_iVertexDemo.glsl- WebGL 2.0顶点着色器示例
这些示例不仅展示了GLSL的强大功能，也可以作为你自己创作的起点。
📚 学习资源与文档
- CONTRIBUTING.md - 贡献指南
- LICENSE.md - 开源许可信息
- 源代码结构：
- src/extension.ts - 扩展主入口
- src/shaderparser.ts - Shader解析器
- src/webviewcontent.ts - WebView内容生成
🛠️ 系统要求
- 支持WebGL的显卡
- Visual Studio Code 1.40.0或更高版本
- Node.js 12.x或更高版本（用于开发扩展）
🎯 结语
Shader Toy将Visual Studio Code转变为一个功能完备的GLSL开发环境，为创意编程和图形开发提供了强大工具。无论你是图形编程新手还是经验丰富的开发者，这款扩展都能显著提升你的工作效率，让你专注于创意本身而非工具配置。
立即开始你的GLSL创作之旅，探索无限的视觉可能性！
【免费下载链接】shader-toyShadertoy-like live preview for GLSL shaders in Visual Studio Code项目地址: https://gitcode.com/gh_mirrors/sh/shader-toy
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考