[HN Gopher] Show HN: M. C. Escher spiral in WebGL inspired by 3B...
___________________________________________________________________
Show HN: M. C. Escher spiral in WebGL inspired by 3Blue1Brown
The latest 3Blue1Brown video [1] about the M. C. Escher print
gallery effect inspired me to re-implement the effect as WebGL
fragment shader on my own. [1]:
https://www.youtube.com/watch?v=ldxFjLJ3rVY
Author : laszlokorte
Score : 153 points
Date : 2026-04-04 19:43 UTC (1 days ago)
(HTM) web link (static.laszlokorte.de)
(TXT) w3m dump (static.laszlokorte.de)
| sgbeal wrote:
| Note to other viewers: getting the Escher-esque effect requires
| tapping a checkbox at the top of the page (easy to miss on a
| large monitor).
| laszlokorte wrote:
| I now updated the default view to already show the Escher
| effect :)
| crazygringo wrote:
| Very cool! However, it took me a while to figure out how this was
| supposed to be used.
|
| For others:
|
| On desktop, at least, you need to click and drag up/down on the
| left-hand control that says "swipe" with two arrows.
|
| Or click "Autoplay".
|
| laszlokorte -- can I suggest that the up/down icons should also
| be clickable/holdable? Since they're icons, they look like
| buttons, not a "swipe area". And also, maybe default to having
| autoplay on (but still with the controls visible)? Because it was
| not clear to me, at first, that the whole point of the site is
| infinite zoom.
| kmoser wrote:
| Mouse scroll wheel works, too
| laszlokorte wrote:
| Thanks for the suggestion! I added a slow initial auto zoom and
| updated the up/down arrows to work while being pressed.
| djmips wrote:
| Why not include the Print Gallery image? Or - if worried about
| copyright, the ability to load an image.
| JKCalhoun wrote:
| Why not allow the upload of an arbitrary image?
| frandroid wrote:
| what could go wrong
| nvme0n1p1 wrote:
| This is awesome! I'd love to be able to upload a custom image
| too.
| breakyerself wrote:
| This is awesome. I'd love to see the original escher image scroll
| through there.
| Panzerschrek wrote:
| I did my own version too:
| https://www.youtube.com/watch?v=xxLfDHe93_M
| vivzkestrel wrote:
| stupid question to webgl experts here?
|
| - can you build an entire fps shooter game using web gl? how is
| physics handled? how is collision detection, enemy AI handled?
| what kind of frame rate can you expect from a counter strike game
| made in web gl?
|
| - what is the difference between webgl and threejs and babylonjs?
|
| - what is the man hour effort involved for doing something like
| this assuming you know html, css and js pretty well but not
| familiar with gamedev
|
| - is open gl the non web version of web gl? or are they
| completely different?
| fulafel wrote:
| You can implement the graphics part of it using WebGL. It's
| strictly a graphics API for drawing to the screen. But there
| are specific libraries for eg physics that you can use in your
| WebGL 2 app, or entire 3D engines (like those you mentioned)
| targeting WebGL around. Or you can DIY.
|
| > is open gl the non web version of web gl? or are they
| completely different?
|
| The current version of WebGL, WebGL 2, is like OpenGL ES 3.0.
| tayo42 wrote:
| > what is the man hour effort involved for doing something like
| this assuming you know html, css and js pretty well but not
| familiar with gamedev
|
| Almost trivial with Ai. I just started making games with
| threejs. threejs is pretty much the abstractions you'd end up
| writing your self if you wanted to use webgl.
|
| The hard part is refining, polish, creating fun mechanics, and
| creating assets.
| oskckwjxkwkf wrote:
| > Almost trivial with Ai.
|
| Not true in the slightest.
|
| > The hard part is refining, polish, creating fun mechanics,
| and creating assets.
|
| All things that AI cannot, by definition, do. So, not trivial
| at all with AI.
|
| Fuck AI, man.
| gifman wrote:
| Very few questions are stupid, these are not.
|
| Yes, you can definitely build an entire fps game using WebGL
| for rendering. Typically using JavaScript to handle physics,
| collision, gameplay, etc.
|
| My current WebGL project is rendering high definition terrain,
| high-poly animated models, thousands of particles, shaders,
| sound and more over 150 frames-per-second on a 10 year old PC
| with a RTX 3060. I have found hardware acceleration is often
| not enabled in the browser, or Windows will default to using
| the integrated-graphics card when running the browser and that
| must be changed in the Windows Graphics Settings.
|
| WebGL is a graphics API for talking right to the graphics card,
| supported by The Browser. ThreeJS and BabylonJS are libraries
| that make it easier to render 2D and 3D graphics, both use
| WebGL and/or WebGPU behind the scenes for rendering.
|
| Development with HTML/CSS/JavaScript and WebGL is my favorite
| stack to work with. Development is fast, re-loading is quick,
| errors and debugging is handled directly in the browsers which
| have great debug information and performance tracking. No
| compile time and support on lots of devices.
|
| Yes, OpenGL came first. WebGL is a JavaScript binding of a
| subset of OpenGL functionalities.
| Bewelge wrote:
| > Development with HTML/CSS/JavaScript and WebGL is my
| favorite stack to work with.
|
| I love this myself, but..
|
| > have great debug information
|
| How do you debug WebGL stuff? I find that to be one of the
| least debuggable things I've ever done with computers. If
| there's multiple shaders feeding into one another, the best I
| can usually come up with is drawing the intermediate results
| to screen and debugging visually. Haven't been paying too
| much attention to the space the past 2-3 years though, so I'm
| wondering if some new tools emerged that make this easier.
| gifman wrote:
| The JavaScript debugging is great right out of The Browser
| these days.
|
| WebGL debugging... it's a combination of how you're doing
| it, visually, especially for shader-related issues. For API
| calls, logging gets most things figured out, there is also
| this: https://github.com/KhronosGroup/WebGLDeveloperTools
| bornfreddy wrote:
| Nice! Nit: on mobile (ff if it matters) swiping down for some
| time makes the edges very grainy.
| iamtedd wrote:
| Same with swiping up.
| amiga386 wrote:
| You are forgiven for not knowing about the University of Leiden's
| _Escher and the Droste effect_ site from 2002, given it shut down
| in 2024, but they were the first to try filling in the centre of
| _Print Gallery_ and make the association with the cocoa tins
|
| https://web.archive.org/web/20020802200015/http://escherdros...
| bonzini wrote:
| It's cited by 3b1b themselves, who used Leiden's un-spiralized
| image to describe the effect.
| Bewelge wrote:
| Very cool! I once tried rendering his towers. Mainly used normal
| canvas drawing though :)
|
| https://bewelge.github.io/escherTower/
| Falimonda wrote:
| Cool, I think? It's unusable on mobile Google Chrome. Pinch to
| zoom worked for about a split second and now it's broken
___________________________________________________________________
(page generated 2026-04-05 23:01 UTC)