Tech Speakers Tech Briefing With Kevin Ngo: A-Frame and WebVR

Kevin Ngo from the WebVR team will present an overview of the WebVR and A-Frame roadmap; share where to find assets, demos, and other resources; and offer ideas for how to engage audience and community. And, even if VR headsets make you feel a little queasy, plan to come away with some talking points for why these projects are important to Firefox, Mozilla and the future of the internet.

Bring your questions!

Start time:
Duration: 46 minutes
Channels: Main, Tech Speakers

Tags: techspeakers, Aframe, moztechspeakers, WebVR

Views since archived: 63

- Hello, hello, hello.

Welcome everybody, thank you for joining us.

Today is March 15th

and it is currently 3 p.m.

here in Mountain View, California.

Thank you to all of our tech speakers

and participants who have joined us

and attended and facilitated our labs master classes

and tech briefings throughout this six-week series.

This week,

we'll be presenting the sixth and final session

of the Winter 2017 Tech Speakers Cohort.

We're joined today by Kevin Ngo.

Kevin is a member of our very own Mozilla VR team.

Kevin is a virtual reality web developer

and a core developer of A-Frame.

In today's tech briefing,

Kevin will be providing you with an update

and overview of Mozilla's work in areas

of WebVR and A-Frame.

As a reminder, we'll be monitoring Etherpad,

Telegram and IRC for your questions.

So without further ado,

please join me in welcoming Kevin to the stage.

- Hey, I'm Kevin.

I work in the Mozilla VR team.

I've worked for Mozilla for four years.

I was an intern as a contract in college

and then I moved on full time.

So it's been my whole career.

And I started working on VR

probably September of 2015.

So A-Frame is a web framework for doing

a bunch of virtuality experiences.

The best place to start is the A-Frame homepage

which is

And we created this because--

Well, to get some background,

Mozilla VR team created WebVR.

They started with Vlad

who kick started WebGL on Firefox.

He was experimenting with some VR stuff

and from then the people at WebVR and Firefox

and then Google reached out

to start experimenting with things

and eventually became a little VR spec.

And we created A-Frame so that web developers

are able to easily create virtuality content

without having to know

graphics knowledge or WebGL.

So I'll be going through a run-through

of my presentation.

I have a presentation kit for tech speakers.

You just grab it and it just has

a bullet point presentation.

Feel free to modify it.

It's on GitHub.

And this is where it starts.

So I introduce myself, as I just did now.

So we create to onboard web developers

and feature this new 3D and VR medium

and also for us,

we have to pull the type of VR experiences faster.

And I'll be talking about how A-Frame

is easy for web developers to get involved

and how it really speeds up

kind of the bottom line of what VR is.

So virtual reality,

this is

a very high-tech thing.

The technology platform that transports you

into realistic, and interactive,

and immerses 3D environments.

Once you put a headset on,

you should feel like you're actually in another world.

In a good VR experience,

you have hand controllers and you'll be able

to grab things and interact with the world

and you can do things you can't do in real life.

We imagine this would be the next platform.

It's gonna change how

we as humans work, play and communicate digitally.

Kind of what TV or smart phones did for humanity,

expect VR to kind of be the next frontier.

It's still very new.

We're still in the first generation headsets,

so the cheapest one being Google cardboard

it's where you just pop your phone

into a cardboard holder and hold it to your face.

The highest end would be

something like the HGC5 or the Archos Swift

where you have controllers.

You have positional tracking which means

you can actually move your head back and forward

and you have your hands.

Whereas Cardboard and mobile devices

you go and move rotationally

and you may not have a controller.

So at the Mozilla VR team,

we're focusing on high-end VR,

that means Vive and Rift experiences.

This is because we see VR as a long-term play.

It's gonna take a long time for VR

to become truly mainstream

and what we see as mobile devices today

are truly mid and not compelling enough.

So we wanna prototype the high-end VR

as much as we can now so that in the long term,

we're in a good position that we have

a compelling platform on Firefox,

on the Firefox platform

as well as on the content ecosystem with A-Frame.

So we see all these devices, and systems,

and platforms currently competing with one another.

The issue right now is there's a lot of fiction

with VR ecosystems.

As with mobile, there are app stores.

These are where corporations determine whether

your app gets allowed in or not

and it takes a long time to go through

the submission process, especially for VR.

The Oculus store,

they curate very well

so they only let the top content in

and it seems there's a process as well.

Downloads and installs are also

a barrier to consumption.

You have to download

hundreds of megabytes of an app,

wait for it, let it install and then jump into it.

And also it's a closed ecosystem.

It's proprietary engines.

It's a steep learning curve.

It's only available to a select few game developers.

If you want WebVR 's be successful,

then we want a platform

without these points of friction.

So we have WebVR.

As I mentioned before,

it's something that was started by Firefox.

I'll go over which browser vendor support it.

But WebVR, technically, is just browser API,

but it's also kind of a platform

with the advantages of the web.

So it's open,

which means anyone can publish content

just with the website.

It's a more open-source culture

and everything is standardized.

It's connected,

which means that

just as you click on a link,

go from webpage to webpage,

in WebVR, you'll be able to do anything really.

You can walk through a portal

and jump to a different world.

Some games you pick up a burrito and you eat it,

and that is pretty much your back button.

You can grab an object or a telephone

and hold up your head

and that's how it goes to a different webpage.

It's really all up in the air on

what WebVR will look like.

And also, it's instant.

You can click on a link and

instantly jump into a VR experience.

It's very easy to share,

you can just tweet a link

and someone can just join it.

More specifically, WebVR is a browser API.

It just gives the browser or JavaScript access

to the VR sensor data.

So that includes post,

which is position and rotation of the headset,

stage framers,

which means how big your room is,

where the floor is.

Also attached to the API related

are also controller and gamepad,

VR-related gamepads.

So controllers,

they have positional rotation in space.

In the future,

we might see more and more types

of peripherals that come into VR.

And this API also allows you

to push content to the headset.

So you have a canvas

then you render it to the headset.

And this is a spec that many corporations

are working together with.

It was led by Firefox or Mozilla to be specific.

Google jumped in.

Microsoft recently announced

or a few months ago they announced

they are developing it and they're pretty close.

Samsung is also in.

Oculus releases some browser as well.

Lots of different browser vendors

and we're currently in the supporting.

At this point we're really pushing for Firefox

to get this into Firefox release channels.

We really want this.

I think maybe in the summer, late June or early July,

that's what we're aiming for to ship it

to release channels to

the hundreds of millions of people on Firefox.

Chrome is not focusing currently

much on desktop VRs

so Firefox currently is sort of

the leading desktop WebVR platform.

Other browsers include Microsoft Edge.

As I mentioned, they're very close.

Chrome for Android supports WebVR

now on Daydream,

since Google is focusing on mobile.

Oculus Carmel is for the gear VR

which is for Samsung phones.

That's their browser that's currently out.

Samsung Internet also supports WebVR.

For browsers that don't support WebVR,

we have the mobile polyfill.

This means that browsers on mobile browsers

don't support WebVRs specifically,

but we can use the orientation device

motion sensors to kind of mimic

VR data.

Unfortunately that's not very performant yet,

it's not very optimized.

It's more of a kind of preview

so that you can use on any smart phone,

but it won't be the best experience.

Kinda looks best on an iPhone.

But it's great for people to at least

get a glimpse of what VR is,

although it isn't very compelling.

For our current status on all the browsers,

we released

It's a website.

We intend it to be community curated,

but currently it's just pretty much

us maintaining it right now.

We hope more people would jump in.

It's meant to be like a one-stop shop

for all your WebVR data information.

It'll tell you all the browsers

that support it on which device

and how to set those browsers

'cause currently many browsers are

currently experimental.

So Nightly is a nightly channel.

Chromium with download custom built.

So with all these browsers behind it,

the ultimate aim at least for us or for many of us

is to build this idea of a metaverse.

So this idea that was very popular in science-fiction.

It's this shared persistent cloud of virtual space

that everyone can see each other and interact with.

This is ultimate reality where

we work, we play, we may may live.

It should be decentralized, open, and connected.

You don't want one corporation owning the world

where everyone lives in.

And so

to reach this vision,

we need people to be able to create content.

We need critical mass behind it.

Where do we begin?

Before it was really hard

to create WebVR experiences.

That was the main issue

'cause you need to know WebGL.

A lot of JavaScript which is actually

inaccessible for a lot of web developers,

a lot of people are limited.

There's lots of people in design that know CSS

or there's also game developers

who don't know JavaScript.

It's just this whole...

It's like a cross-disciplinary movement

that takes people from all sorts of disciplines

that have al sorts of different knowledge.

These are the things you have to do if you use three.js

to create a WebVR experience.

There's also polyfill involved.

You just have your camera,

your lights which initialize the scene,


Lots of things are a barrier

to just doing

just an initial hello world

and to import some modules.

So it's a big obstacle if you just

want to do this small thing

between encapsulating all that

into just one line of HTML.

So we make it very easy with A-Frame,

the web framework for building VR experiences.

So A-Frame is just based on HTML.

You just give it a script tag

and you

declare any scene, just one HTML element.

There are no builds that's required

and we use custom elements to do this,

a custom element polyfill.

So that one line of HTML, A-Scene,

it handles everything:

your canvas, your camera, your render,

your lights, controls,

render with a polyfill.

Then under that scene,

you can place all your elements

like A-Box, or A-Silver, or A-Sphere.

Then you customize it with HTML attributes.

The wonderful thing about this

is it's very readable.

HTML is arguably the easiest language

in all computing.

It's very accessible

and it's very encapsulating.

That means we can just copy and paste

this HTML anywhere else,

and it will still work.

Unlike JavaScript,

you might have variables somewhere

that are different modules and files.

It's just hard to copy and paste

which is how a lot of people learn.

So this is a quick example of

an A-Frame scene

by someone from Samsung.

We actually have computers coming from

a lot of different orgs on A-Frame.

It just uses text and if I open the Inspector here,

hopefully you can see,

and look at the DOM Inspector,

you can see this is just

HTML here

and that's deeply within my slides.

So if I...

Let's see if we can easily change anything.

Here's a text.

Inside here is a text here.

So if I change virtual reality to say


what's this,

and then that updates the text now.

So it's tech speak and it's from Mozilla.

So if I had a headset, I could...

Let's start with mobile.

If I have a mobile and I put this in VR,

you could just pan kinda around.

On a desktop,

you can click and drag around.

That's kind of a preview experience.

If you had a Vibe or a Rift,

and you set everything

and you hit this button, enter VR,

you'll see this scene all around you in 360.

Okay, let's see.


And since it's just HTML,

it works with most libraries

of frameworks on the web

because all these frameworks and libraries

were built with HTML in mind.

The DOM, they're meant to manipulate the DOM.

So D3, Vue, React,

jQuery, Angular,

they can all just pop right on top of HTML,

top of A-Frame.

A-Frame is on top of that.

A-Frame is an extensible framework.

It is for three.js,

so any component system pattern can work.

Any component system is a pattern

very popular in game development.

It's used by engines deh-syoo-nih-tee.

The idea is that every object

in a scene is an entity

which is an empty object.

By itself, those empty game objects,

they don't do anything.

But then you plug in components to attach

behavior, functionality and appearance.

This is different from where the 2D Web,

where you just have a bunch of HTML elements

and you just kind of reorder them in your scene

and you'll touch those HTML elements, right?

You don't really configure what a P element does

or a

form element does

or a bun element.

You just use it as it is with little configuration.

In 3D and VR, it's different.

You can have objects and infinite types of complexities.

There's much more complexity

in the behavior and their appearance.

We need an easy ways to build up

these different kinds of objects.

This is why

this framework was very popular in 3D games.

If you know Minecraft,

it would kinda be like each block in Minecraft

is a different type of entity

and then they're just bundles

of different components.

So say you have a T and T block.

It's a empty entity.

You add the texture component to give it its look.

You got a explosive component

to make it explode-able.

Let's see, skip some slides.

So under the hood entity,

it just starts with a-entity

and by itself, it doesn't do anything,

and we plug in components.

