Building in React VR: What we learned
Mint built an app in a week using React VR. These are the challenges we faced.
TL;DR: We built Dinosaur Galaxy V1, a VR teaching aid for school children, in a week using React VR. (You might need to update your browser to view it.) We faced a number of challenges that might be of interest if you’re planning to build a VR app.
Every year Mint goes away on a company product development retreat — it’s a chance for us to get together, hone our skills while working at high velocity and hopefully build something interesting within a few days.
This year 11 of us decamped to the beautiful Edells in Cowden, Kent, with the brief demanding that each of the two teams build something in either virtual reality (VR) or augmented reality (AR).
The idea
Our idea emerged from the recent Rocket Fund project Mint backed, in which a school near our London office crowdfunded for VR kit to help pupils with their literacy skills.
Thinking back on this we wondered: What might a VR game that tests these literacy skills look like? Could we make learning new vocabulary a fun, immersive experience?
Somewhere along the way the word ‘thesaurus’ prompted the inclusion of dinosaurs (I believe the Thesaurus was a bipedal omnivore from the triassic period, no?). Then the dinosaurs ended up floating in space, for reasons that — if you read on — will become apparent.
The goal
Our goal was to build an immersive VR teaching aid — for use in the classroom — that would help children aged between 8 and 11 expand their vocabularies.
We chose this age group because it’s a time when children have enough vocabulary to start trying to write their own stories. Our game would help them learn synonyms for common words so they could vary the language they use in their writing.
The tools we used
When weighing up the options for how to build the game, simplicity and ability to move fast was a priority — we only had a week, after all. We decided to use Facebook’s React VR framework, which allowed us to use the Web VR ecosystem and build quickly. It also meant we would be building a game that would be device agnostic.
While potential performance issues were a consideration, we felt that the speed of progress we’d be able to make outweighed this concern. Our developers, Simon and Bartek, were already familiar with React and felt that this meant we would be playing to our strengths.
Designer Tayo decided to use Qubicle to create elements within the game’s 3D environment — she found it easier to get to grips with than other tools like Maya or Blender. Inspired by the likes of Crossy Road, it allowed her to use a retro, 8-bit design style using flat low polygon models with no curves and very simple textures.
About React VR
React VR lets you build VR apps using javascript. One of the great things about it— in theory — is that, as a Web VR framework, anyone can build apps for it; and anyone can use those apps. The fact that an app built in React VR lives in the browser means any device that can launch a browser can run the app.
Now, React VR is not intended to allow for the development of complex apps in the same way that something like Unity is — but that simplicity is what makes it appealing for developers looking for a first taste of building in VR. With this simplicity, however, comes the potential for the aforementioned performance deficiencies, which means developers need to weigh up the pros and cons.
The challenges
It’s worth acknowledging that not every challenge we faced was purely down to React VR — we had to adapt to a new way of thinking, and we faced new UX challenges we needed to figure out. Here I’ll hand over to developer Simon and designer Tayo.
Challenge #1: Web VR is a slightly misleading term
‘Web VR’ could make the framework sound like something web developers can expect to pick up easily. The fact is that developing a VR tool will be very different from what most web developers have experienced previously.
Most web developers work with data on a day to day basis. Switching context to something that is more like a gaming environment is a hard shift, and not one that can be done lightly or without some relevant experience.
Challenge #2: Lack of documentation
One of the most annoying things about using ReactVR is the documentation, or rather the lack thereof. Yes, the very basics are outlined on the React VR website, but we found that anything outside of the precise implementation shown was not very well documented.
An example of this was that we wanted to trigger the sound component to run on click of a ‘VrButton’. It turns out that changing the state of a configuration field was the way to achieve this, but it wasn’t very clear from the documentation.
This is something I can imagine people wanting to achieve. Being honest, this challenge is to be expected with how young the library is and I can imagine will only get better with time and uptake.
Challenge #3: Lack of in-depth examples
The examples that ReactVR provides are good for getting up and running quickly, but anything larger than just using a certain component is pretty much non-existent. Again, this will come with uptake and adoption, but it meant extra overhead for us in terms of debugging, which had an impact on how efficiently we used our time. Given we only had a few days, it meant our team’s productivity took a big hit.
Challenge #4: Production deploy
Out of the box, React VR gives you`npm run bundle` which packages everything up into a few files to put on to your web server. It works really well, except you have to manually update the`index.html` file to reference the new production ready javascript file, and also copy all of the static assets into the same directory.
We wanted this to be a lot smoother so we could automate this through our CI build and automatically deploy to Amazon S3. As it turned out, we had to manually update then copy and paste the files to S3. Obviously we could have written a script around this, but again time constraints played a part.
Challenge #5: Three-dimensional user experience
For this part I’ll hand over to Tayo Kopfer:
Being used to designing for a flat surface, designing characters and text for Dinosaur Galaxy tested my knowledge of objects in three dimensional space. All angles, quite literally, have to be accounted for.
Designing the gaming interfaces was challenging. Although the outcome is fairly simplistic, it was difficult to know where the interface needed to exist in the environment we were creating. We had to create an area that the user knew to check back to for further instructions, or for example to see the next question. This kind of thing is challenging because, as a new discipline, the ‘rules’ are still being developed.
I can imagine that if we were to take Dinosaur Galaxy any further we would have to rethink this process and focus on the player’s experience within his environment.
Challenge #6: It’s hard to test something in VR until you’ve built it
@Tayo:
It became clear quite early in the week that testing things out in the environment was the best way to understand how the objects existed within it. Prototypes beat mockups by a long way here — it’s hard to know what is going on spatially until you experience and interact with the elements you have created in the space that you have created.
Having to take all aspects of a space into consideration, whether that’s in front, behind, above or below you, was a fun experiment in design. Suddenly the elements you are used to dealing with on a flat surface are being enveloped spatially, and this changes your interaction with them.
Conclusion
It was an intense week’s work, especially on the development and design side — but we were pleased to end the week with a working app. It’s not perfect, but we feel the opportunity to spend time getting to grips with building in VR will come in very handy in the future.
Would we use React VR again? We would probably wait a little while on that front, until the community and ecosystem around it has made it feel less of a lonely furrow. If we were to build a VR app for a client in the next month we probably couldn’t rely on React VR to deliver the reliability and complexity required.
But for people looking to dip their toes into VR development it’s certainly worth a try, especially if they’re already familiar with other flavours of React.
All that’s left is to invite you to check out Dinosaur Galaxy — we’d love to hear what you think of it. Tweet any questions/comments to @mintdigital.
