In 2018 a close friend of me — Jagna Nawrocka (make sure to check out the portfolio) — was creating an art piece for the Survival exhibition in Wrocław. She asked me to help out with the technical side of the project and even though my experience with VR was not existent, I was excited to give it a go.
The event takes place each year in unique places across the city and the 16th edition was no exception — artists were invited to fill the space of Wallenberg-Pachaly Palace, a classicist gem from the XVIII century located right in the city centre.
What we wanted to do
The exhibition’s theme was “Capital”. Jagna envisioned an experience in which visitors physically located inside of an empty, grey room of the Palace (the building is not used at the moment) could be taken into The Amber Room — a historical chamber filled with, well, amber and gold of tremendous value, once considered an Eighth Wonder of the World.
The current whereabouts of the original room remain unknown and although reconstruction of it is open for visitors in Russia, it’s fair to say that the actual Amber Room resides mostly in people’s minds — as a symbol of lost wealth which disappeared in mysterious circumstances.
The plan was to create a 3D space with two connected rooms — one grey, with textures based on black and white photographs of the original Amber Room. The other one similar, but with coloured pictures. Visitors would start the experience in the grey room and after some time would be “allowed” into the golden room — by flying through a mirror — as simple as that ✨
Technical requirements
After a few discussions with Jagna, we’ve agreed upon the most important technical requirements of our solution — it had to be:
- Cheap — we had no budget to spend, so using a fancy VR set like Oculus Rift was out of the question
- Accessible— this particular exhibition is visited by hundreds of people daily, often in quick waves, so we had to find a way for many people to be able to experience the art piece at once
- Maintenance-free — the exhibition lasted few days and we were not able to be on-site all the time, so we hoped to create something which does not need anyone to operate the equipment or explain how it works.
Web VR to the rescue
After considering a few possible frameworks which allow creating VR stuff (including Unity — check out my other article to see how to use it), I’ve stumbled upon something I haven’t considered — a web VR framework called A-Frame. After checking it out roughly, it turned out to be perfect for our use-case, mostly because:
- It’s simple — going from zero to a nice, interactive scene is really fast (thanks to the fact that there’s plenty of examples, documentation is decent and that the framework is based on HTML and a component approach)
- The app is a website — the experience can be hosted online and users can view it on their devices — there’s no need for fancy VR sets or human-assistance on-site.
Coming up with the code
The full solution&demo is here: https://github.com/miszu/vr-amber-room, feel free to ask questions if something is not working for you.
As I mentioned, A-Frame is a web framework— all 3D objects, components, animations, scripts et cetera are defined in HTML and JavaScript. Our app was not complicated and in total it ended up being just 83 lines of HTML, plus some images.
We needed to create a 3D scene with 2 rooms. Designing in A-Frame is quite straight forward, as the framework provides a tool called Inspector (ctrl+option+i), which is an interactive scene editor. We’ve added all of the needed planes (floors, walls, mirrors, ceilings), and then imported textures for each of them (Jagna has prepared them based on actual photographs of the Amber Room).
As for the movement, we’ve decided that users will be able to fly around both rooms, but in a limited manner — if they hold their gaze at one of the circles on the ground (called checkpoints — see the code snippet below to see how it’s configured), they would fly there to see the scene from that perspective.
Between two rooms there are mirrors — we’ve used them to create a “portal” between them. We wanted the coloured room to be accessible only after some delay, so to each mirror (which connect the rooms) we’ve added two animations — first one is making the mirrors disappear after 10 seconds, the other one moves them out of the way (that was needed because hidden objects are blocking the gaze-based movement).
Going public
Okay, the code was ready — how did we make it available for the visitors of the exhibition?
Thanks to the fact that the app was basically a website, we just needed to host it somewhere. I’ve decided to go simple and use GitHub pages for it, which is a really reasonable hosting option for small apps. The process is simple:
- push the code to GitHub’s repository
- enable GithHub pages for that repository, which deploys the website to a public endpoint (in our case https://miszu.github.io/vr-amber-room/ — you can visit it on your mobile phone right now and try it out 🤞🏼)
Then, to make it accessible for the visitors, on-site of the exhibition we’ve provided:
- few QR codes pointing to the GitHub Pages deployment
- a few pairs of cheap VR cardboards (we got some from Flying Tiger for about 2 euros for a pair)
- a few copies of step-by-step instructions.
How did the exhibition go?
I was not there to see it sadly (fun fact — I was in Saint Petersburg back then and I got to see the reconstruction of the Amber Room), but from what I’ve heard it was quite a success — a lot of people were visiting “our” room and trying the VR experience on their phones.
One more cool thing about web-based VR apps is that one can add Google Analytics to track the usage — thanks to that I know that:
- On the first day of the exhibition, 123 phones opened our app. The actual number of people experiencing was much higher for sure, as people were sharing phones
- In total, more than 400 phones opened it during the exhibition
In general, I really loved the experience of using new tech for creating something artsy and can’t wait to do it again — maybe AR next, who knows? Let me know if you’d like to create something together! 🎨
If you’ve learned something new here and/or found the topic interesting, make sure to let me know, I'd really appreciate it 👏🏻 Follow me on Twitter for more insights about VR and other tech 🚀
Michał Żołnieruk@michalzolnieruk
Some time ago I helped my friend (Jagna Nawrocka) to create a VR experience for the Survival Art Review in Wrocław - check out how we've used @aframevr to put people inside of the Amber Room (code&demo included) 🎨 #VirtualReality #aframe link.medium.com/vBklExTPH815:30 PM - 05 Aug 2020
Top comments (0)