HN Weekly 中文
← #789

受 3Blue1Brown 启发的 M.C. 埃舍尔螺旋 WebGL 实现

查看原文 HN 讨论

文章摘要

这是一个以 Show HN 形式发布的互动式 WebGL 项目，由开发者 Laszlo Korte 创建，灵感来源于知名数学科普频道 3Blue1Brown 关于 M.C. 埃舍尔（M.C. Escher）”画廊”（Print Gallery）作品的视频讲解。该项目通过 WebGL 着色器（shader）实时实现了埃舍尔最具数学魅力的视觉效果——将德罗斯特效应（Droste effect）与螺旋变换相结合。

德罗斯特效应是一种递归的图像嵌套效果：一张图像中包含自身的缩小版本，而缩小版本中又包含更小的版本，如此无限循环。这种效果最常见的例子是可可粉罐头上的图案——罐头上印着一个人手持同一款罐头的画面。埃舍尔在 1956 年创作的”画廊”作品中将这种效果推向了极致：他打破了两个递归图像之间的边界，将它们融合变形在一起，创造出一个观众走入画中、画中又包含画廊、画廊中又有观众的无限循环世界。

这个 WebGL 实现背后的数学原理涉及复分析（complex analysis）中的保角映射（conformal maps）。具体来说，变换过程首先将图像的 (x,y) 笛卡尔坐标转换为极坐标系中的半径和角度。在极坐标空间中，原始图像中所有同心圆变成了水平直线，角度自然具有周期性，而在德罗斯特图像中半径也具有周期性。接下来，在极坐标空间中对图像条带进行旋转和缩放操作，再通过复对数（complex logarithm）变换回笛卡尔坐标，就产生了那种标志性的螺旋效果。

用户可以通过点击并上下拖动左侧控制器来交互式地探索这个效果，实时切换”普通”的德罗斯特效果（图中图中图的层层嵌套）和埃舍尔式”螺旋”德罗斯特效果之间的过渡。所有变换都在 GPU 上通过片段着色器（fragment shader）实时计算，实现了流畅的互动体验。

这个项目的价值不仅在于其视觉上的震撼效果，更在于它将 3Blue1Brown 视频中的数学概念从被动观看转化为可以亲手操控的互动体验。它展示了如何用现代 Web 图形技术（WebGL）将抽象的数学概念——保角映射、复对数、极坐标变换——转化为直观可感的视觉艺术，完美体现了数学之美与计算机图形学的交汇。

HN 评论精华

  1. 3Blue1Brown 视频的推荐：多位评论者强烈推荐了 3Blue1Brown（Grant Sanderson）关于埃舍尔”画廊”作品的原始视频，称其是”埃舍尔最具数学趣味的作品”的绝佳解析。视频从艺术和数学两个角度深入分析了这幅作品，引入了保角映射和复对数等复分析概念，即使没有数学背景的观众也能理解核心思想。

  2. 非线性变换的调试挑战：有从事着色器编程的开发者分享了实现此类效果的技术难点——非线性坐标变换对最终图像会产生巨大影响，而这些影响由于变换本身的非线性而极难调试。一个微小的参数偏差可能导致完全不同的视觉结果，使得开发过程充满了”惊喜”。

  3. 与 2014 年同类项目的对比：评论者提到了 Reinder Nijhoff 在 2014 年实现的类似 WebGL 德罗斯特效应着色器，并讨论了十年来 WebGL 技术和着色器编程实践的演进。新项目在交互性和实现优雅性上有明显提升。

  4. 数学家 Hendrik Lenstra 的贡献：有评论者补充了重要的数学背景——莱顿大学的数学家 Hendrik Lenstra 团队最早完成了对埃舍尔”画廊”中数学变换的完整解析，并填补了埃舍尔原作中心那个神秘的空白区域。3Blue1Brown 的视频和这个 WebGL 项目都建立在 Lenstra 的数学分析基础之上。

  5. WebGL 与 WebGPU 的未来展望：部分讨论涉及将类似着色器项目从 WebGL 迁移到 WebGPU 的可能性。虽然 WebGPU 提供了更现代的 API 和更好的性能，但对于这类片段着色器驱动的视觉效果，WebGL 的兼容性和简洁性仍然是更务实的选择。