3D scene creation
For longer than I can remember I’ve been fascinated by the creation of explorable 3D worlds. I used to love analysing the small details in immersive experiences as a kid.
Since the arrival of Web3D around a decade ago I’ve had a healthy obsession with expanding my basic HTML & CSS knowledge to include some of this inspirational art direction. This scene combines some of the techniques I’ve learned over the years to ensure the best performance on the oldest of devices.
Shading
All shading is handled by mapping the UVs to a tiny gradient palette, to mimic shadows and highlights without the need for any scene lighting. I used a combination of sky texture and distance fog to recreate the golden glow of a sunrise. The lighting is optimised so that only an optional spotlight is used, solely as a rim light to highlight the characters. It can be removed without effecting the scene at all.
Animations
Simple animations were then added to help bring the scene to life, including windmills, trains, planes, clouds, hot air balloons, butterflies, rain and character models.
Further explorations
I’m hoping to integrate teleportation, physics and interactivity into the next update, though I’m still working out how to make it fun. My plan is to make the lake explorable, some sort of adventure. You can find my basic physics template for realistic VR interactions here for now.
A-Frame VR scene
The embedded WebXR scene below is set up to work with your VR headset. Mobile users can pan across the scene with swipe gestures or in augmented reality, while desktop users can look around with the pointer and explore with WASD keyboard controls.
Hit the VR button within the scene to dive in!
Hope this scene code can be useful for anyone exploring WebVR scene creation and A-Frame. Would love to see what you can create from this.