ToolPro
Workspace
Shader 实时编辑器
基于 WebGL 的在线 GLSL 片段着色器编辑器 (Fragment Shader)。支持实时预览与调试。
fragment.glsl
GLSL ES 1.0
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
60 FPS
工具介绍
一款基于 WebGL 的轻量级 Shader 在线编辑器，类似于迷你版的 Shadertoy。您可以在这里编写 OpenGL Shading Language (GLSL) 片段着色器代码，并立即看到渲染结果。
功能特点
- 实时预览：代码修改后立即重新编译并渲染（支持 Ctrl+S 快捷键）。
- 内置 Uniforms：
utime (float): 程序运行时间（秒）-
uresolution (vec2): 画布分辨率 (width, height)-
umouse (vec2): 鼠标在画布上的位置 (x, y)- 示例库：内置 渐变、SDF圆形、平铺图案、噪声 等多个经典着色器示例，方便学习。
- 错误调试：编译错误会直接显示在编辑器下方，方便快速定位问题。
- 本地保存：自动保存您的代码到浏览器缓存，刷新不丢失。
使用指南
编辑器默认提供了一个 Fragment Shader 模板。您只需要关注 void main() 函数中的逻辑，计算 glFragColor 即可。入口函数无需自己定义顶点着色器。
信息
- 发布日期
- 2026-01-13
- 最近更新
- 2026-02-23
- 状态
- Normal