Show HN: Curved Space Shader in Three.js (via 4D sphere projection)
Published on: 2025-06-27 06:52:44
Curved Space Shader
This vertex shader was first written in HLSL for the Unity game Sfera: https://bntr.itch.io/sfera.
Now it's rewritten in GLSL for three.js.
Try it live: https://bntre.github.io/CurvedSpaceShader/
Demo video: https://www.youtube.com/watch?v=yhRXQAb-uh0
Math Behind the Effect
To show curved space (see Spherical Geometry), each 3D model goes through a special transformation using 4D rotation and projection.
For each object:
The model is scaled and positioned near the center of world space. In the vertex shader: The 3D point is projected onto a 4D unit sphere (x²+y²+z²+w²=1)
A 4D rotation is applied (each object has its own rotation).
The point is projected back to 3D using stereographic projection.
Interactive Controls
Mouse Wheel: Zoom
Ctrl : Rotate in ZW ("evert")
: Rotate in ZW ("evert") Shift : Rotate in XY (spin)
Mouse Drag:
Left Button : Rotate in XZ/YZ Ctrl : Rotate in XW/YW ("evert") Shift : Scale objects in world space
: Rotate in XZ/YZ Right
... Read full article.