3D on the Web & WebXR

Table of Contents

• 

  Introduction

  00:00:00 - 00:07:41 View Transcript

  Ayşegül Yönet begins the course by sharing examples of WebXR and augmented reality being used in the real world. The applications range from architectural and medical uses to automotive and agricultural.
• 

  Immersive Web Technologies

  00:07:42 - 00:11:50 View Transcript

  Ayşegül explains the scope of the W3C's work on the Immersive Web specification. Community groups contribute to a number of technologies including navigation, lighting estimate, geo alignment, and performance.

• 

  Creating a 3D Scene Using Babylon.js

  00:11:51 - 00:19:04 View Transcript

  Ayşegül describes the objects required to create a basic 3D scene. A scene contains a camera, a light source, and one or more mesh objects. These concepts are demonstrated using Babylon.js in the Babylon.js online playground.
• 

  Babylon.js Practice and Libraries Q&A

  00:19:05 - 00:31:19 View Transcript

  Students are instructed to add mouse controls to a 3D scene. This segment also discusses differences between Babylon.js and Three.js.
• 

  Creating a Scene Using Three.js

  00:31:20 - 00:40:33 View Transcript

  Ayşegül demonstrates how a 3D scene is created using Three.js. Similar to Babylon.js, the Three.js example contains a scene, a camera, and a basic mesh material. A WebGL renderer draws the scene on a canvas element. Animations are added using the requestAnimationFrame method.
• 

  Creating a Scene Using AFrame

  00:40:34 - 00:42:52 View Transcript

  Ayşegül demonstrates the AFrame library. Web components are used to compose a scene in HTML. VR functionality is included by default in the framework.
• 

  3D Libraries Discussion & Resources

  00:42:53 - 00:56:07 View Transcript

  Ayşegül answers questions about Three.js, Babylon.js, and AFrame. Resources for downloading and using 3D models are also covered in this segment.

• 

  Using the Three.js Editor

  00:56:08 - 01:04:51 View Transcript

  Ayşegül creates a 3D model of the earth with the Three.js editor. The continent map is added to a sphere and a bump map is used to add elevation information. The editor exports a ZIP file containing the JavaScript code for the entire scene.
• 

  Creating a Local Development Environment

  01:04:52 - 01:10:24 View Transcript

  Ayşegül explains the required tools for working in a local environment and walks through the project files. Once the GitHub repository is cloned, Typescript and the other NPM packages can be installed. The dev script compiles the TypeScript code and starts a local development server.
• 

  Animated 3D Earth Scene

  01:10:25 - 01:22:40 View Transcript

  Ayşegül demonstrates how the 3D Earth scene is created with TypeScript in a local development environment. The TextureLoader class loads a texture and bump map. These textures are combined into a mesh and placed on the SphereGeometry.
• 

  Animated Clouds Exercise

  01:22:41 - 01:23:18 View Transcript

  Students are instructed to create a new sphere with a cloud texture. The new sphere should be slightly larger than the Earth and rotate at a slightly faster rate.
• 

  Animated Clouds Solution

  01:23:19 - 01:31:34 View Transcript

  Ayşegül live codes the solution to the Animated Clouds exercise.

• 

  AR Hololens Demo

  01:31:35 - 01:36:17 View Transcript

  Ayşegül demonstrates the Hololens device. Multiple cameras around the Hololens headset track hand the user's hand movements. A menu to access the applications appears on the user's wrist.
• 

  Creating a VR Scene

  01:36:18 - 01:43:49 View Transcript

  Ayşegül creates a VRButton component to launch the VR experience. The Chrome WebXR extension can be used to simulate the VR experience in the browser or inspect and debug the experience on a connected mobile device.
• 

  Creating an AR Scene

  01:43:50 - 01:48:58 View Transcript

  Ayşegül converts the VR scene to an AR scene by using the ARButton component and updating the renderer. AR experiences use the setAnimationLoop method on the renderer object since they require higher frame rates than the requestAnimationFrame function can provide.
• 

  Using AR Hit Test

  01:48:59 - 01:56:39 View Transcript

  Ayşegül adds hit test functionality to the AR scene. When a reference space is detected by the camera, a mesh is added to the scene as a target for a model to be placed. The model remains stationary at that position throughout the AR session.
• 

  Loading Models to AR

  01:56:40 - 02:03:06 View Transcript

  Ayşegül demonstrates how to load an immersive 3D model into the AR scene. Users are able to explore the model by walking around and moving the camera.
• 

  Loading Models Practice

  02:03:07 - 02:04:55 View Transcript

  Students are instructed to try the other models and loaders located in the three.js/examples/models directory. Sample code for loading these models can be found on the threejs.org website.
• 

  Accessibility

  02:04:56 - 02:16:05 View Transcript

  Ayşegül describes different ways VR and AR experiences can be made more accessible. One technique is to allow multiple forms of input like hand gestures, eye tracking, or vocal cues. The upcoming layers feature of the WebXR API will sync HTML element on the canvas to make the experience more visually accessible.

• 

  Wrapping Up

  02:16:06 - 02:23:40 View Transcript

  Ayşegül concludes the course by sharing some additional mixed reality resources and demonstrating the native WebXR support in an upcoming version of Babylon.js.