Getting started with A-Frame – #1

Getting started with A-Frame

For a while now I’ve been working with the A-Frame framework for building virtual reality application in the browser and I really like it. So, it’s time to dive in deeper and what better way to do that, than writing a series of tutorials. Of course, I have to start at the very beginning and work my way through the entire framework.

This first tutorial will explain a little bit about the framework itself and shows you how to get your first polygons on screen in the browser.

What is A-Frame?

What is the A-Frame framework all about? A-Frame is a framework for building Virtual Reality applications using web technology, originally by Mozilla and started in 2015. It is built on top of the WebVR API and uses Three.js. Three.js is built on top of WebGL. This may seem like a dependency on top of a dependency. And, although it is, you probably do not want to write everything for WebGL and WebVR yourself.

A-Frame uses a declarative syntax in your HTML files, which makes your HTML files feel very natural, easy to understand and it makes copy-pasting very simple. A-Frame is, just as the web itself, cross-platform. Applications build with A-Frame run everywhere from your desktop browser to your mobile devices, on Google Cardboard, Google Daydream, and Samsung Gear, and on the HTC Vive and Oculus Rift. It supports the controllers for the various devices as well.

A-Frame is using Three.js in the back, but you are free to use whatever you want next to it on your website. Because it used the HTML component structure you can use whatever you want next to it, like Vue, Angular or React. It also comes with a visual inspector, just hit CRTL+ALT+I when running. In a later tutorial, I’ll dive deeper into this and show you what it is capable of.

A-Frame uses component you can build yourself or download from a large repository. This list is curated and can be compared with the Unity Asset store a bit. These components make it very easy to extend your application and create reusable pieces. More on this in later tutorials as well…

Let’s start a scene

In this first tutorial, we are just going to get our feet wet. Let’s start by having a look at a piece of HTML.

On line 3 you can see the A-Frame framework scripts being loaded from their CDN. You can use npm or a local, offline copy of the framework, but I personally use the CDN most of the time.

The more interesting parts are on line 6 through 8. All A-Frame tags start with an “A”. And every A-Frame application must have a scene.  The a-scene tag creates this. You can add attributes to the scene as well, but just the tag is sufficient for now. Inside the scene is an a-boxThis tag adds a box entity to the scene. There are two attributes defined on that: color and position. Both are pretty self-explanatory.

What’s next?

Next time I’ll dive a little deeper into these attributes. How that work and what you can do with them.

In the meantime, you can have a look the code for this tutorial (and possibly the next tutorials as well) on my Github page. If you like to support the series you can use one of the affiliate links throughout the page. Another way of support is to become a Patreon. This will provide you with all kinds of benefits, like early access to pretty much everything I write.

 

 

Recording of VR in a Box @ Techdays

Last weekend the recording of my session VR in a Box for the recent Microsoft Techdays was uploaded to YouTube. If you have any feedback let me know. I might do a follow-up if necessary.

You can view and download the slides over here:

In case you are looking for the APK to try it for yourself: VR_TechDays.zip

Issues with native WebVR on Daydream

When I was building my entry for the JS13K games contest, I tested my app on the Google Daydream. One issue I ran into was that it was hard to focus my eyes in VR. I thought it was just me at first and during the contest, I didn’t have the time to investigate any further anyway. Now that the contest is over I’ve decided to dig in a little deeper.

Debugging

I’d like to start with a little background on how to debug a WebVR app running on a phone in a Daydream View. Since the app will probably be running in Chrome on the device ( although debugging Microsoft Edge works as well!), I use the Chrome remote inspector. The remote inspector can be accessed by starting Chrome on your dev machine and navigate to chrome://inspect. When your phone is connected to your PC via USB it will show up there, but it is possible to find it over WIFI as well. Select the page you want to debug and click ‘inspect’.

Now you can debug the page as you would normally.

To test if the page supports WebVR you can check if ‘navigator.getVRDisplays’ exists. Just type this in the console:

