8 月 31 日—9 月 14 日前端创意精选：WebGPU 单 Pass 玻璃、顶点管线与 CSS 锚点

先看结论：把渲染成本压进管线与现代原生

7 个 Demo 一屏扫完

1. Decathlon Yestalgia：用组件化与单一 RAF 管理复古交互

• Demo：Decathlon Yestalgia 在线体验
• 来源与日期：Codrops，2026-09-12 1
• 核心技术栈：piecesjs（原生 Web Components 微框架）、Tailwind v4、PostCSS、GSAP（ScrollTrigger、Draggable、SplitText）、Lenis 平滑滚动、Rive 矢量动画、Tempus 共享动画循环、web-haptics。1

<c-timeline
  cid="TimelineUID"
  class="c-timeline"
  data-scroll-item
  data-timeline-from='{"x":"50%","y":"150%", "rotate":"-45deg"}'
  data-timeline-to='{"x":"-50%","y":"-150%", "rotate":"45deg"}'
  data-scroll-progress-call="progress,Timeline">

</c-timeline>

1. 视口可见性订阅：小型旋转装饰元素与 Rive 矢量图表通过 IntersectionObserver 监听可见状态，进入视口时订阅动画帧，移出视口立即解除，离屏状态保持零 CPU 消耗。1
2. 减弱动态模式（prefers-reduced-motion）：对于大标题文字挤压动画，系统将过渡耗时与交错延迟全部设为零，文字瞬间完成拼合；Rive 动效直接跳转至末帧，完整保留排版美感同时规避眩晕。1
3. 移动端分词降级：桌面端针对单字符做伪 3D 偏移渲染，移动端自动切换为按单词整体计算，大幅减少 DOM 节点并提升滚动帧率。1

2. Shrink-wrap Text with position-anchor：原生 CSS 锚点消除折行留白

• Demo：Shrink-wrap Text 教程与交互演示
• 来源与日期：CodePen 官方博客，2026-09-11 2
• 核心技术栈：原生 CSS 规范（position-anchor、anchor-name、anchor-size、place-self: anchor-center、text-wrap: balance / pretty）。2

.text {
  anchor-name: --text;
  display: inline;
}

.message::before {
  content: "";
  position: absolute;
  z-index: -1;
  position-anchor: --text;
  place-self: anchor-center;
  height: anchor-size(height);
  width: anchor-size(width);
}

1. 还原原生气泡贴合感：可在移动聊天气泡、通知标签、提示工具栏中实现严格跟随文字边界的背景填充、圆角与复杂外发光投影。2
2. 规避复杂的脚本度量：免除了过去依靠 ResizeObserver 或 Canvas measureText 频繁监听并更新 DOM 宽高的复杂逻辑，让排版响应回归渲染流水线本身。
3. 安全的原生回退：在尚未完全支持锚点定位的运行环境中，伪元素可优雅回退为普通绝对定位，保持基础阅读功能完好。2

3. Still Generative Garden：VAT 烘焙、水墨阴影与 DataTexture 实例化

• Demo：Still 在线体验
• 来源与日期：Codrops，2026-09-09 3
• 核心技术栈：Three.js、WebGPU、TSL、Blender Geometry Nodes、VAT（顶点动画纹理）、MeshBVH 空间表面检索、Dijkstra 最短路径算法、DataTexture 数据驱动实例化。3

• 木版画阶梯着色（Woodblock Toon Shading）：光照计算采用量化的二阶分段光照函数，并在阈值过渡处注入世界坐标 FBM 噪声扰动，消除纯矢量着色的机械感。对于主体人物采用沿法线挤出的反向外壳（Inverted Hull）勾勒轮廓线；对于数百朵花瓣则在着色器内执行视口遮罩边缘检测，防止形变网格导致轮廓错位。3
• 水墨地表投影（Ink-wash Ground Shadow）：读取主光源深度图并应用平滑步长扩展为柔和晕染，边缘叠加一道利用 fwidth() 维持屏幕恒定像素宽度的细轮廓。为了防止花朵向自身投射杂乱阴影，系统部署了第二张仅接收花朵投影的独立深度贴图，该平行光源强度设为零，只负责写入深度值。3

