DEV Community

Adventures in Angular

AiA 151: WebVR with Aysegul Yonet

AiA 151: WebVR with Aysegul Yonet

The panel for this episode of Adventures in Angular is Alyssa Nicoll, Joe Eames, Lukas Ruebbelke, and Charles Max Wood. Special guest Aysegul Yonet is here to discuss WebVR and visualizations. Tune in to learn more!

[00:02:36] Can you really do VR with Angular?

Yes. VR is a different kind of API.

[00:03:07] Can you give a brief explanation of how Web VR works?

Web VR is currently an experimental API. It creates 3D experiences that interact using the gamepad API. Angular and Web VR work together by writing more declarative experiences.

[00:04:05] What do you mean by it being experimental?

Things are changing quickly. Not all browsers are implemented. It has to be enabled in Chrome, it can be enabled in Firefox, but not all other browsers implement it. A 2.0 Web VR version is being created, which will be similar to the version that is out now.

[00:05:05] VR in a Predictable Manner

Not enabled in some of the browsers but can check it and leave a message. Once you have an available browser, there is a consistent interaction.

[00:06:30] What kind of hardware is required to run the VR experience?

VR is now very accessible to everyone because of Web VR. Google Cardboard is one of the cheapest ways. It is around $20. Samsung VR headset is free. Also can purchase cheap hand controls. Developers do not have to go through app stores to release a product, which makes it cheap for them as well.

[00:08:30] What are three cases that you see Web VR that could be disruptive?

One case is in the education field. Google Expedition is creating an app for teachers to create experiences for students to see different places such as museums. A second case is in the medical world. Web VR can be an amazing pain killer. It has been used in Leukemia patients. For example, kids don’t want to take medication but using VR they can fight the disease itself. A third case is the Smithsonian Museum in DC. Artwork was scanned through VR and 3D experiences created through that.

[00:14:35] Where would you recommend we start to try out VR?

A-Frame is the easiest to use for beginners. You don’t need to know how to use 3D. It has Angular components. There is also Play, where you can take any experience you want and work off of that. Sketchfab is an app where you can use 3D models. There is also a Google app that takes 360-degree 3D pictures and turns them into experiences.

[00:16:44] Would those 3D pictures have sound or just an image?

Yes, it does have sound as well.

[00:17:52] Does A-Frame have components that you feed data to?

It is just like any kind of Angular component. It seems foreign to web developers because you are creating a scene. But A-Frame makes it easy for you: just have to add the objects itself. You have components for a scene.

[00:19:14] How do you program the interactions with objects in Angular/Web VR app?

Interactions are not the easiest to program. Trying to solve the problem itself. You can take data through the Gamepad API. You can also use Itracking where you look at an object and select it.

[00:20:14] How long have you been doing this?

Not long - she was “dying to work with WebVR.” She had a chance to work with Play and had fun.

[00:21:00] Could I built a desktop app with Electron? Will it work in Chromium?

Yes.

[00:21:20] Will it work in the embedded Safari or Chrome Views that you get on Android or the iPhone?

Not sure. But it can be loaded unto a website and downloaded onto your phone.

[00:23:00] Fairly approachable if you have a SmartPhone.

MergeVR has a Goggle and Cube. It can create VR experiences for kids. The product is affordable: only $60 for Goggles and the Cube is $20.

[00:24:20] How do you test it?

Hard to test because it is visual based. There is a Chrome plug-in that helps. The mapping is very mathematical, which is an easy part to test.            

[00:25:30] Is there anybody in the WebVR space that you admire?

A-Frame team has done a great job. The 3JS creator Mr.Doob has been developing for a long time, before the community there is now. Companies have been using his stuff for years. Brandon Jones, who is implementing WebVR on the Chrome team.

[00:34:47] How is VR development different from web development?

Other than the interaction, writing the code isn’t all that different. The tool used was created for websites with 3D capabilities. Usability is different. There is an adjustment curve with VR: people navigate VR with a mouse better than with a headset.

Picks

Lukas:

Charles:

Joe:

Aysegul

Links

Episode source