MiniTalk: Ember + VR: Bring Your A-Frame
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 28 | |
| Author | ||
| License | CC Attribution - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/33660 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | |
| Genre |
EmberConf 20172 / 28
9
13
14
16
17
18
23
24
00:00
Frame problemVideoconferencingCodeSpherePrice indexComponent-based software engineeringCylinder (geometry)Plane (geometry)Computer-generated imageryLink (knot theory)NumberLibrary (computing)Wrapper (data mining)Sampling (statistics)Link (knot theory)Default (computer science)CodeConnectivity (graph theory)Core dumpWritingComputer animation
01:01
Link (knot theory)Computer-generated imageryAreaWebsiteUniform resource locatorMathematicsRoutingComputer animation
01:11
Query languagePosition operatorOrientation (vector space)VideoconferencingComputer animationLecture/Conference
01:16
Orientation (vector space)Game theoryPhysical systemDemosceneWeb pageComputer animation
01:24
RoutingQuery languageComputer animation
01:31
Fibonacci numberFunction (mathematics)Component-based software engineeringLibrary (computing)Structural loadTask (computing)Connectivity (graph theory)BitSampling (statistics)Template (C++)Frame problemPrimitive (album)Food energyConcurrency (computer science)Macro (computer science)Computer animationXML
02:14
Default (computer science)Cylinder (geometry)Coordinate systemCodeMacro (computer science)Scheduling (computing)CASE <Informatik>Electronic mailing listConcurrency (computer science)HierarchyLevel (video gaming)SimulationTemplate (C++)RoutingMenu (computing)Query languageWebsiteEmailWeb browserContent (media)Uniform resource locatorWeb 2.0Object (grammar)DemosceneNetwork socketServer (computing)Socket-SchnittstelleAsynchronous Transfer ModeCellular automatonMultiplication signComputer animation
03:32
RoutingDifferent (Kate Ryan album)SpacetimeComputer animation
03:44
RoutingSet (mathematics)Computer animation
03:49
SynchronizationComputer animation
03:55
Active contour modelElectric generatorFreewareConnectivity (graph theory)Link (knot theory)Attribute grammarComputer fileNetwork topologySheaf (mathematics)Projective planeMobile appPatch (Unix)SpacetimeBuildingMultiplication signFrame problemState of matterServer (computing)Template (C++)TrailVideo gameReal numberPoint (geometry)Computer animation
05:10
Open sourceThread (computing)VideoconferencingCodeXMLUML
Transcript: English(auto-generated)
00:13
on the Ember CLI core team. I want to talk to you today about using Ember to build VR.
00:20
A-Frame is a VR library made by Mozilla. The best way to describe it is an HTML wrapper for 3JS and WebVR. Now, if only there was an ambitious tool to manipulate HTML. So let's see what A-Frame plus Ember looks like. Notice any differences?
00:41
No? That's because there are none. In this example, you can get all the benefits from Ember CLI and only write default A-Frame code. But when we start embracing the concepts Ember gives us is when it really starts to get fun. Here's a sample routing component up top.
01:00
It looks like a normal link, too. But when applied to VR, it allows us to go to new virtual areas in our site. If you can see the URL, you'll notice the route changing. In this video, the emphasis is on URL query params. They are tracking your position and orientation. This acts as a rudimentary save game system.
01:22
When I refresh the page, the scene is set up exactly the way I left it because of the route and query params. It's also insanely helpful when you're developing and using live reload. Component features can help us in VR. Here's a custom sky component.
01:41
It's responsible for fading out, changing the sky material, and fading back in. Let's step really quickly through the highlights. This is extending an A-Frame primitive component. This is a macro setting up the animation that fades out, then in. This is an Ember concurrency task
02:00
that swaps out the material in the middle of an animation. And this last bit fires both the animation and the Ember concurrency task. It's just a sample of what you can do with custom extended components in VR. Templates, especially a hierarchy of templates, is also useful for VR.
02:21
In this example, we take the concept of menu headers and footers and any content that lives in top level templates. And we relate it to objects in a scene that stay alive as we swap out child templates. This is our list of other people in a scene. It is always active in a top level template
02:40
as you change child routes. Now we can see other people browsing VR sites with you. I'm using a simple web socket server for a social experience. This also showcases VR mode on a phone. Macros and helpers work great for this use case as well. These two examples are equivalent
03:01
in that they build a coordinate string for you. Are you sick of hearing about it yet? Ember concurrency is also great when you're in a time-based simulation. Here are some examples I've come across. Updating query params with a reasonable interval is to not crash the browser.
03:22
Sending location data throttled over web sockets or WebRTC. And scheduling something to run, like we saw earlier, running code in the middle of an animation. So let's go back to the idea of social browsing. Here I've expanded the concept of browsing with other people to include routes being
03:41
different spaces for gathering. As you move between routes, you leave the old set of people and you join a new set, mingling in the new route. Or they can chase you through routes, like in this example. API synchronization. Last resort is to maintain a copied API.
04:03
A-Frame has components and attributes that I need to replicate. At first, I tried initializers that register components by inspecting the A-Frame API. It works in templates, but you can't extend them because there's no real file to import. So I went with build time file generation using Broccoli.
04:24
First I submitted patches to A-Frame to allow it to run in Node. And now you can use Broccoli file creator to create component files in Tree for add-on. This is all done in the add-on node, extracted away from you. If you want to join me on this journey,
04:40
the work is being done in an add-on called Ember A-Frame. You can just install this add-on in your project and you can have VR sections in your app. The project works, but it's still in its infancy. So there's lots of work to be done. If you're excited about VR, like I am, come say hi. Thank you. And that last link down there, if you
05:02
want to go all hang out in this space I built and crash the server, feel free. Thank you.