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!
Views since archived: 91
- 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.
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 aframe.io.
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,
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.
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.
to the VR sensor data.
So that includes post,
which is position and rotation of the headset,
which means how big your room is,
where the floor is.
Also attached to the API related
are also controller and gamepad,
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
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 webvr.rocks.
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
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.
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.
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
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
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.
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
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
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,
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
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
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,
and they can do anything.
There are mixtures of three.js, DOM APIs,
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
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.
(types) One second,
let me fix my
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
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.
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 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.
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 aframe.io/community,
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,
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
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)
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,
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.
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.
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.
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.
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.
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.
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.
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.
Thank you, Kevin.
Another question that we had come in.
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
I believe is the question.
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.
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.
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.
- 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.
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
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.
I really good list of WebVR demos in general,
the latest and greatest,
go to VRlist.io.
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.
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)
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.
- 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
That's great, Kevin.
Thank you so much, again.
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.
- 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.