浏览器实时运行 光照 原始语言：GLSL ES 3.00
Fresnel 边缘光
在三维网格上实现的 Schlick 近似 Fresnel 边缘光，配合 Lambert 漫反射与 Blinn-Phong 高光，用来验证 mesh-3d 预览模式、世界空间法线计算与相机位置 uniform。
Shader 展示中心
共 5 个条目：4 个可在浏览器实时运行，1 个仅提供源码与静态预览，0 个尚未实现。 实时预览使用 three.js 与 WebGL 2，着色器语言为 GLSL ES 3.00；只有真正能编译运行的条目标记为「浏览器实时运行」。
分类
- 程序化生成 2
- 光照 1
- 材质 1
- HLSL 移植 1
- 后处理 0
浏览器实时运行 程序化生成 原始语言：GLSL ES 3.00
程序化波浪场
由多层正弦波叠加而成的程序化效果，纯数学计算、不依赖任何纹理，是本站 WebGL 2 实时预览管线的第一个示例，也用来定义参数控件与 uniform 的绑定约定。
浏览器实时运行 HLSL 移植 原始语言：HLSL (Unity URP)
URP RimLit 移植示例（HLSL → GLSL ES 3.00）
一个按 Unity URP 惯例编写的 RimLitUnlit HLSL 着色器，以及它的浏览器 GLSL ES 3.00 移植版本。页面给出完整的参数映射表、无法一致的部分及其原因，并如实标注验证方式。
故意编译失败 · 错误回退演示 程序化生成 原始语言：GLSL ES 3.00
编译失败回退演示（故意出错的 GLSL）
一个刻意保留语法错误的 GLSL ES 3.00 片元着色器，用来端到端验证错误处理路径：驱动日志必须可见、静态回退必须出现、页面不能留下空白画布。
仅源码 / 静态预览 材质 原始语言：HLSL (Unity URP)
URP 双层滚动法线（仅源码）
一个使用 URP PBR 光照与两张滚动法线贴图的 Unity 着色器。由于依赖贴图资源与 URP 每帧光照数据，目前没有浏览器实时预览，页面只提供原始 HLSL 与静态参考图。
关于实时预览
- 进入详情页后，three.js 只有在预览即将进入视口时才会被动态加载；列表页与文章页不会下载任何 3D 依赖。
- 初始化前会检测 WebGL 2 能力，不可用时保留静态预览并说明原因。
- 着色器编译失败时会显示驱动返回的原始日志，同时切回静态预览。
- 暂停、重置与「减少动态效果」都会立刻生效，不需要刷新页面。
- 设备像素比与绘制缓冲区分辨率都有上限，低性能设备上会自动降低渲染分辨率。