1. 动静态几何合并与单 Draw Call：场景中成百上千根花茎在初始化阶段合并为一个单体几何对象，一次 Draw Call 即可提交渲染。静态顶点与局部坐标一次性注入显存，每帧变换参数（生长因子、摇曳相位、旋转与偏移量）通过一张紧凑的 DataTexture 逐帧更新，避免动态拓扑重构。3
2. VAT 烘焙与过程式结合：Blender 预作者复杂的开花动画被序列化为 VAT 纹理，实时着色器再基于顶点色编码的随机 ID 触发散落与飘零动作，兼顾美术关键帧精度与运行时的生长多样性。3
3. BVH 空间拒绝采样：基于 MeshBVH 对人物碰撞体进行快速距离判定，确保植物密集聚集于身体支撑点周围，同时在躯干接触面保留自然留白。3

4. Turning Names Into Digital Architecture：离屏轮廓追踪与空间曲线变形

• Demo：Three.js Conf 名字生成实验
• 来源与日期：Codrops，2026-09-09 4
• 核心技术栈：Three.js、Line Geometry、离屏 Canvas 遮罩、轮廓追踪算法、贝塞尔路径插值、烘焙反射贴图。4

1. 轮廓栅格化与点集归一化：将文字逐字绘制到隐藏的离屏 Canvas 上，提取像素透明度遮罩，沿边缘追踪封闭轮廓线并执行几何平滑，最终全部重采样为固定 120 个顶点的环形点列，完整保留如“B”、“O”等字符内部的孔洞结构。4
2. 空间曲线切线引导：建立一条三维空间贝塞尔主路径，在曲线细分段上逐段计算切线矢量与法平面，将 120 点环形轮廓依次投射到各切片平面上。
3. 参数化空间扭曲变形：轮廓点在沿着曲线推进的同时，同步叠加由正弦波与缓动函数驱动的缩放（pinch）与轴向扭转（twist）4：

for (let k = 0; k <= SEG; k++) {
  const u = k / SEG, m = ease(u), bump = Math.sin(Math.PI * u);
  bezier(A, C, B, u, p);
  bezierTangent(A, C, B, u, t);
  const s = THREE.MathUtils.lerp(sA, sB, m) * (1 - state.pinch * bump);
  const tw = THREE.MathUtils.lerp(rollA, rollB, m) + Math.PI * state.twist * (i % 2 ? -1 : 1) * bump;
  const cosT = Math.cos(tw), sinT = Math.sin(tw);
  for (let j = 0; j < N; j++) {
    const x = THREE.MathUtils.lerp(ringA[j][0], ringB[j][0], m) * s;
    const y = THREE.MathUtils.lerp(ringA[j][1], ringB[j][1], m) * s;
    const rx = x * cosT - y * sinT, ry = x * sinT + y * cosT;
  }
}

4. 稀疏线框与低成本金属反射：几何体摒弃了容易造成画面沉重的实心管状模型，仅抽取纵向主导线与对角交叉支撑结构构成轻量桁架；同时使用烘焙好的静态高动态反射贴图（Baked Reflection Map）代替实时的昂贵光线追踪，在普通移动端也能维持流畅的金属反光质感。4

5. Infinite Liquid Glass Grid：单 Pass 自定义高度图与 TSL 色散折射

• Demo：Infinite Liquid Glass Grid 在线体验
• 来源与日期：Codrops，2026-09-08 5
• 核心技术栈：Next.js、React Three Fiber v10、WebGPU 渲染器、TSL、Motion 手势弹簧系统、HLS 视频流纹理、pmndrs/glyph。5

• 完全数学化的单 Pass 材质：所有卡片均采用最简单的平面多边形（Plane），完全不包含物理倒角。着色器利用 2D 圆角矩形有符号距离场（SDF）实时推导像素至边缘的距离，再依据超椭圆公式映射出平滑的倒角高度图，并在着色器内部通过偏微分求得表面法线。5
• 多重折射率（IOR）色散采样：着色器以计算所得的伪法线为依据，对 R、G、B 三个通道分别施加微弱偏移的折射比率采样自身视频纹理，同时叠加 Fresnel 边缘高光与球形环境反射，在无后处理、无 Render Target 的单 Pass 渲染中完成了逼真的折射质感。5

