Snow and the WebVR Boilerplate

Back in the days of Flash, I’d get to “model” snow a couple of times around Christmas every year. For some animated corporate Christmas cards, usually. So, when the time came to try out the WebVR Boilerplate – that’s what I chose for my first experiment. Gently falling snow.

(The above example is an iFrame – to pop it out for your VR goggles, click here)

The WebVR Boilerplate is a collection of files that does everything you need to do to get something in WebVR up and running, really easy. So that seems perfect for me! The base-state of the boilerplate shows just a rotating cube, in a room defined by a bright green grid. So all I did, to make this demo, was to remove the cube and start coding up the snow!

I do get a kick out of using code to achieve nothing more meaningful than an artistic interpretation of a real-world phenomenon.

Leaving the room – the WebVR Boiler Room – intact seemed kinda fun, and saved me the bother of thinking of anything beyond the snow. This is all about the WebVR Boilerplate, and the snow.

These snowflakes are actually cylinders. With only 6 segments. They’re about a centimeter across, and a couple of millimeters thick. So, yes, they’re bigger than real snowflakes. When I made them really small, like real snowflakes are, they weren’t much fun to look at. I also tried to make them just flat circles – I could run twice as many of them, before they started to slow my hardware down – but they weren’t close to as much fun as these.

Part of the magic of snow falling is that it doesn’t just fall. And that’s where I spent most of the time on this. I spent a little over an hour “writing” the code – but I spent a few hours working on the way they “drift”, or “flutter” as they fall. Without that – they didn’t look like snow. They just looked like particles falling.

Thanks to the WebVR Boilerplate, I didn’t need to spend much time at all on the technical end. I got to wallow in endless whimsical revisions as though I was a painter finalizing some crazy image I was committing to a canvas. And what I wound up with is way beyond a painting. It is 3D, is in motion, and can be enjoyed on any web-connected device, anywhere in the world, through a simple hyperlink.

The WebVR Boilerplate is easy.

It’s making primitives look physical in their motion that takes some time.

Speaking bluntly, here’s what I settled on to make them look like they’re light and interacting with actual air on their way down:

Each snowflake hangs a centimeter or two (calculated randomly for each flake) from a “fulcrum”. It then sways back and forth, by rotating around the x axis, from this fulcrum. That fulcrum, then, hangs a couple of centimeters below another fulcrum. And that swings by rotating around the z axis. Then that whole mess is rotated by a random, arbitrary amount around the y axis – so they don’t all look like they’re “aligning” in their swings.

And then there’s fudging with the other elements. Lighting, shading, size, number of flakes, and on and on. Values, or ranges of values, that would optimize the “look” of the snowsquall, without causing it to slow down on my humble hardware. And I wound up here. Hope you like it!

(At some point in the experimentation, I found myself instinctively trying to catch some of the snowflakes in my mouth, as I viewed the simulation in my GearVR goggles. At that point – I considered the experiment a success and decided not to leave it on the cutting room floor!)

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

Author: Pete

Editor-in-Chief, Lead Software Developer and Artistic Director @