AR on the Web Masterclass: from Zero to Expert
- Buy now
- Learn more
Intro and FAQs

Delayed 0 days

Intro to the course
How to get in touch and how to get support
Introduction to WebXR

Delayed 0 days

Your first experience with WebXR on mobile iOS
iOS: troubleshooting
iOS: what about Safari?
Your first experience with WebXR on mobile Android
Android: troubleshooting
Your first experience with WebXR on desktop
What is WebXR?

Delayed 0 days

What is the WebXR API?
What are the benefits of AR on the web?
How does WebXR work?
Sensors and 3D coordinate systems
What is Three.js?
WebXR application lifecycle
Sample Code and Developer Environment

Delayed 0 days

Sample code
Code downloading troubleshooting
Sample code zip
Assets and media folder zip (optional)
Sample multiplayer code
Sample multiplayer code zip
Developer environment and Glitch
Coding Your First WebXR AR App

Delayed 0 days

Creating a basic Three.js scene
Adding a camera to the scene
Adding a renderer to the scene
Adding a cube to the scene
Creating an animation loop
Three.js coordinate system
Adding a light to the scene
Adding a more complex shape to the scene
Converting the scene to AR using WebXR
Application GUIs

Delayed 0 days

Creating a basic GUI
Advanced GUI options
Measuring frame rate
Debugging

Delayed 0 days

Debugging on desktop
Debugging on mobile
3D Models

Delayed 0 days

Adding 3D objects
Adding a 3D model - Part I
Adding a 3D model - Part II
Adding a 3D model - Part III
Adding a GLB model
Adding an OBJ model
Adding an FBX model
Other 3D model formats
Hosting 3D models online
Debugging common model problems
View a USDZ model (iOS Safari)
Export a USDZ model
Animations

Delayed 0 days

Basic object animations
Animations using Tween.js
Animations around an orbit
Basic 3D model animations
Advanced 3D model animations
User Interactions

Delayed 0 days

Touch gestures in AR
Advanced touch gestures with Hammer.js
Hit testing - Part I setup
Hit testing - Part II source and reference spaces
Hit testing - Part III reticle on a surface
Hit testing - Part IV virtual objects on surfaces
Bonus: Hit testing - Moving model - Code sample
Bonus: Hit testing - Single placement - Code sample
Images and Video

Delayed 0 days

Images in AR
Transparent images
Video in AR
Transparent video in AR
Spatial Audio

Delayed 0 days

Basics of spatial audio
Your first spatial audio app with Resonance library
Spatial audio with Three.js
Adding creative audio with Tone.js
Lighting

Delayed 0 days

Lighting types
Basic lighting
Creating a ground plane
Shadows - Part I setup
Shadows - Part II casting and receiving shadows
Shadows - optional settings
Lighting estimation (Android)
Other Advanced Topics

Delayed 0 days

Camera position and rotation
Image targets (Android)
Image targets with models (Android) - Code sample
Raycasting to select objects
Drawing in AR
Multiplayer AR

Delayed 0 days

Intro to websockets and socket.io
Your first message between server and client
Multiplayer AR
Future of Web AR

Delayed 0 days

Other AR libraries
Future of WebXR

Hit testing - Part IV virtual objects on surfaces

Video links: