WebXR Academy/AR on the Web Masterclass: from Zero to Expert

  • $95 or 4 monthly payments of $25

AR on the Web Masterclass: from Zero to Expert

Our premiere course with all the lectures in the intro class plus advanced content to help you create the most cutting-edge, interactive AR web apps using Three.js and WebXR.

Take a peek by watching our preview videos.

Course description

This course includes everything you need to know to go from an AR beginner to an advanced WebXR and Three.js developer. You'll learn how to create interactive experiences with AR on the web, as well as advanced techniques such as the usage of image targets, multiplayer techniques, shadows, touch gestures, spatial audio, and much more.

Previous knowledge of Javascript will be helpful, but the code samples and lectures are fully documented to help you pick up new skills no matter where you are in your AR journey. 

Learning goals:

By the end of this course you know how to build simple and advanced experiences on the web. The code lectures and samples are structured such that you will be able to combine them and remix them for your needs to create ever-more sophisticated apps.  Specifically you will learn how to:
  • Load and display objects and models in AR
  • Animate objects and models
  • Work with different types of 3D models
  • Use touch gestures to provide interactivity
  • Use the WebXR API
  • Debug AR apps
  • Add GUI interfaces for interactivity
  • Create advanced animations including the addition of user interactivity
  • Perform hit testing to put objects on surfaces
  • Use image targets
  • Use lighting and shadows in convincing ways in AR
  • Use 3D spatial audio for immersive experiences
  • Create multiplayer apps
  • And much much more!

Our commitment to you:

If there's anything missing in the content that you'd like to learn, just get in touch and we'll add additional videos and code samples to support your learning journey.

Code samples

More than 38 code samples are included as part of the lectures. And you have access to any additional lectures and samples we upload in the future. 

Lectures

Intro and FAQs

Intro to the course
Preview
How to get in touch and how to get support
Preview

Introduction to WebXR

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

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

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

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
Preview

Application GUIs

Creating a basic GUI
Advanced GUI options
Measuring frame rate

Debugging

Debugging on desktop
Debugging on mobile

3D Models

Adding 3D objects
Preview
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

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

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
Preview
Bonus: Hit testing - Moving model - Code sample
Bonus: Hit testing - Single placement - Code sample

Images and Video

Images in AR
Transparent images
Video in AR
Transparent video in AR
Preview

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

Lighting

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

Other Advanced Topics

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

Multiplayer AR

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

Future of Web AR

Other AR libraries
Future of WebXR

Testimonials

Don't take our word for it! See what other students have said.

Be the first to know!

Get course updates, discounts, and more by joining our newsletter.

You're signing up to receive emails from WebXR Academy