and components are represented by HTML attributes.

So let's login.

So A-Sphere actually under the hood

is actually a geometric component

which provides shape

and material component which provides appearance.

You compose them together to create

a match plus sphere.

And the syntax is similar to CSS styles.

You have a key, a colon, and a value,

then you delimit it with semicolons.

You can just keep on attaching more and more

components to build up the objects

so I can configure the positional location scale.

I can have...

Say I have an animation component.

I just attach that doing HTML attribute

and that will provide animation.

Or let's say there's a movement pattern component,

I just attach that and it will give it a movement pattern.

Or say I want to swap out the appearance

and use a JSON model and do it with the robot,

we'll save an explode component which I configure

to say when you're hit on it, you will explode.


I'll go into the benefits of this.

A-Frame comes with a few core

components out-of-the-box.

these are some of the components

that ship with A-Frame.

But since A-Frame exposes the less developer's ability

to make their own components,

developers of the community have created tons

of components to do physics or leap motion

or support different kinds of model formats

or do audio visualizaions or multiplayer.

The community has filled the ecosystem

with these components.

The wonderful thing is that these components,

they're built with JavaScript

and they can do anything.

There are mixtures of three.js, DOM APIs,

just bundles of JavaScript.

But anyone can just take one of these components

and drop them into their scene via a script tag

and just use it straight from HTML.

So say we have all these components,

like a whole library of components,

you can start building scenes

just from these components just from HTML

and just once,

people will add all the features

that we need to our ecosystem

as opposed to just us trying to

create a thousand features.

So we have developers that know

JavaScript and 3D jazz creating these components

that empower perhaps more newbie developers.

They can use it, just insert HTML.

We're collecting these components

into the A-Frame registry.

Is kind of like the Uni access store

where we curate the components,

make sure they work.

We handle the versioning, we test it.

We help maintain them

so that people can search through them

and install these components that

sort of work in your scene.

We've seen lots of people in the community

just take these components and build

really cool scenes just from these.

So say you have a teleport component

where it lets people teleport with their hands.

Let's see what's going on here.

We have a mountain component.

You just drop in a scrip tag and get mountains with rain

or share stuff with video or text.

Or something like...

I'm gonna get back to my window here.

Or something like leap motion.

So you just drop the script tag.

You type in leap hands and then suddenly you have

leap motion hand controls.

It's syncing.

(types) One second,

let me fix my


What's here?


So this is the demo where we just

have a Leap Hands component

and add it to our scene

and then we have leap motion sensors.

You can just have our hands in a VR space.

A-Frame comes with a visual Inspector.

This is something that we want to make common knowledge

'cause it might be kind of hidden.

With an A-Frame scene,

on any A-Frame scene in a (mumbles),

you hit <ctrl>+<alt>+i.

It will inject a visual Inspector.

It's kinda like an editor.

You can pan around, change values, inspect your entities.

It's kind of a dev tool for the browser,

but for A-Frame and VR.

So I say I select this text entity here.

I can just go in and change it to say...

Well, if I want it on Mozilla, exit first,

and then position it.

The Inspector is also hooked up to the Registry.

So I can actually add any components

that are part registry.

So say I select the ground and I wanna add physics.

So adding it to add a static body component,

is like a physics term.

Then I make this a dynamic body component

so it's affected by gravity.

Then I'll just move that up a bit.

It could be here.


Right here, okay,

and then go back to the scene

and the changes will be reflected.

That's the ball



And then for our main presentations,

I run through the community recent examples.

I've pre-curated and created some spring caps of them.

Some of them are recent presentations.

I just didn't purely chewing off downloads

of community guys make.

If you go to A-Frame blog,,

every week I

collect everything that the community is doing.

I make kind of a weekly newsletter

so everyone can see it.

If you tune to A-Frame Slack channel,

which I'll show later,

we have this bots channel that sees

any time anyone mentions A-Frame

on Twitter, or Facebook, or any blog.

That's pretty much how I see

what people are doing with A-Frame.

So checking if it's still there.


So this comes out every Friday at variable times.

And while we wait for that to load,

I'll run through some examples.

Sorry the video might be a bit choppy

