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
Products
Course
Section
Coding Your First WebXR AR App
Coding Your First WebXR AR App
AR on the Web Masterclass: from Zero to Expert
Buy now
Learn more
This section is
delayed by 0 days.
Intro and FAQs
Intro to the course
How to get in touch and how to get support
This section is
delayed by 0 days.
Introduction to WebXR
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
This section is
delayed by 0 days.
What is WebXR?
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
This section is
delayed by 0 days.
Sample Code and Developer Environment
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
This section is
delayed by 0 days.
Coding Your First WebXR AR App
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
This section is
delayed by 0 days.
Application GUIs
Creating a basic GUI
Advanced GUI options
Measuring frame rate
This section is
delayed by 0 days.
Debugging
Debugging on desktop
Debugging on mobile
This section is
delayed by 0 days.
3D Models
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
This section is
delayed by 0 days.
Animations
Basic object animations
Animations using Tween.js
Animations around an orbit
Basic 3D model animations
Advanced 3D model animations
This section is
delayed by 0 days.
User Interactions
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
This section is
delayed by 0 days.
Images and Video
Images in AR
Transparent images
Video in AR
Transparent video in AR
This section is
delayed by 0 days.
Spatial Audio
Basics of spatial audio
Your first spatial audio app with Resonance library
Spatial audio with Three.js
Adding creative audio with Tone.js
This section is
delayed by 0 days.
Lighting
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)
This section is
delayed by 0 days.
Other Advanced Topics
Camera position and rotation
Image targets (Android)
Image targets with models (Android) - Code sample
Raycasting to select objects
Drawing in AR
This section is
delayed by 0 days.
Multiplayer AR
Intro to websockets and socket.io
Your first message between server and client
Multiplayer AR
This section is
delayed by 0 days.
Future of Web AR
Other AR libraries
Future of WebXR
9 Lessons
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