Intro to Augmented Reality on the Web: WebXR and Three.js

Name: Intro to Augmented Reality on the Web: WebXR and Three.js
Rating: 4.3 (448 reviews)

Learn how to code and run augmented reality WebXR experiences on iOS and Android

Created byWebXR Academy

Last updated 3/2024

English

GermanEnglish

What you'll learn

How to create augmented reality apps on the web (that work in the browser with WebXR)
How to run WebXR apps on iOS and Android devices
The basics of programming with ThreeJS, a 3D javascript library
How to render different types of shapes and models in AR, with and without animations
How to add touch gestures in AR

Course content

5 sections • 28 lectures • 2h 40m total length

Intro to the course2:59
Your first experience with web AR on mobile iOS5:06
Learn how to run WebXR experiences on mobile iOS.

Steps:
Check that you have an iOS device that is capable of running ARKit
Download the "WebXR Viewer" app on your iOS device
Go to the Three.js WebXR Cones example within the WebXR Viewer app
Your first experience with web AR on mobile Android2:42
Learn how to run WebXR experiences on your mobile Android.

Steps:
Check that you have an Android device that can run ARCore
Open the Chrome browser on your Android device
Go to the Three.js WebXR Cones example within the WebXR Viewer app and click "Start AR"
Your first experience with web AR on desktop5:53
NOTE: The newest version of Three.js seems to have broken the "right click tap" on the extension in this cones example. Please see resources for a link with a fixed version to test it out.

Learn how to run and debug WebXR experiences on our desktop computer before trying them on mobile.

Steps:
Download the WebXR API Emulator for Chrome or Firefox
Go to the Three.js WebXR Cones example
Open Developer Tools (On Chrome: View > Developer > Developer Tools) on your browser and select the menu within the Developer Tools that says "WebXR"
Change the device used within the extension to "Samsung Galaxy S8+ (AR)"
Reload the Three.js WebXR Cones examples and click on the button "Start AR"

What are the benefits of AR on the web?3:19
Learn how WebXR enables instant deployment of AR and VR on the web with a single JavaScript, HTML, and CSS code base across devices and headsets, powered by WebGL.
What is the WebXR API?4:20
Explore what the WebXR API is within the landscape of web APIs, including browser support, open development in the W3C Immersive Web Group, and AR and VR use cases.
How does WebXR work?7:00
Explore how WebXR detects device compatibility, manages AR/VR rendering and sensor permissions, enables touch and controller inputs, and provides six degree of freedom tracking from the origin.
What is Three.js?2:00
WebXR application lifecycle3:55

Setting up the developer environment and code examples6:21
Learn how to use Glitch.com, the coding environment for this class, as well as access the example code for this class. If you don't want to use Glitch, you can also download a zip file with all the source code in "External Resources".

Steps:
Open our class project page on Glitch
Click "View Source"
You should now see the source code for the examples. Now click on "Remix to edit" on the top right
Now you should have your own Glitch project that you can edit. Click on "Show > In a New Window" to try the examples out in your browser
Use that same link to try the examples on your mobile phone
Creating a basic Three.js scene5:24
Adding a camera to the scene4:51
Adding a cube to the scene2:51
Define a box geometry and a basic material with a hexadecimal color, then create a cube mesh and add it to the scene. Ensure an animation loop renders the scene.
Adding a renderer to the scene2:59
Creating an animation loop2:07
Create an animate function to establish a 60 fps animation loop with the renderer, and implement a render function to render the scene with a camera and a cube.
Three.js coordinate system3:11
Adding a light to the scene2:21
Add a hemispheric light to your Three.js scene to improve lighting, using sky and ground colors and a set intensity, then position it and attach it to the scene.
Adding a more complex shape to the scene4:11
Converting the scene to AR using WebXR5:14
Convert a basic three.js scene into a WebXR AR experience by importing AR Button, enabling renderer.xr, and using a start AR button to begin a supported, HTTPS-secured WebXR session.

