Show HN：受 3Blue1Brown 啟發，以 WebGL 實現艾雪風格的螺旋效果

背景

這篇文章源於作者受到知名數學頻道 3Blue1Brown 關於艾雪（M. C. Escher）《版畫畫廊》（Print Gallery）影片的啟發，決定利用 WebGL 片段著色器（Fragment Shader）重新實作這種獨特的無限螺旋視覺效果。這類效果在數學與藝術界被稱為「德羅斯特效應」（Droste effect），透過將圖像遞迴地嵌入自身，並結合座標轉換與旋轉，創造出一種打破邊界、無限循環的視覺奇觀。

社群觀點

在 Hacker News 的討論中，社群成員對於這項實作展現了高度興趣，但也針對使用者介面的直覺性提出了不少實務建議。許多使用者初次進入網頁時感到困惑，指出若要在桌機版看到核心的艾雪效果，必須手動勾選頁面頂端的選項，而該選項在大型顯示器上極易被忽略。此外，關於如何操作「無限縮放」也引發了討論，有使用者建議應將滑動圖示改為可點擊的按鈕，或預設開啟自動播放功能，以確保訪客能第一時間理解該工具的核心功能。除了滑鼠拖曳外，也有網友補充說明滑鼠滾輪同樣能觸發縮放效果。

在內容呈現方面，不少評論者表達了對素材多樣性的渴望。由於該技術的核心在於處理圖像的遞迴與螺旋轉換，許多人希望能直接在該工具中看到艾雪本人的原畫實作，或是具備上傳自定義圖片的功能，讓使用者能測試不同圖像在這種數學變換下的視覺表現。這反映出開發者社群對於將抽象數學公式應用於具體視覺創作的強烈興趣。

討論串中也出現了關於 WebGL 技術本質的延伸探討。有初學者詢問 WebGL 是否能支撐如第一人稱射擊遊戲（FPS）等複雜應用，以及其與 Three.js 或 Babylon.js 等框架的關係。資深開發者對此解釋，WebGL 本質上僅是一個圖形 API，負責渲染部分，而物理引擎、碰撞偵測與 AI 邏輯則需依賴其他 JavaScript 函式庫或遊戲引擎來達成。此外，社群也釐清了 WebGL 與 OpenGL 的血緣關係，指出 WebGL 2 實際上是基於 OpenGL ES 3.0 標準所建構，這為網頁端的圖形運算提供了強大的硬體加速基礎。

延伸閱讀

在討論過程中，有網友分享了自己實作的艾雪螺旋效果影片版本，提供另一種動態呈現的參考。同時，對於想深入了解此效應背後數學原理的讀者，原作者強烈推薦觀看 3Blue1Brown 製作的專題影片，該影片深入淺出地解釋了如何透過複數對數與極座標轉換，將原本不連續的遞迴圖像縫合成平滑的螺旋結構。