navigator.getVRDisplays

You should get one of these three responses.

“undefined”. In this case, WebVR isn’t available. Not native, and not through a polyfill.

In this case, you’ll see an implemented function. This function is implemented in the polyfill.

Best case scenario. The function is implemented natively.

In the last two cases, you’ll be able to call the function and get info about the device. This function returns a promise, but with the following like you can view it in the console.

navigator.getVRDisplays().then(d => console.log(d));

Now, you can dig into the result and see what is in there. For example the device that is used.

Issue and Fix

It turned out that for some reason my WebVR app was defaulting to ‘Google Cardboard’ and not Daydream, while other examples had access to the Daydream native VR. This seemingly weird behavior is caused by the polyfill, flags in Chrome and a meta tag.

After a lot of debugging, testing and digging around, I learned the following:

  • The polyfill defaults to cardboard, even when running it on a Daydream device, which causes the wrong settings for the Daydream lenses. This makes it very hard to focus your eyes on the VR.
  • To get WebVR running on your Daydream supported Android device everywhere on any page, you need to enable it through a flag. Go to about://flags and search for ‘WebVR’. After doing that it runs natively.
  • If you don’t want your users to have to enable a flag, there’s another way. That is by adding a meta tag. You have to enable the experimental feature by registering an origin trial. This is very easy to do. Start by going to the OriginTrials Gitbub and follow the link there to a form to register. You’ll receive a token you can add to the page to enable the WebVR feature for every visitor.

That last point, the meta tag, is what is used in the examples from ThreeJs.

VR in a Box @ Microsoft TechDays

Today I spoke at the Microsoft Techdays in Amsterdam about Google Cardboard, Unity3D and Visual Studio.

There will be a recording available later which I will add to this post. But I promised the APK I’ve built during the demo.

You can download it here: VR_TechDays

In case you are looking for the .FBX model, you can find that here: VRBox FBX Model

Thanks again to everyone attended!

Why does JavaScript even have null?

JavaScript has its quirks and difficulties. One of them is null & undefined. If there’s undefined, why does JavaScript even have null?

Equality

Let’s start exploring null and undefined by having a look at the following comparisons:

null >= 0; //true
null <= 0; //true 
null == 0; //false 
null > 0;  //false
null < 0;  //false

How can null be bigger or equal to zero, less or equal to zero, but not be equal to zero?!

To understand this we have to know how JavaScript handles these comparisons. There are two different kinds of operators used in the example above: _Equality Operators_  (==, ===, != and !===) and Relational Operators (>, <, >= and <=).  And both work differently.

Equality operators compare at an object level. If both _operands, _the things left and right of the operator, are of different types a strict comparison (=== or !==) is used. Because null is an object and 0 is a number they are not equal.

In the case of Relational Operators, both operands are converted to the same type. In the example to a number. Under the hood, JavaScript is doing the following:

Number(null) >= 0; //true

Which makes much more sense. Number(null) return the value 0 and 0 is equal to 0.

Let’s try the same examples with undefined:

undefined >= 0;//false 
undefined <= 0;//false 
undefined == 0;//false 
undefined < 0;//false
undefined > 0;//false

First thought would be that this should result in the same outcome. Although JavaScript is doing the same, the result is different. Again, JavaScript is converting undefined to a number, but Number(undefined) is not 0 but NaN. The JavaScript spec says that every comparison with NaN results in false, even a comparison with NaN.

There’s even a little bit more to the _comparison algorithm _than this, but this explains the idea.

Why null?

Does JavaScript need a null value? Though it would be possible to write an entire application without using null, and often it does, there is a place for null. The difference in usage is intention. A null value is intenionally abcent, where an undefined value is often unintentional and just the default value.

For example in a function retrieving a piece of data. When that data isn’t there, this function returns null. Otherwise, it returns the data. This way one can tell if the value is returned by the function and is set to null or if the variable that should contain the result isn’t set at all.

In other words: null !== undefined