When asked about hybrid app development, one of the things I would usually tell people is that hybrid technologies like Ionic and Cordova are complete and performant enough for any situation that doesn’t require intense rendering such as 3d and VR apps. Javascript is just too slow. Or so I thought.
That’s why I was excited when I found out about A-Frame VR, a WebVR framework, which is just what it sounds like – a framework for making VR in the web.
To do this the Mozilla team that open sources A-Frame uses a polyfill and 3js to build VR and guarantee that any browser that looks at your app has the API’s it needs to render it.
Naturally I started playing around with all sorts of A-Frame tutorials. The team that created it make some pretty good ones called A-Frame school. And they also have a blog and twitter feed that has all the latest news and cool projects built with A-Frame.
After doing a bit of learning I decided to try some hacking. A-Frame is really good at rendering basic shape out of the box so I made some columns and steps with the basic entities.
It reminded me a lot of coding SVG images from scratch, but now it is in 3D and VR.
Once I had some shapes I like I made them reusable with A-Frame’s mix-ins, and created a stone temple.
Another cool thing about A-Frame is the repository of community plugins that other people developed. They have code for animations, new shapes, framework integrations, controllers, and even an ocean entity. I used the environment entity to simulate an environment around my structure.
I got bored with the Egypt environment though and decided to color the column and add a metal reflection to the bases to look more like a Japanese temple than a parthenon rip off.
After the landscape was done, I Decided to use animation to move the camera through the environment so users would get the feeling they were entering the temple.
It still seemed sparse on the inside so I went to clara.io and took the most popular buddha model to place inside the temple, coloring it metal to match the columns.
Then, to add a repetitive motion to the environment and make it more interesting I added a sphere of light in front of the buddha by copying some code from one of the tutorials on point light sources.
And voila! MinyoVR was born! You can see it on glitch, below