Talking about Virtual Reality in the web and A-Frame at Nineworlds Geekfest
I recently spoke at Nineworlds Geekfest 2016. The nice thing about speaking there was that the audience was a little different from the usual web developer crowd I speak to. Of the audience only one considered themselves a web developer. Although the majority had had some experience with HTML and 3D graphics.
The talk was to inspire the building of virtual reality. Furthermore to show that by doing it in the mobile web a great many people can be reached.
Here are the slides & notes for the talk: https://ada.is/getting-started-with-webvr/
A-Frame is library for building 3D and VR experiences in a HTML like format. It is modular and extensible. Components for it can be written based on THREE.js and used just like HTML.
All you need is a little bit of HTML is all you need to get started.
<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere> <a-box position="-1 0.5 1" rotation="0 45 0" color="#4CC3D9"></a-box> <a-cylinder position="1 0.75 1" radius="0.5" color="#FFC65D"></a-cylinder> <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky>
This scene displays a few primitive shapes, it is the A-Frame hello world.
The other really cool thing about A-Frame is that it handles everything you need for virtual reality including providing the WebVR polyfill so that you can show your virtual reality experiences through Google Cardboard without needing a WebVR capable browser & headset such as Samsung Internet with Samsung’s Gear VR.
Enabling WebVR on Samsung internet.
Samsung Internet for Gear VR does not come with WebVR enabled by default.
WebVR enables experiences to go fully immersive rather than being contained in the window.
You can test whether it is enabled by going here: http://threejs.org/examples/webvr_cubes.html (Tip: If you open up a link in Samsung Internet then plug in the GearVR the web site will be opened automatically in VR)
If it works you can enter a fully immersive environment surrounded by cubes.
Message when WebVR is not supported
Enable it by opening the VR browser and go here:
Now WebVR is enabled you can try out some cool VR demos such as those on the A-Frame site:
Getting Building — Resources
To take a look at my slides/notes they are here:
The github repo:
My notes from when i was learning A-Frame:
The documentation on A-Frame:
Recommended Reading, great, platform independent advice on building scenes: