Shader Toy让VS Code秒变GLSL实时编辑器的终极工具【免费下载链接】shader-toyShadertoy-like live preview for GLSL shaders in Visual Studio Code项目地址: https://gitcode.com/gh_mirrors/sh/shader-toyShader 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），仅供参考
)
)
