文章摘要
这篇文章介绍了M.C.埃舍尔作品中著名的递归视觉效果，即通过将图像的缩小版本嵌入自身形成无限循环（德罗斯特效应）。埃舍尔更进一步打破了递归图像间的边界，创造出螺旋向内延伸的单一图像效果，这种手法也被称为"怪圈"。从技术角度看，只需将图像的缩小版本不断叠加在原始图像上，直到达到显示分辨率的极限，就能实现这种效果。
文章总结
标题：M.C.埃舍尔《画廊》着色器解析
核心概念
德罗斯特效应（Droste Effect）
- 指将图像的缩小版本嵌入自身，形成理论上无限递归的效果。
- 代表艺术家：M.C.埃舍尔（M. C. Escher）在其作品中进一步突破，通过融合递归图像的边界，创造出视觉上单一螺旋内缩的错觉。
奇异循环（Strange Loop）
- 由侯世达（Douglas Hofstadter）在《哥德尔、埃舍尔、巴赫》中提出，与埃舍尔的递归艺术异曲同工。
技术实现
基础递归图像生成
- 将原图的缩小版本重复渲染，直至达到显示分辨率极限，模拟“无限嵌套”效果。
埃舍尔式螺旋转换
- 极坐标转换：将图像笛卡尔坐标（x,y）转换为极坐标（半径、角度），使半径和角度均呈现周期性。
- 极坐标空间旋转：在极坐标空间中对图像进行旋转和缩放，打破水平行结构，使递归图像实例无缝连接。
- 逆向转换：转回笛卡尔坐标后，形成螺旋效果，关键是通过调整旋转周期与图像缩放比例匹配。
类比傅里叶变换
- 与信号处理中的傅里叶变换类似，通过转换坐标系简化复杂计算（如极坐标旋转替代笛卡尔空间的螺旋计算）。
示例与扩展
代码摘要
- 顶点着色器：处理坐标转换，调整长宽比、旋转和偏移。
- 片段着色器：通过极坐标变换、对数缩放和螺旋计算，生成最终图像。
（注：原文中WebGL代码部分因技术细节过多未完全展开，保留核心逻辑说明。）
精简说明：本文解析了如何通过极坐标变换和递归渲染技术，在WebGL中实现埃舍尔风格的无限螺旋图像效果，并类比信号处理中的坐标转换思路。
评论总结
总结评论内容如下：
操作指引需求
- 多位用户提到界面操作不够直观，建议改进交互设计或默认开启自动播放功能。
- 引用："On desktop, at least, you need to click and drag up/down on the left-hand control that says 'swipe' with two arrows."（crazygringo）
- 引用："getting the Escher-esque effect requires tapping a checkbox at the top of the page (easy to miss on a large monitor)."（sgbeal）
功能扩展建议
- 用户希望增加自定义图片上传功能或内置埃舍尔原画。
- 引用："I’d love to be able to upload a custom image too."（nvme0n1p1）
- 引用："Why not include the Print Gallery image?"（djmips）
技术问题与优化
- 移动端存在兼容性问题，如画面颗粒化或操作失效。
- 引用："on mobile (ff if it matters) swiping down for some time makes the edges very grainy."（bornfreddy）
- 引用："It’s unusable on mobile Google Chrome."（Falimonda）
相关作品分享
- 部分用户分享了自己实现的类似项目或历史参考链接。
- 引用："I did my own version too: [YouTube链接]"（Panzerschrek）
- 引用："University of Leiden’s Escher and the Droste effect site... was the first to try filling in the centre."（amiga386）
技术探讨（偏离主题）
- 个别评论询问WebGL游戏开发的技术细节（与主题无关）。
- 引用："can you build an entire fps shooter game using web gl?"（vivzkestrel）
注：所有评论均无评分（None），观点以改进建议和功能需求为主，部分涉及技术问题与个人作品展示。