这里每个页面都是不同的WebGL 实验个人作品集
原作者：kojirof
原始链接：https://discourse.threejs.org/t/futamura-dev-personal-portfolio-where-every-page-is-a-different-webgl-experiment/93642
本篇为技术深度解读，并非逐句翻译。原文为 three.js 论坛展示帖，未包含完整 GLSL 代码块，因此下文保留所有关键技术标识符与 API 名称，并补充术语检查。
项目概述
作者 kojirof 时隔十余年重新接触 Web 交互开发，发现如今 WebGL 已能实现许多实用效果，便着手打造个人作品集网站 futamura.dev。
每个页面都是一个独立场景，拥有各自的渲染管线、后处理与 GPGPU 系统。与其说这是一个网站，不如说是五个独立实验的集合。
各页面技术要点
Home（首页）
- 使用 GPGPU 点云 渲染肖像，漂浮在滚动 实例化字符 穹顶之前。
- 按住鼠标时粒子散开，松开后粒子重新聚集成下一张肖像。
- 技术细节：
- 两个
GPUComputationRenderer系统：一个负责粒子在 blob 状态与肖像之间的变形，另一个驱动实例化字符穹顶。 - 按住鼠标时，转场音效的低频段通过
AudioAnalyser读回，作为粒子位移的乘数，使散射跟随听觉节奏。 Stencil mask（模板遮罩）将字符穹顶限制在面部轮廓之外，确保景深通道不会模糊肖像。- 屏幕空间景深：8-tap Poisson disc（8 采样泊松圆盘），深度感知，并使用 对数深度解码。
- 两个
Award（获奖页）
- 点云地球，城市标记逐个弹出，通过样条连接线链接到获奖列表。
- 拖动旋转；悬停城市高亮对应条目。
- 技术细节：
- 地球地图为离屏渲染目标——独立的 GPGPU 点场渲染到纹理，再由地球材质采样。
- 城市标记与标签按经纬度键控运行 交错 GPGPU 过渡。
- 笼状结构与连接线使用自定义
LineSegments材质，携带 per-spline data UVs（每条样条数据 UV）。
Product（产品页）
- LiDAR 风格场地扫描，代理人在图上行走，带光迹与漂浮灰尘。
- 选择产品时，缩略图展开为逐格填充的详情面板。
- 技术细节：
- 多通道帧管线：深度预通道 → 扫描到 FBO → 色差合成 → 选择性泛光（7 个渲染目标，6-pass 可分离模糊）→ 帧捕获 → 叠加通道。
- 色差强度由相机轨道速度驱动，旋转时扫描画面产生拖影。
- 地面高度烘焙进
R32F渲染目标，用于放置代理与连接。 - 线段为 CPU 构建的 quad-expanded geometry（四边形扩展几何体，每条线 4 顶点 / 6 索引），无需线库即可实现屏幕空间宽度。
脉冲波细节：
- 波前扫过时地形显露自身结构。
- 线框并非几何体，而是从 barycentric coordinates（重心坐标）恢复边缘，并用
fwidth抗锯齿，使线条在任何距离都保持 1 像素宽；面亮度由从世界坐标屏幕空间导数重建的法线计算坡度得到。 - 色差分裂直接作用于重心坐标，而非采样纹理，因此 RGB 边纹跟随网格线而非屏幕。
- 单一弹簧驱动半径同时推入地面、点云、线段、网格标注和缩略图面板，使一个连贯波前同时穿过场景中所有材质。
Sketch（草稿页）
- 三个可切换的程序化表面：漂移山丘的等高线地形、被隐形球体压凹的弹性网格、涟漪幕墙。
- 技术细节：
- 每种模式均为自定义 顶点位移，并搭配匹配的深度材质，使 DOF 通道看到的是位移后的几何体而非平坦基础网格。
- 模拟在 CPU 上运行，以
uniform数组上传——孔位置、半径、球体强度、表面参数。
Contact（联系页）
- 挤出文字同时以三种方式绘制：带顶点圆点的轮廓、草绘重叠笔触、沿字形爬行的彩色涂鸦轨迹。
- 技术细节：
- 字形轮廓从原始字体轮廓解析并挤出为静态几何体。
- Jump Flooding Algorithm（跳跃洪水算法）构建文字的 SDF（种子 → 10 步传递 → 距离），用于引导曲线代理。
- 代理为 GPGPU 模拟，将轨迹历史写入手动 ring-buffer render target（环形缓冲渲染目标）。轨迹几何体静态，在顶点着色器读取环形缓冲，因此无每帧 CPU 几何工作。
- 表单为真实 DOM，其 CSS
perspective由 R3F 相机 FOV 推导，视差与 3D 场景精确匹配。
跨页面共享技术
- 排版全部使用 MSDF（多通道有符号距离场），配合
three-text-geometry与自定义着色器，带乱码进入动画。 - 磨砂面板是对已渲染帧的
copyFramebufferToTexture，再在着色器中模糊。 - 导航也是 3D 形式，而非 DOM 覆盖层。
- 技术栈：three.js 0.183 / React Three Fiber 9 / Next.js。
三个核心优化要点
1. 将状态模拟全部移入 GPU（GPGPU 化）
作者在多个页面中避免每帧 CPU 更新几何数据，而是使用 GPUComputationRenderer、离屏渲染目标、环形缓冲等将粒子、代理、城市标记等动态状态保留在 GPU 中。
- 首页的两个
GPUComputationRenderer分别处理粒子变形与实例化字符穹顶。 - Contact 页通过 GPGPU 模拟将轨迹历史写入环形缓冲，顶点着色器直接读取，完全消除每帧 CPU 几何上传。
这种设计极大降低 CPU 负载与 GPU-CPU 同步开销，是复杂粒子/代理系统的关键优化。
2. 利用屏幕空间导数与过程化细节替代高密度几何
多处效果不依赖复杂几何体，而是通过 GLSL 导数函数和屏幕空间技术实现像素级精度：
- 使用
fwidth对从重心坐标恢复的边缘进行抗锯齿，保证线条任意距离 1 像素宽。 - 从世界坐标的屏幕空间导数重建法线，计算坡度亮度。
- 色差应用于重心坐标本身，而非采样纹理，使 RGB 边纹跟随网格线。
- 屏幕空间景深使用深度感知的 8-tap Poisson 采样，结合对数深度解码。
这些手段既保证视觉效果，又避免额外顶点数据与带宽消耗。
3. 多 Pass 渲染管线与模板/深度管理
复杂效果被拆分为多个渲染目标与通道，使每帧处理清晰、可复用、可独立调节：
- Product 页采用
depth prepass → 扫描到 FBO → 色差合成 → 选择性泛光（7 个渲染目标，6-pass 可分离模糊）→ 帧捕获 → 叠加通道。 - 使用
stencil mask保护肖像区域不受景深模糊影响。 - 地面高度烘焙到
R32F渲染目标，供代理与连接采样。 - 可分离模糊（separable blur）将二维模糊拆为两个一维通道，显著降低采样次数。
管线化设计避免单一着色器过度复杂，同时提高性能与可维护性。
GLSL / WebGL 专业术语检查表
| 原文术语 | 建议中文 | 说明 |
|---|---|---|
| GPGPU | 通用 GPU 计算 | 利用 GPU 进行非图形并行计算 |
| GPUComputationRenderer | GPU 计算渲染器 | three.js 中用于在 GPU 上运行通用计算的工具 |
| Render target / FBO | 渲染目标 / 帧缓冲对象 | 离屏渲染目的地 |
| Offscreen render target | 离屏渲染目标 | 不直接呈现在屏幕的 FBO |
| Stencil mask | 模板遮罩 | 基于模板缓冲的区域遮挡 |
| Depth of field (DOF) | 景深 | 模拟焦点外模糊 |
| 8-tap Poisson disc | 8 采样泊松圆盘 | 用于景深的随机采样模式 |
| Logarithmic depth | 对数深度 | 非线性的深度编码方式 |
| LineSegments | 线段 | three.js 的线段类 |
| Per-spline data UVs | 每条样条数据 UV | 为每条样条存储自定义数据于 UV 通道 |
| Depth prepass | 深度预通道 | 提前渲染深度以优化后续处理 |
| Chromatic aberration (CA) | 色差 | RGB 通道分离的边缘色散效果 |
| Selective bloom | 选择性泛光 | 仅对特定区域应用泛光 |
| Separable blur | 可分离模糊 | 将二维模糊拆分为两个一维操作 |
| R32F render target | R32F 渲染目标 | 单通道 32 位浮点纹理格式 |
| Quad-expanded geometry | 四边形扩展几何体 | 将线段扩展为四边形以支持屏幕空间宽度 |
| Barycentric coordinates | 重心坐标 | 用于插值与边缘检测的三角形坐标 |
| fwidth | fwidth | GLSL 函数，返回屏幕空间偏导绝对值之和，用于抗锯齿 |
| Screen-space derivatives | 屏幕空间导数 | 片段在屏幕空间的偏导数 |
| MSDF | 多通道有符号距离场 | 在多个通道中存储 SDF 信息以提高质量 |
| SDF | 有符号距离场 | 表示点到形状边界的距离 |
| Jump Flooding Algorithm | 跳跃洪水算法 | 快速构建 SDF 的并行算法 |
| Ring-buffer render target | 环形缓冲渲染目标 | 循环写入历史数据的渲染目标 |
| Vertex shader | 顶点着色器 | 处理顶点数据的可编程阶段 |
| copyFramebufferToTexture | 拷贝帧缓冲到纹理 | WebGL 2 函数，用于快速复制帧缓冲内容 |
| Instanced characters | 实例化字符 | 通过实例化渲染大量相同字符 |
保留的核心代码 / API 标识符
由于原文未包含完整 GLSL 代码，以下为保留的关键技术标识符：
GPUComputationRenderer
AudioAnalyser
Stencil mask
8-tap Poisson disc
logarithmic depth decode
LineSegments
per-spline data UVs
depth prepass
FBO
chromatic aberration (CA)
selective bloom
6-pass separable blur
R32F render target
quad-expanded geometry
barycentric coordinates
fwidth
screen-space derivatives of world position
Jump Flooding Algorithm
SDF
ring-buffer render target
vertex shader
copyFramebufferToTexture
MSDF
three-text-geometry
React Three Fiber 9
总结
futamura.dev 展示了当下 WebGL 与 three.js 生态的深度可能性：通过 GPGPU 模拟、屏幕空间导数技巧与多 Pass 管线设计，一个人即可在浏览器中实现高度实验性的视觉作品。原文作者欢迎进一步的提问与深入讨论，本文所提炼的优化要点也适用于大多数高性能 Web3D 项目。
