loading...

Butterfly

A VR interaction prototype

Enter VR and extend your right hand—if you're lucky, a butterfly might land on it.

Why? A butterfly once landed on my hand when I felt down, inspiring me to recreate the experience and share these insights:

  1. Butterfly wing flapping: Efficient shader animations are key for ambients. Adapted Miziziziz's tutorial for Three.js, WebGL shaders, and WebXR.
  2. Hand tracking & Nature of Code: Practiced WebXR hand input using Nature of Code principles to guide how a butterfly reacts to stillness.
  3. VR comfort with organic design: Repeated Quixel assets and fog effects enhance depth and prevent motion sickness.
Source Code | Samir's Website