实验室

船坞

流体模拟

自写 Navier-Stokes 求解器：ping-pong FBO、涡量约束、Jacobi 压力迭代——拖拽注入速度与染料。

手写整条流体管线，没有现成的流体库。

WebGL2 · GLSL · 零依赖

深色画布上的蓝紫色染料，随速度场卷曲扩散。深色画布上的蓝紫色染料，随速度场卷曲扩散。

物理沙盒

Verlet 积分 + 空间哈希碰撞：点击生成小球、拖拽投掷、重力开关、弹性碰撞。

手写积分器与宽相碰撞，没有物理引擎。

Canvas 2D · Verlet · 零依赖

五个彩色小球在沙盒底部稳定停靠。五个彩色小球在沙盒底部稳定停靠。

流场粒子

Curl noise 无散度流场：2500 粒子长拖尾、鼠标吸引/排斥切换。

手写 curl noise 场与粒子拖尾，没有粒子库。

Canvas 2D · Curl Noise · 零依赖

蓝色粒子沿弯曲流线运动，留下连续拖尾。蓝色粒子沿弯曲流线运动，留下连续拖尾。

粒子系统

实时粒子模拟：数千粒子的鼠标斥力场与三维漂移，全部在 GPU 上完成。

手写了 GLSL 粒子更新与鼠标斥力，没有用 Three.js。

WebGL · GLSL · 零依赖

深色画布上分布着蓝紫色与白色粒子。深色画布上分布着蓝紫色与白色粒子。

3D 形变

参数曲面 per-point morph：球→环面结→立方→波面，拖拽旋转、自动轮播。

手写参数曲面与 per-vertex morph，没有建模文件。

WebGL · ogl · 零依赖

蓝紫色粒子组成起伏的参数曲面。蓝紫色粒子组成起伏的参数曲面。

Shader 调色台

实时 GLSL 噪声艺术：拖动滑杆调节色相、流速与湍流层数，每一帧都是实时计算。

手写 FBM 噪声 fragment shader 与参数绑定。

WebGL · FBM 噪声 · 零依赖

紫色与粉红色的噪声纹理交织成卷曲的流线。紫色与粉红色的噪声纹理交织成卷曲的流线。

SDF 光线步进

通过距离场组合与切除球、盒和环面，实时调整形体、光源与材质，观察软阴影和反射。

距离函数、光线步进、法线估计、软阴影与单次反射均在 GLSL 中直接实现，不依赖三维引擎。

WebGL2 · GLSL · SDF

影棚里的球与盒光滑并集，坐在地面上，带接触阴影与反射。影棚里的球与盒光滑并集，坐在地面上，带接触阴影与反射。

云间列车

日落云海中的悬索桥与蒸汽列车。分层高度场云、矢量栅格化的桥和车，可实时调整取景、速度与云层起伏。

片元着色器按 mdb《Up in the Cloud Sea》与 Tianxiu Zhou 的 WebGL 移植结构重写：蓝噪声采样、分层 FBM 高度场、列车与桥的矢量栅格化。参数绑定与页面接入在本地完成。

WebGL2 · GLSL · 蓝噪声

橙红层积云下，一座悬索桥横在画面中下方，蒸汽从列车烟囱升起。橙红层积云下，一座悬索桥横在画面中下方，蒸汽从列车烟囱升起。

可撕裂布料

拖拽、剪断或固定布料节点，调整风力并开关圆形障碍，观察网格约束如何维持形状。

Verlet 积分、XPBD 距离约束、剪断判定与障碍碰撞在本地算法中直接实现，模拟通过 Web Worker 运行。

Canvas 2D · XPBD · Web Worker

固定节点之间的网状布料，悬在球形障碍上方。固定节点之间的网状布料，悬在球形障碍上方。

Voronoi / Delaunay

添加、移动或删除采样点，实时查看 Voronoi 区域与 Delaunay 三角剖分如何随点集变化。

Bowyer–Watson 三角剖分与等距半平面裁剪均直接实现，分别生成三角网和有界 Voronoi 区域。

SVG · Bowyer–Watson · 半平面裁剪

采样点划分的 Voronoi 区域与 Delaunay 三角网。采样点划分的 Voronoi 区域与 Delaunay 三角网。