Adding 3D objects to the scene8:33
Add more objects to a Three.js WebXR scene by introducing torus geometry alongside a polyhedron, then customize geometry, color, and position to place them in the AR scene.
Adding a 3D model to the scene16:41
You can find a lot of 3D models, some free, at SketchFab (see Resources)
Animating 3D objects9:33
Rotate and animate 3D objects in a web AR scene using Three.js, updating mesh rotations in a 60 fps render loop with Euler angles in radians.
Animating a 3D model7:19

Adding touch gestures14:42
Add touch gestures in web AR by using Three.js controllers to detect taps, map 2D taps to 3D positions, and place oriented cones at the tap points with random colors.
Hit testing part 1 - Setup6:21
Learn hit testing in WebXR to place virtual objects on real surfaces using a reticle and hit points with 3D position and orientation.
Hit testing part 2 - Hit test source and reference spaces8:29
Perform hit testing in two steps: initialize a hit test source from the viewer space, then cast a ray using local space to intersect the floor.
Hit testing part 3 - Placing a reticle on a surface5:27
Run a hit test each frame to get results, use the closest pose to place and orient a reticle on a surface, and hide it when no surface is detected.
Hit testing part 4 - Placing virtual objects on surfaces6:44

Requirements

Students will find it helpful to have previous web programming knowledge (javascript, css, html) but otherwise no previous experience with WebXR or ThreeJS is needed
Students should have an iOS or Android mobile device

Description

INTRODUCTION

Augmented reality has the potential to become massively adopted on the web, where users don’t have to download apps or make sure they have the latest hardware. WebXR is one of the newest, official web APIs that allows developers to create VR and AR experiences using Javascript.

Don’t miss out on being one of the first developers to be well-versed in a technology that will be all over the web soon. Within less than an hour you could be creating your own AR experiences on the web!

SUBTITLES

English closed captions have been manually transcribed and are high quality.
Subtitles available in Spanish, French, Italian, Polish, Portuguese, German, Simplified Chinese, Traditional Chinese, Korean, Hindi, and Turkish.

CONTENT

By the end of this course you will know the basics of how to create simple augmented reality experiences on the web and a basic understanding of how to design and code 3D experiences. Each lecture includes sample code and external link examples to support your learning.

Specifically you will learn how to:

Create basic AR apps on the web using WebXR
Use a powerful 3D library called Three.js used by millions of applications on the web
Load and display 3D objects and models in AR
Animate objects and models
Positioning and rotation in AR
Work with different types of 3D models
Use touch gestures to provide interactivity
Convert any Three.js application into an AR app
Test WebXR experiences on your desktop, iOS, or Android devices

PREREQUISITES

While you will find it useful to have some previous Javascript and web programming knowledge, the class can be followed by absolute beginners as the coding environment is simple and the code examples are set up with many comments and explanations. If you don’t know anything about 3D environments, augmented reality, Three.js or WebXR then this class is for you.

While you can prototype WebXR using any desktop computer, to simulate real mobile AR you want to have either an iOS device that supports ARKit (most phones or iPads after 2017) or an Android device that supports ARCore (most phones after 2016).

ABOUT US

We are a coding school specializing in the exciting new technology of augmented reality on the web. No more downloading of apps or cumbersome coding in Swift or Java, just create your AR app in Javascript, HTML, and CSS and make it available painlessly to millions of people all over the world.

Who this course is for:

Web programmers
Front-end developers
AR or 3D enthusiasts
WebXR or ThreeJS enthusiasts
People interested in learning about the cutting-edge world of augmented reality on the web

Intro to Augmented Reality on the Web: WebXR and Three.js

What you'll learn

Explore related topics

Course content

Introduction to WebXR4 lectures • 17min

The WebXR API5 lectures • 21min

Coding Your First WebXR AR App10 lectures • 40min

3D Models in AR4 lectures • 42min

Interactions in AR5 lectures • 42min

Requirements

Description

Who this course is for: