什么是WebGL着色器演练场？

编写 GLSL 顶点着色器和片段着色器，通过 WebGL 即时查看渲染结果。无需任何本地配置。用来学习着色器编程、原型化视觉特效或尝试 GPU 加速图形。

内置 uniform 包括动画用的 `u_time`、画布尺寸 `u_resolution`、鼠标位置 `u_mouse`、已渲染帧数 `u_frame`,以及一张现成的可平铺噪声纹理 `sampler2D u_noise`。上传任意图片就能把它绑定到 `sampler2D u_texture`,片元着色器可以直接采样。十个预设(渐变波、等离子、Circle SDF、噪声隧道、曼德博集合、光线步进球体、变形球、Voronoi、星空、Worley 细胞),还有动画速度滑块、实时 FPS 显示、自动编译开关、可冻结时间轴的暂停按钮、可完整还原源码的分享链接,以及把当前画面导出为 PNG 的功能,工具就这些。

使用方法

1. 将您的 GLSL 片段着色器代码写入或粘贴到编辑器中。默认着色器已经加载好了。
2. 实时预览会随着您的输入自动更新。内置 uniform 变量包括时间、分辨率和鼠标位置。
3. 将着色器导出为 PNG 截图，或复制代码用于您自己的 WebGL 项目。

何时使用

• 学习 GLSL 语法,又不想在本地折腾 C++ 或 Three.js 工程环境。
• 把一个片段着色器效果先在网页里试好,再移植到游戏引擎或网站里。
• 为作品集、幻灯片或社交帖子生成动态背景的静态截图。

结果

一位游戏开发者在制作水波纹特效原型时，使用正弦波和时间 uniform 编写片段着色器。预览面板会实时显示动画效果。

常见问题

需要懂 C 语言或图形学才能用吗?

GLSL 是一种类 C 的小语言,循环、条件、浮点运算,只要写过 C、Java 或 JavaScript 都能看懂。预设着色器里都有注释,大多数情况照着改参数就能上手,不需要 GPU 编程经验。

着色器编译通过了,可是预览全黑,怎么回事?

常见原因是:在 main 函数之外写 `gl_FragColor`、返回 `vec3` 而不是 `vec4`、或者在 noise 函数里出现除零。打开浏览器控制台,WebGL 即便编译成功也会打印有用的警告。

可以采样贴图或者上传自己的图片吗?

可以。点击预览栏的“上传图片”按钮,任意 PNG 或 JPG 都能被绑定为 `sampler2D u_texture`。同时 `u_hasTexture` 这个 float 会在纹理就绪时变成 1.0,着色器据此判断是否有纹理可用,这和 Shadertoy 的通道输入约定一致。

用的是哪个版本的 WebGL?

WebGL 1,搭配 GLSL ES 1.0。也就是用 `varying` 而不是 `in/out`,写 `gl_FragColor` 而不是命名输出,也没有整数纹理。给 WebGL 2 或桌面 OpenGL 3+ 写的着色器要稍微改改语法才能跑。

代码会上传到服务器吗?

不会。编译和渲染都在本地 GPU 上、浏览器里完成。源码从不离开页面,关掉标签页又没复制的话,代码就直接没了。

相关工具