since most of these are videos or GIFs.


I just run through these different categories.

So Mozilla VR Team made A-Painter

which is like a tilt brush clone.

You can draw and paint with your hands.

It's very performant at 90 frame per second.

It can draw in 3D space.

It's something that we demo a lot

'cause it's very easy for people.

It's very intuitive.

It's like your hands.

You paint and then people kind of get like a click

where then they start to realize

"Oh, I can paint in 3D and VR.

"I can paint forward and back.

"I can turn my head.

"I can walk around.

"Paint it from different angles."

So it's a very

fun and

accessible scene for people to use and try out.

It's also part of

what we use for


I guess the demo kit, right?

That's what we show off.

Here's another example

by Amnesty International UK.

It's called Fear of the Sky.

It's kind of a journalistic piece

where it shows off the (mumbles) bombings in Syria.

Another journalism piece by the Washington Post

took people to Mars.

There's this experience that one of the community has made.

Kieran Farr,

he made City Builder,

which is for the Vive.

He made this UI where you can

insert between different models

and just drop them to a scene

and build a city.

So he selects the streets, put them down,

put the houses down, people down.

Then he kind of simulated like a Space Invasions story.

It's kind of the same box.

It's a builder.

It's kind of experimenting these fun ideas.

People have done data visualization.

So this is one.

You can grab different facets and just pop them into a graph

and see the graph change real time right in front of you.

Grab the graph and stretch it.

This is kind of by a data visualization

person researcher in Georgia.

Here's another one we made that

we have part of our demo kit.

It's A-Blast.

It's kind of a more fun mini-game that we want to

show that the web can do things

that all the native games are doing right now.

We just kind of replicated a very common genre

and put it in the web to kind of show it off.

A-Frame is also used for prototyping.

KCL, also the Mozilla VR team,

created a bunch of UI widgets, levers, knobs, dials.

He made these components so you

can just drop all these in HTML

and with your hands you can just

basically be able to adjust sliders

and just add event listeners to get the values.

People have used it to make calculators in VR.

People are also using it for AR as well

and since A-Frame is just 3D rendering that's focused on VR,

what will happen,

using to experimenting with other stuff like AR or MR.

For those who don't know,

AR is augmented reality.

It's where you overlay


virtual 3D objects

and you find it in real life using a camera.

It's a lot harder because you have to

use computer vision to

keep the object in place.

You also have to track,

not only the rotation position of the phone or headset,

you have to,

yeah, keep an object in a certain place.

Everything is globally tracked.

If you walk away,

say you have an object on a table,

you walk away and come back,

the object should still be there in the same place.

We currently have an AR person

on Mozilla doing a lot of research

and let's see where it goes,

but it's still very early for AR,

doing this very early for VR in the first place.

But people do see this as being a bigger market,

but we'll see.

It's part of the interesting applications.

People have been building tools on top of A-Frame,

so kind of the Inspector but much more cleaner

and much more focused towards just building

scenes from totally just within the UI.

People have been using it for medical education.

So this is won by a medical researcher

in Washington State University.

He used leap motions so you can grab a heart and stretch it,

see all the organs.

Do tests, I mean quizzes,

things like that.

And, yeah.

The community of A-Frame has been growing very quickly.

It's an open-source project.

We try making it inclusive.

All the work is done on GitHub,


It's the active community on Slack.

If you go to,

you'll see all the information you need to get involved.

It appears lagging a bit

but I will try to navigate to there.

I think the VR scenes have bogged down in my laptop.

Okay, close that.

And before I close this last slide,

we have 125 contributors.

We almost have 5,000 Stargazers making it

the second most popular 3D open-source library on GitHub

and the most popular VR library on GitHub overall.

We have over 3,000 people on Slack

and we have featured hundreds of projects on the blog.

So close that,

hopefully, make that a little bit faster.


So here's the community page.

You get all the links to everything you need to know.

How to join Slack, our Twitter, our mailing list.

Which channel's appropriate to ask questions,

some local community quips that we know of,

who's who.

And, yeah.

You wanna get into A-Frame and start playing with it.

Just go through the docs,

go to our examples,

