three.js · 60 000 particles · single file

洄游Anabasis

六万个粒子在四种形态之间洄游——鲸骨架 / 棱镜环 / 归潮字 / 星壳, 以及第五种形态:你上传的图片、或随手敲下的一段文字。形态不是被建模出来的,是被吸引出来的; 拖拽旋转,双击触发故障带。

直接在框里玩:拖拽旋转 · 滚轮缩放 · 双击故障 · 拖入图片变粒子 · 侧栏输入文字变粒子 Ctrl+V 粘贴图片即可成形

形态与动图

全部由同一套点云着色器渲染,同一颗种子(52052)可完整复现。

鲸形态动画
鲸骨架 → 棱镜环(WebP 动图,48 帧循环)
图片形态动画
图片识别成粒子(WebP 动图,48 帧循环)
归潮字
归潮字 · frames=210
文字形态:一整段文字成粒子
输入一整段文字 → 自动缩小折行
界面
工作台:侧栏「文字 → 粒子」
界面
工作台:右侧铺满 + 原图对照卡

技术要点

无视觉通道也能验收——每张静帧都用像素统计打分。

点云着色器

距离衰减 alpha、层深加权、gl_PointSize 随视距放大;点精灵三段辉光 + discard 圆形掩膜。

屏幕空间故障带

4 条水平带内 mvPosition.x += glitchXOffset * gx,双击即触发。

图片 → 粒子

亮度 / 透明 / Sobel 边缘三模式识别,按亮度给深度浮雕,并按可见半高自动贴合取景框。

文字 → 粒子

任意长度文字自动排版:短句放大、长文缩小折行(中文逐字断、西文按词断),栅格化后复用同一套图片点云管线。

无视觉也能验收

排版栅格与粒子点云双 ASCII 投影逐格对照,再用 Pillow 独立渲染第三张交叉验证字形。

可复现出图

?frames=N 同步跑帧后停住并置 __READY__,配无头浏览器即可定格出图与动画序列。

node tools/render-3d.mjs anabasis-3d.html out.png "frames=210&shape=2&cam=0.4,0.18,17.5"
node tools/analyze-art.mjs out.png        # 亮度均值 / 亮部占比 / bbox