这是一是什么

Shader 操练场：修改 / 粘贴 GLSL 代码即可实时预览 three.js 渲染效果，无需在本地配置任何环境。 「框架代码」页可把当前效果一键导出为 原生 / Vue3 / React 可运行代码。

自动注入（直接用，不要声明）

uniform	类型	含义
uTime	float	运行秒数
uMouse	vec2	鼠标在画布上的位置，0~1，y 向上
uResolution	vec2	画布像素尺寸

three.js 内置 attribute / uniform（position / normal / uv / modelMatrix / modelViewMatrix / projectionMatrix / viewMatrix / normalMatrix / cameraPosition）同样直接可用、无需声明。

自定义 uniform 与注释标注

在着色器里写 uniform float uSpeed;，Uniforms 页会自动生成滑块。行尾注释可精细控制：

uniform float uSpeed;   // @label 速度 @default 1.5 @range 0 5 @step 0.1
uniform vec3  uTint;    // @label 色调 @default 0.3,0.8,1.0
uniform float uMix;     // @range 0 1

vec3/​vec4 名字含 color/tint 时自动出现取色器；sampler2D 自动出现内置程序纹理下拉（棋盘格 / 网格 / 噪声 / 砖墙等）。

粘贴 Shadertoy 代码

片元里含 void mainImage(out vec4, in vec2) 且没有 main() 时会自动包装： 注入 iTime / iMouse / iResolution / iTimeDelta / iFrame 并把 texture() 映射到 texture2D()。 建议把模型切到「全屏四边形」获得最接近 Shadertoy 的体验。iChannel0~3 贴图不支持，可改用 uniform sampler2D + 内置纹理。

框架代码导出

「框架代码」页生成与当前画面一致的最小工程文件：原生 HTML（双击即用）、Vue 3 SFC（npm i three）、 React（npm i three），含统一值、当前 uniform 值与资源释放。

快捷键与数据

Ctrl/Cmd+Enter 立即编译 · Ctrl/Cmd+S 保存到本地 · 编辑内容自动存 localStorage · 「分享链接」把完整工作区编码进 URL。着色器编译错误会显示在编辑器下方，点击错误可跳转对应行。

添加自己的内置预设

编辑项目里的 presets.js，仿照已有条目增加对象即可（id / name / desc / geometry / vertex / fragment）。