try building it yourself

and definitely run through the examples,

all these examples that we've run, the homepage.

So we have the

hello world.

It's up.

Hello world.

We have

this little terrible video,

but it's really cool, trippy animation team.

These demos down here are if you have chat controllers.

I think I will open up to Q and A.

So I'm slurrin' rollin' right now.


- Thank you Kevin for providing that.

That was great. (Female Host clapping)


- Awesome.

Are we on mute?

- Yeah, we are unmuted.

So I see you have access to Etherpad there, Kevin.

But if it's all right,

just in case your computer is lagging,

I'll go ahead and read off some questions for you.

We'll start off at the top.

What uses could have WebVR besides entertainment?

- Okay, yeah.

I went through a few examples.

Really the sky's the limit in VR.

I showed about some arts where you can

create things in VR in a 3D space.

That would be hard to do in a 2D space.

So that one was painting.

Say you're painting a model and you can

export that model to be used in any other scene.

People are doing sculpting in VR

rather than using tools like Blender or Cinema 4D,

rather than using a bunch of people

to apply some of these use complicated Uis,

it's much more intuitive.

It's just kind of sculpt and paint

with your hands on an object.

There's journalism which has been a very common used case

we've had as articles by NPR, Washington Post,

Amnesty International

which is great because it kind of transports readers.

It makes it more immersive and a lot more interesting.

People have been using it for investigative journalism.

People have been using it for data visualizations

to just put things in 3D for...

We have a demo of motion capture coming out

where you can record yourself and

replay it and use it for anything else.

So, and, obvious examples are also like social.

You can talk to people in VR.

We're trying to start looking at multi-player

for that WebRTC.

So you can see if someone else in the scene and talk to them

which is really cool because when you

move your hands around and just your head,

even though you can't see their face,

their body language's just...

You just feel like they're human

when you see their body language with their hands.

Even though

it's just like a box

with two boxes for hands,

you can tell it's someone else.

It's (laugh) really hard to

go through all the VR applications

'cause it's just too many.

For education.

It's something that people bring up,

like virtual field trips, some (mumbles).

Yeah, it's anything. (laughs)

Let me see.

Yeah, so, travel.

It can take you to other places, better places.

You can watch sports,

maybe in kind of front row seats.

People are trying.

Currently people are doing a lot at 360 videos

and boost the images

which is like a very easy way to get involved.

But personally,

I think it's not immersive enough, just 360 content.

I prefer people focus on doing very interactive scenes

that they can reach and grab

rather than just sitting around

just kind of looking around,

especially since 360 content is very low resolution

and there's no depth to it.

It doesn't feel real.

This is why

I would kind of

think twice about 360 content

even though the whole industry is currently doing that

and I think Michael put in a lot of them

(laughs) for these cases.

- Yeah.

I know it seems silly

and I'm a little bit of a science fiction nerd.

But there's a great book called Ready Player One

that was written awhile ago

and it talks about VR.

It takes place in the future

and there's many applications in there.

But you're right,

the opportunities are essentially endless.

Thank you.

It makes sense, Kevin. - Yeah, another one--

Yeah, I'll say another one.

For the web specifically,

good ones are journalism because

people don't want to install an app

just to read an article

or I guess it'll be

experience an article, in this case.


People don't want to install an app just to

experience some Joe's beef jerky store in VR.

The cool thing about e-commerce is...

Well, e-commerce is very hard because it's not just

putting an object in 3D and looking at it.

You have to bring value,

VR has to bring value to VR.

So that could be,

say you're shopping for a tent,

and you see your tent,

you see the scale of it in front of you

but also your whole surrounding is say in a desert.

So you can feel the context of where that tent is

and you can get inside it and kind of get more of

the emotional feel to it to fully connect, yeah.

Add context and it's also great for a promotional material.

- Well, I never actually thought about that one.

That's a great point.

Thanks, Kevin.

So moving on to another question,

if people are interested in contributing components,

where should they go to get an idea of what problems

might be useful to begin working on?

I think you might have touched on this in your presentation.

- Yeah.

So first taste before we add steps for that is

just scan the list of components

that we have on the awesome A-Frame,

