WebGPU Ribbon Carousel：GPU 驱动的丝带轮播实验

原文作者：aengel（页面 JSON-LD 标注作者，来源页未显示其他署名）
原始链接： https://mesh3d.gallery/experiment/webgpu-ribbon-carousel
实验地址： https://lab.aengel.io/webgpu-ribbon-carousel

说明：原文页面提供的是 HTML 与 JSON-LD 元数据，并未公开可复制的 GLSL/WGSL/TSL 核心源代码。因此本文从描述与页面信息中提炼技术要点，不强行伪造原码；涉及代码处会明确标注为“概念还原”。

---

1. 项目概述

该项目是一个无限图像轮播，布局在一条**单条参数化 ribbon（parametric ribbon）**上，使用 WebGPU 与 Three.js TSL（Three Shading Language） 构建。其核心特征：

• ribbon 沿 三个曲率轴 弯曲；
• ribbon 的形状会响应滚动速度；
• 图片承载于 PBR 表面，带有弓形弯曲（bow）与运动模糊。

从页面描述看，这并非传统 DOM/CSS 轮播，而是将图片作为纹理映射到 GPU 几何体上，通过着色器实时计算变形与光照。

---

2. 技术要点提炼

2.1 单条参数化 ribbon

整条轮播不是为每张图片单独创建卡片网格，而是用一条参数化 ribbon 承载所有图像。

• 优点：合并几何体，减少绘制调用；统一处理弯曲变形。
• 参数化：ribbon 的位置、法线、UV 由函数控制，可沿长度与宽度方向连续变化。

2.2 三个曲率轴弯曲

原文提到 “bends along three curvature axes”，通常可理解为：

• 纵向弯曲（沿 ribbon 长度方向的弧线）
• 横向弯曲（ribbon 宽度方向的翘曲）
• 扭曲/扭转（twist）（ribbon 绕自身长轴的旋转）

这三个曲率参数在着色器中叠加，形成复杂的空间形态。

2.3 滚动速度响应

滚动速度作为 uniform 传入 GPU，影响曲率参数或顶点位移。

• 例如滚动越快，ribbon 的弯曲/扭曲越强烈，停止滚动后逐渐恢复。
• 该逻辑在 GPU 上完成，避免每帧将顶点数据从 CPU 上传到 GPU。

2.4 PBR 表面 + 弓形弯曲 + 运动模糊

图片并非简单贴图，而是作为 PBR 材质的一部分，参与光照计算：

• PBR（Physically Based Rendering）：基于物理的渲染，具备 roughness、metalness 等参数。
• bow：可理解为 ribbon 的弓形弯曲变形，影响表面法线，从而改变光照反射。
• 运动模糊（motion blur）：可能通过屏幕空间速度缓冲或后处理实现，增强滚动时的速度感。

---

3. 三个核心优化要点

✅ 优化点 1：单条参数化 ribbon 合并绘制，减少 draw call

将无限轮播的所有卡片合并为一条 ribbon 几何体，而不是为每张图片创建独立 mesh。

• 减少 draw call 数量，降低 CPU 提交开销；
• 统一管理 UV 与曲率变形，避免多个网格分别变换带来的性能损耗。

✅ 优化点 2：GPU 驱动形状响应，避免每帧 CPU 顶点上传

滚动速度作为 uniform 传入着色器，ribbon 的弯曲、扭曲在 GPU 顶点着色阶段实时计算。

• 不需要每帧在 CPU 更新顶点缓冲（vertex buffer），减少 CPU→GPU 数据传输；
• 交互响应更顺滑，适合高频滚动场景，充分利用 WebGPU 的并行计算能力。

✅ 优化点 3：PBR 纹理映射 + 后处理运动模糊，图像表现更真实且低成本

图像作为纹理采样到 PBR 表面，参与光照和反射；运动模糊通过后处理实现，而非增加几何细节。

• PBR 表面让图片在弯曲 ribbon 上有更真实的光影反馈；
• 屏幕空间后处理运动模糊，不增加几何复杂度，性能可控；
• 避免 DOM 元素与 WebGL/WebGPU 画布的混合合成开销。

---

4. GLSL / WebGL / WebGPU 专业术语检查表

英文术语	推荐中文翻译	说明
WebGPU	WebGPU	新一代 Web 图形 API，不等同于 WebGL；着色语言通常为 WGSL
Three.js TSL	Three.js Shading Language（保留 TSL）	Three.js 的节点化着色语言，可编译为 WGSL/GLSL 等
parametric ribbon	参数化带条 / 参数化 ribbon	不建议翻译成“缎带”，技术语境中保留 ribbon 更准确
curvature axes	曲率轴	数学术语，指弯曲发生的方向
PBR surface	PBR 表面 / 基于物理的渲染表面	PBR 不要展开为“物理基础渲染”，通用译法是“基于物理的渲染”
scroll speed	滚动速度	作为 uniform 传入着色器
uniform	uniform（保留英文）	着色器统一变量，WebGL/WebGPU 通用
bow	弓形弯曲 / 弯曲形变	此处指 ribbon 的弓形变形，不是“船头”或“蝴蝶结”
motion blur	运动模糊	后处理常见效果
draw call	绘制调用 / draw call（保留英文）	性能优化关键指标
vertex displacement	顶点位移	在顶点着色器中偏移顶点位置
fragment shader	片元着色器 / 片段着色器	WebGL/GLSL 常用术语
compute shader	计算着色器	WebGPU/WGSL 中大量使用
screen-space velocity buffer	屏幕空间速度缓冲	运动模糊常用实现方式
post-processing	后处理	渲染完成后的屏幕空间效果

注意区分：

• WebGL 使用 GLSL ES；
• WebGPU 使用 WGSL；
• Three.js TSL 是更高层的节点语言，可以输出到不同底层着色语言。
  因此本文中的“GLSL/WebGL 术语检查”不意味着该项目使用 GLSL，而是提醒在翻译 Web3D 内容时避免混淆底层图形 API。