At Hi-ReS! London we recently launched an interactive experience called VOID. The concept behind VOID is all about space, how we transform it and what we can create out of it using either digital or physical technology. It’s our latest attempt at exploring how digital art can be perceived and interacted with on the internet.
From the start of this project we decided to make this a desktop experience. We felt that mobile and tablet devices didn’t have the performance capability that would allow us to provide the same experience on all platforms.
We didn’t want to feel restricted by browser or platform limitations.
The website was built using WebGL and Web audio technologies which allowed us to create high fidelity visuals and audio. This was achieved by using popular libraries like; threejs, howlerjs, GSAP and Coffee Collider.
Taking the user on a journey
Any great journey begins with a start, middle and an end. We set out the user journey of the experience like that of a digital book.
“ We aimed to represent VoID as a digital Book ”
A BOOK for the story telling, the absence of interface and the way of spending user’s time on the website. The experience is gradual, aiming to drive the user to explore each artwork as if they were a chapter of a story.
DIGITAL for the flexibility, the ephemerality of the project and the technologies.
As a user, you start with a prologue introducing the concept and visual tone. Then you dive into each artwork leading to the next one.
Chapters
To guide the user though the experience we used camera animations along a fixed path. Changing the cameras perspective and orientation allowed us to create a sense of scale within the vast abyss.
Camera animations can last up to 30 seconds (as in Prologue). To prevent the user from getting frustrated whilst each transition is happening we allow them to interact with the piece as soon as possible.
Hello Dolly
To achieve the smooth camera animations we created a camera dolly helper for threejs. The dolly consisted of two curves, one for the camera’s position vector and one for the camera’s lookat vector. Each point on the curve was editable with a dat gui controller. Making camera transitions very easy to control and edit.
In the picture below the green and blue points represent the editable points that adjust the camera and lookat curves.
Try the interactive demo
Keeping it smooth
One of the challenges we encountered whilst developing VOID was maintaining performance speed. A typical approach for WebGL websites is to use iframes for each individual piece of content. Iframes allow the WebGL contexts to be garbage collected without too much work.
To make the experience feel as seamless as possible we decided to build the website with all the artworks integrated in. We achieved this by creating a threejs scene for each artwork.
When the site changes page the current view disposes of all of its geometry and sounds then unbinds from any event listeners before navigating to the next page.
We used the Google Chrome profiler to monitor the garbage collection and to check if each threejs scene was being properly disposed off.
destroy: -> for object in @scene.children
@scene.remove object for sound of @sounds
do sound.stop
do sound.unload do @unbind
do @ui.destroy
do @loader.dispose @emit 'destroyed'
Positional audio
One of the new features in HTML5 is Web audio. Web audio provides developers with an API to play audio, create audio visualisations and apply spacial effects such as panning.
We used the positional audio feature to make many of the sounds relative to the visuals. For instance the volume and speed in blackice is determined by the camera and mouse positions.
Howlerjs a Javascript library for web audio provides a simple way to add positional audio.
sound.pos( x, y, z )Big geometries
Chapter 2 of VOID: Elements, features an array of large fractal meshes based on the platonic solids. Each fractal consists of thousands of smaller geometries combined to form the whole. If WebGL were to render thousands of these meshes separately the performance would take a large hit due to the amount of calls it has to make between the GPU and CPU.
Combining all of these meshes together significantly reduces the amount of draw calls. This can be achieved in threejs by using the built in geometry merge method.
geometry.merge( tmp_geometry )With this optimisation WebGL only has the task of drawing one single mesh compared to thousands of smaller ones.
For more examples of merging geometries with threejs we recommend this post.
About the Artistic bias :
The graphic treatment of the elements and their animations try to match the opposition between those two universes.
We used floating letters for the title and the roll-overs, creating some gravity to the elements.
All the elements are floating in time and space.
For sentences that introduce each chapter we used a twinkling effect. This make the words feel more alive and less static.
For the iconography, we were inspired by old printings.
We animated them in 3D and stylised them frame by frame in Flash.
Together the icons create a sparking constellation and the overall shape is created by persistence of vision.
If you took the sequence of frames one by one, it would be hard to recognise the shape within it.
Summary
The web is shaping up to be a serious platform for creating artistic experiences. Sites like Way to Go and ROME have showed us that the new features in HTML5 have allowed content developers to create rich interactive experiences like Flash did not so long ago.
Creating VOID as a desktop only experience allowed us to push our ideas further without the limitations of mobile devices. This of course is not meant to say that mobile experiences can’t be as rich and experimental, it was more the case of achieving what we had visioned VOID to be.
Here at Hi-ReS! we are constantly wondering about how mobile devices can be used as part of a bigger artistic input. We would love to hear your thoughts about how you empower experiences though mobile devices.
If you haven’t already, it’s now time to enter the VOID.
http://void.hi-res.net/
PS : We have nothing against colours