1. 脱离 React 渲染树的平滑拖拽：手势操作通过 Motion 监听，位移与速度状态持久化于 React 外部的 motionValue 对象中；渲染主循环每帧直接同步状态，避免高频拖拽引发整组件重新渲染。5
2. 球面伪无限坐标包装：卡片移出可视边界时立即传送至对侧，且所有卡片平面均投射到虚拟的巨大外接球体表面，呈现出居中平视、四周微翘的立体景深感。5
3. CSS3D 文字清晰度保证：界面标签采用手写 CSS3D 矩阵同步，将缩放变换（scale）从矩阵中分离，改由容器尺寸应用，确保文字始终以物理像素级别锐利呈现并支持原生选中复制。5

6. Drawing With Light：TSL 顶点数学求导与不透明生长管线

• Demo：Luminhands 在线体验
• 来源与日期：Codrops，2026-09-07 6
• 核心技术栈：Three.js WebGPU 渲染器、TSL、MeshStandardNodeMaterial、Storage Buffer、Catmull-Rom 曲线样条、MRT 独立自发光 Bloom 管线。6

• 纯数学求导切线与径向法线：CPU 仅在初次加载时上传一套标准参数化网格（progress、angle 与索引数据）。在着色器顶点阶段，系统对曲线位置函数进行极小步长微商求导得出切线方向，外积生成局部坐标系，直接将顶点沿径向推开，并将径向矢量直接复用为表面法线 6：

const sampleCurve = (t) => gpuPositionNode(clamp(t, 0, 1))
this.positionNode = Fn(() => {
  const P = sampleCurve(aProgress)
  const Pnext = sampleCurve(aProgress.add(EPS))
  const Pprev = sampleCurve(aProgress.sub(EPS))
  const delta = Pnext.sub(Pprev)
  const tangent = delta.div(max(delta.length(), float(1e-6)))
  const N = normalize(cross(upAxis, tangent))
  const B = cross(tangent, N)
  const radial = N.mul(cos(aAngle)).add(B.mul(sin(aAngle)))
  vTubeNormal.assign(radial)
  return P.add(radial.mul(radius))
})()
this.normalNode = Fn(() => transformNormalToView(normalize(vTubeNormal)))()

• 零排序开销的不透明“生长动画”：常规半透明渐现通常需要承担高昂的 Alpha 混合与深度排序成本。该 Demo 改为将管线半径定义为数学函数 radiusFn：在扫描进度前沿处管径设为零，随着进度推进平滑膨胀至目标粗细，使整个生长过程维持在完全不透明的 PBR 渲染管线中。6
• MRT 独立自发光通道：为了在复杂交互中守住帧率，后处理泛光仅从独立的 MRT Emissive 目标纹理中读取约 12% 被哈希标记的发光光纤，避免全屏亮度提取拖垮移动端显卡。6

7. Why Zero：游戏化地图控制器与手势推进叙事

• Demo：Why Zero 在线体验
• 来源与日期：Awwwards Site of the Day，2026-09-07 7
• 核心技术栈：GSAP、Three.js、Blender 资产管线、着色器交互（Shader interactions）、响应式文字精灵（Responsive Text Sprites）、音频响应系统。7

1. 游戏化地图控件与叙事推进（Interactive Map with Game Controls）：将传统站点的锚点跳转重构为地图探针操作，用户的滚动行为（Narrative Scroll）与空间摄像机机位严密绑定，通过场景视角的平移与推进逐步揭示核心篇章。7
2. 手势推进机制（Hold to proceed）：在关键决策点与章节过场中引入“长按蓄力推进”的手势交互，配合渐进发光着色器与音效反馈，为用户建立强烈的行动仪式感。7
3. 响应式文字精灵（Responsive Text Sprites）：在三维场景中大量运用空间精灵文字，既保留了三维景深下的跟随透视关系，又在移动端视口中保持着如同 DOM 文本般的清晰阅读体验。此架构属于基于公开技术标签与页面元素的逻辑推断，实际工程落地需结合站点源码进一步验证。7

本期的三个技术趋势信号