A-Frame and WebVR

As a web designer and developer as well as ex-Flash animator I decided to start a blog here just to keep people updated about my journey in programming.

https://www.cablecenter.org/vr/holiday/index.html

​Another test: https://www.cablecenter.org/vr/holiday2017/

The screen shot your looking at above is a copy of a holiday card we did in virtual reality almost two and a half years ago but now in a web page using Javascript (See it on the video VR page). This never touched Unity. Luckily, in 2014 Unity had just added an experimental WebGL exporter. The exporter wasn't even out of beta but was included as an option. We had to figure out the programming and ran into png transparency and z-indexing problems. Also, trying to export to WebGL was prone to errors. But, eventually, we prevailed. I'm not sure anyone at work realised we were kind of like "surfing" the tech as it was coming out.

Fast forward from 2015 to 2017 and I am building this test replica in A-Frame, a JavaScript WebVR short code language made by Mozilla. This holiday card has controller teleportation, the ability to grab objects, particle effects for the snow and it loads many times faster than WebGL from the Unity export. Unity needs a loading bar but this does not.

A-Frame had similar issues with png files taking on the colour of the background behind the image but Kevin Ngo ( @andgokevin ) sent me some code that changed the transparency. I'm not sure how it works but work it does. Kevin deserves a lot of credit. I have never seen anyone work as hard as he does. If I have a question he usually responds within hours. I ask questions on their Slack channel as well as other places and somehow he seems to be almost everywhere. So, I think Mozilla is lucky to have him working there.

It took two lines of code and a Javascript include that A-Frame labels a component. The trouble is that the documentation is overly complex and the example code is given in snippets. I see this issue all of the time with programmers doing documentation. If they would only provide a code block that a person could copy and paste into their projects. I have had issues for instance with flying in 2D in this test. In 2D I can use the WASD keys to move around and if I point upward I fly into the air. I could not get this to work based on the documentation and eventually found the code on CodePen in some sample experiments.

<a-camera look-controls wasd-controls="fly: true"></a-camera>

How did I add fog?

<a-scene fog="color: #a6b7d0; near: 0; far: 65;">

Code snippet for hands and Vive/Oculus teleport?

<a-entity hand-controls="left" ui teleport-controls></a-entity> <a-entity hand-controls="right" ui teleport-controls></a-entity>

In the header, I include the component like so:
<scriptsrc="https://unpkg.com/aframe-teleport-controls/dist/aframe-teleport-controls.min.js"></script>

I included the direct link because the version at GitHub from the documentation did not work for me (I think it's Vive only). You can add controllers but as of right now I think it hard codes the controller type but the way I'm doing it with hands allows for both. I think a physical representation of say, Oculus controllers when you're using Vive controllers is awkward.
​
Also, feel free to grab me and pick me up. I'm the cartoon with glasses.