
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
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"
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"
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
You can find a lot of 3D models, some free, at SketchFab (see Resources)
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.