Show HN: Curved Space Shader in Three.js (via 4D sphere projection)

1 month ago 3

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

Video cover

Stereographic Projection

To show curved space (see Spherical Geometry), each 3D model goes through a special transformation using 4D rotation and projection.

For each object:

  1. The model is scaled and positioned near the center of world space.
  2. 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.

Projections

Mouse Wheel: Zoom

  • Ctrl: 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
  • Right Button: Rotate in XY (spin)
  • Middle Button: Move the girl in world space

Keyboard:

  • Space: Pause girl animation
  • Arrow Keys: Fly camera
  • End: Stop flying
  • Home: Reset scene
  • Animated models from three.js examples
    (the models are not included in this repo; they are loaded at runtime from the three.js repository):

  • Music: Backbeat by Kevin MacLeod (CC0)

Read Entire Article