GitHub - bntre/CurvedSpaceShader: Curved Space Shader in Three.js (via 4D sphere projection)

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:

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.

Interactive Controls

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

Credits

• Animated models from three.js examples
  (the models are not included in this repo; they are loaded at runtime from the three.js repository):

  • Michelle by Mixamo
  • Horse by Mirada

• Music: Backbeat by Kevin MacLeod (CC0)