so it's aframevr/awesome-aframe on GitHub.

It's just this long list of


things that people have done.

It's not up-to-date,

but it will show you a lot components that were done.

You also check the Registry.

See those components and see what hasn't been done

or look for components that we might have done

or other people might have done in their projects

but have not extracted it out into its own project.

Good things to do,

you can look at three.js.

Since A-Frame is a framework for three.js,

let's look at all the three.js features

and see what people haven't done.

So one recent one might have been a mirror component.

People were just asking for that

and someone just did a mirror component,

even though they haven't published it yet.

Or just whatever you're interested in.

What we might do is we might have a process

for wish list on the Registry reep-oh

or maybe we'll have a website.

Yeah, we'll see where that goes.

Currently we have about 20 components in the Registry

that we curated and

we still have yet to scale.

I still have yet to scale that

to more and more components.

- Great.

Thank you, Kevin.

Another question that we had come in.

In A-Frame,

can I create a new object for your shared library

without ever having to dive deeper under the hood,

perhaps by combining existing components together

to create a new object?

- So I guess you want to

combine existing components together

and then share that

bundled components so other people can use it.

So right now we have something called Primitives

which is kind of a box.

It's what A-Box, or A-Sphere, or A-Cylinder is.

It's just a bundle of components

that are encapsulated into one line of HTML

so then newbies can easily get involved

without diving under the hood.

It's something we're still kind of considering

'cause it kind of masks the true nature of A-Frame.

But the register parent of API is

an API that lets you do exactly that

which is take a bunch of components together

and ship it as a new HTML element.

Another option might be to create a component

that just sets a bunch of other components.

So you have a bunch of components

and you just put a component on top of that

that abstracts all these other components.

- Great, thank you.

When will we be moving, excuse me.

My screen just went a little funny.

Will we be moving to WebGL2 and 3JAS--

- What do you think (mumbles).

- So I apologize.

How will moving into WebGL2 impact A-Frame

and Three.js?

I believe is the question.


- Yeah.

So people are currently working on

the web GO2 renderer for three.js.

Once that happens and once it's future parity,

it's something that A-Frame can move to without...

That's something that A-Frame

developers will have to know about.

They're masked from all that churn.

We'll just swap out internally

and hopefully lasting changes

to developers on A-Frame.

We'll just have some extra features

and some group performance in some areas.

- Great, thank you.


do you mind reading out the next question for us?

My screen is still a little bit funny here.

- Oh, yeah.


I'm gonna stick to the one on line 20.

What is the state of MR like currently?

I don't know what MR is,

so maybe you could say that as well

and then I'll get back

to the long one. - Yeah.

- Absolutely, guys.

- So there's this class of XR

which is X-reality.

That's encapsulation of VR, AR, and MR.

So VR,

you completely surround the user in this virtual space.

AR is when you overlay virtual objects onto real life

and MR is kind of a mixture of both.

It's usually a term used in green screen compositing.

when you're filming someone in VR,

you green screen composite them such that

you see the person and you see

the virtual space behind them.

But it's also something that

HTC is coming out with, these trackers.

So there's these little

kind of small, little sticky ons

that you stick on to objects.

Like, say you have a ball and you stick on this tracker.

That object will now be tracked in a virtual space

so when I throw that ball around,

I can see it in virtual space but I can also feel it.

So that's kind of an MR thing.

And again, all of this is encapsulated under this term XR,

which may or may not become

popular in the future.

But people are starting to move towards the initiative.

It's called WinXR, so open VR.

But for now we focus on VR

since it's the most realistic

consumer thing that people have right now.

As far as I can tell,

AR seems like something that's off a bit in the future.

- Okay.

So the big question,

it looks like you and others have partially answered,

but you get the last word on this one.

So do we have a short, good,

and maintained list of awesome demos

that can be shown on different devices?

I'm thinking the answer to that might be

to subscribe to your weekly email of curated stuff,

but maybe you have a better answer as well

'cause everything goes outdated sooner or later.

- Yeah.

- Just the nature of our world, but, yeah.

- Yeah, things move very quickly

and websites go offline all the time.

