3D Experimental Website — Beach, me and VR
We don’t really do VR development professionally — not yet anyway — but that doesn’t stop us being extremely enthusiastic about the technology and media platform that it represents. The complete IMMERSIVE SPECTRUM fascinates me. Don’t even get me started on how I think this will impact work and collaboration, education and media consumption in general.
For the past few years I’ve voluntarily taken my VR kit into our local village school, working with the teachers to find age-appropriate (not always easy) content that maps to the topic of the moment.
We’ve taken 7 years olds to the top of Everest
We’ve taken 4 year olds to the bottom of the Ocean
We’ve even had virtual snowball fights at the Village Fete!
I get a real kick out of watching the first-time VR experiences, the impact on teachers that have discovered a powerful new teaching resource and always, without fail, those special moments when VR fools the brain and makes normal people do seriously funny things.
Over the last couple of years, I’ve spent a considerable amount of “me time” sharpening my C++ skills (still somewhat blunt, I would say) and learning Blueprints to build immersive experiences in Unreal Engine 4. This is how I’ve been able to build this Instagram channel. It’s not very tech oriented, but nonetheless, a cool 3D low-poly brand of artistic output — exploring the world of Beach and my crazy little brain.
I was so passionate about the possibilities for Virtual Reality in Education, that I spent a significant amount of time last year building a Great Fire of London experience (or at least the makings of one…). This was a particularly neat piece of the development process — virtual fire extinguishing!
As you can probably tell from the Beach Instagram channel and the general concept of our visual identity, I have a lot of fun with our company identity. Beach for me, is a playground to explore all of our professional interests and passions — especially my own as the founder.
I’ve modelled my Beach Island a few times now in experimentation…
In celebration of this particular area of interest, I’ve built a little micro-site in order to share our excitement for all things immersive.
Now, we couldn’t just have a flat 2D website — no, no! That simply wouldn’t do. This was a great opportunity to dive in and play with some 3D web tools!
How it’s built
The site itself is built with Hammer (of course). The templates are written in Slim which makes my markup clean and easy to read. It makes heavy use of Hammer’s includes and clever paths to make managing the code as easy as possible.
The 3D Models are exported from Autodesk Maya to JSON format.
The bulk of the work is handled with Three.js — the “most popular Javascript framework for displaying 3D content on the web”.
I’LL AVOID A FULL ON TUTORIAL AT THIS POINT — he says through gritted teeth 😬
We’re using the core Three library and a whole bunch of additional libraries, including shaders, post-pressing, controls, extensions, loaders and helpers.
Not to mention, we’ve got custom components handling day / night transition and the water effect, based on this effect.
Our main app code was written in Coffeescript (seamlessly compiled by Hammer, thanks).
It took a bit of work to setup lighting in Three.js — it doesn’t import from Maya — and I’m still not really happy with the result, it’s not very “on brand”. But it’ll do Steve, it’ll do.
Somethings went well.
Other things, well they didn’t go quite so well.
When all’s said and done, as an experimental effort, I have to say it was a lot of fun to work on.
Thanks to Liam Reilly for the support with the 3D modelling and Taras Gavrysh who worked with me on the coding.
