All Courses

Introduction to Web AR development

Introduction to Web AR development

With webXR, mindAR, three.js, and tensorflow.js, you can make things that look like they’re real, like a picture.

What you’ll learn

Introduction to Web AR development

  • Learn how to build different types of Web AR apps, like Image Effects, Face Effects, and World Effects.
  • Begin to learn about how AR works in web browsers.
  • Use WebXR, mind-ar-js, and threejs to make web AR apps.
  • Learn how to use tensorflowjs to combine AR with machine learning models and build interactive experiences.
  • Get to know other important web AR libraries, such as AFRAME, model-viewer, and commercial SDKs, such as how they work.
  • Learn how to use effective tools for debugging, simulating, and mocking to speed up development.
  • Then, learn about all the different types of web AR technology that are available now or in the near future, and when to use them.
  • Build and put up an online portfolio of your own AR work.


  • HTML, javascript, and CSS are some of the things you should know.
    A person who owns an Android or iOS phone


This is the most complete guide to making web-based augmented reality apps. Web AR is different from other types of AR because it’s cross-platform and doesn’t need an app to be installed. The web pages are just regular web pages that are run by regular web browsers.

What will you learn

  1. There is a MindAR open-source library that you will learn how to use in this course. You will learn how to use it to make Image AR effects and Face AR effects. MindAR is the successor to AR.js, which is the most popular free AR library in the world. You can use MindAR to make AR games and apps for free.
  2. There’s also a WebXR API that you’ll learn about. You can use this to make world AR effects. WebXR is a native browser API that lets you make immersive AR and VR effects that look good on a browser.
  3. You will also learn how to use tensorflow.js machine learning models to make AR apps more interesting and interactive. For example, you could use hand gestures or facial expressions to control the content in AR.
  4. You will also start the process of learning three.js, which is the most popular way to make 3D models.
  5. AFRAME, model-viewer, and commercial AR SDKs will also be talked about in this course.
  6. In addition to learning how to write code, you will also learn about how AR works in a browser.

The structure of a course is

The course material has been carefully thought out. Each lecture is very modular, which makes it easy to look up any references in the future. All of the sample source code is clear and easy to understand.


Then, you’ll have to do three practical assignments, one for each type of tracking effect you learn about in class. It’s one of the assignments for you to make and show off a real online AR portfolio for yourself, which you can show off to other people.

Development Tips

Useful development tips will be covered, including remote debugging tools and webcam mocking techniques.

Who this course is for:

  • People who work on the web.
  • People who love AR.
  • WebXR, MindAR, or three people who like JS

Introduction to Web AR development