The API moves forward.

Right now we're very experimental.

Excuse me.


The best way is to check A-Frame's Twitter.

We showcase all the latest and greatest

and that includes the A-Frame blog,

the weekly newsletter.

So just check that for the latest and greatest stuff.

Also A-Frame is there.

It needs more activity on curating it.

What I'm thinking is I need to just go through

just curate manually to the like the best

50 experiences


I'm confident in,

the best articles I'm confident in,

rather than just having it be

a dump of everything we see

'cause it's not useful for people

if it's not curated.

That might be something I need help on

which I've reached out to people for

for the, yeah.

That's great to be able to see in some environments.

Oh, also,

I really good list of WebVR demos in general,

the latest and greatest,

go to

This is someone that I'll

a list of things that someone else has been curating

and everything on this list looks awesome and works well.

It's very


Very visual website as well.

- So we have a question that came in.

Are there any VR analytics examples that you can provide

or any plans for future integration with analytics?

- So I saw someone listed Vertigo

which they've come to skoh-vah-neels before.

They do VR analytics.

Mostly, unfortunately, for 360 content.

So they just track where a user is looking

and they just create heat maps.

But for the web,

it's very easy since you have people in analytics.

Every time someone grabs an object,

you just fire a Google analytics event

or a time someone throws an object,

you can throw a Google analytics event for that as well.

It's the same thing really.

You're just working with data and you're sending off data.

It's not too different for analytics,

although we could use some helpers for

like say heat mapping.

That's a little bit harder.

But you can definitely check for engagement

using the events. (types)

- Great.

Are you currently aware of any examples of people

using VR in order to create heat maps for desktop websites?

- No, I don't think so,

not for creating heat maps for analytics.

- Okay.

- Vertigo might be doing something.

I think there's a little bit there

and the Etherpad's vertical dash WebVR.

They might have gained something,

but I haven't checked it out.

- How about 126, can you touch on that?

Here's another question that we have come in.

Do we know of any journalism-related examples

that do not use 360 photo or video?

- Let me think.

I don't think so yet because the issue is

VR is still very new and not

many people have a Vibe or Rift.

So people who are trying to release production content

have to target the lowest common denominator

which is Google Cardboard

which means you don't have much interactivity

which means it'll just most

likely be 360, photos, or videos.

That's just the nature right now

until VR becomes the mainstream

and until VR hardware

gets cheaper and more accessible.

- Great, thank you.

Well that appears to be all the questions

that we have in the Etherpad.

I'll check and do a quick check of IRC.

It looks like we've captured all those as well.


I wanna thank you very much for taking time

to update our tech speakers and tell them

a little bit more about what we have

in the pipeline here in Mozilla,

in terms of WebVR.

Is there a place if we think of

any questions moving forward?

Where's the best place to reach out to you at?

- Just ping me on Slack.

I think a good place, I'll ping like the teaching channel.

Hashtag teaching on slack


as I mentioned,

on the A-Frame community page,

you can find the sign up links for that

as well.

- Okay.

That's great, Kevin.

Thank you so much, again.

- Manel,

did you have - No problem.

- Anything else coming in, Manel,

that we assist? - No.

- Okay, just checking.

Thank you, awesome.

All right, everybody.

- All right, thanks.

- Thanks a lot, Kevin.

The video will be transcoded probably

over the next several hours.

We will share the Air Mozilla link.

We will also get transcript and captioning available

for viewers who didn't get

the chance to watch the live stream.

All that bit coming your way

over the coming days.

Thanks a lot!

- Thanks so much.

- Thank you.

- Be thrilled.

- Thanks.

- Un-rocking the virtual web.

- The virtual web, well said.

- Yeah, get involved.

- We were slapping hands, everyone.

- Yeah. (Kevin laughs)

Awesome, all right.

Till next time,

see you all in the channels.

Ciao, bye.

- Bye.

Small (640x380) Big (896x504)

WebM (HD) , Mpeg4 (HD)
Transcript: Plain text, SRT, WebVTT, DFXP/TTML

To download, right-click and select "Save Link As..."


Loading comments. Please wait…

You must be signed in to post comments.