Introduction to Web AR development by HiuKim Yuen

Ready to bring digital objects into the real world using just a web browser? This course dives into creating Web AR applications, meaning no app downloads are needed – just a URL. You’ll learn to build everything from cool image effects and face filters to interactive world effects, making your web projects more engaging than ever.

🎯 What you’ll learn

• Build various Web AR applications like Image Effects, Face Effects, and World Effects.
• Understand the fundamentals of how Augmented Reality works within web browsers.
• Master WebXR, mind-ar-js, and three.js for creating web-based AR experiences.
• Integrate machine learning models with tensorflow.js for interactive AR.
• Explore other key libraries such as AFRAME, model-viewer, and commercial SDKs.
• Learn effective debugging and simulation techniques to speed up development.
• Gain a solid understanding of current and future web AR technologies.
• Develop and publish an online AR portfolio to showcase your skills.

✅ Requirements

• Skills: Basic knowledge in HTML, JavaScript, and CSS.
• Hardware: An Android or iOS device.

📝 Description

This is the most comprehensive guide to developing web-based augmented reality applications. Web AR is awesome because it’s cross-platform and doesn’t need any app installation – they’re just regular web pages that run in standard web browsers.

You’ll learn how to use the MindAR open-source library for building Image AR and Face AR effects. MindAR is the successor to AR.js, which was super popular globally. Plus, you’ll dive into using the WebXR API for building world AR effects. WebXR is a native browser API designed for immersive AR and VR experiences.

We’ll also cover integrating tensorflow.js machine learning models into your AR applications to create highly interactive and interesting effects, like using hand gestures or facial expressions to control AR content. You’ll also get started with three.js, the most popular 3D rendering framework.

Other important web AR technologies like AFRAME, model-viewer, and commercial AR SDKs will be covered too. Beyond just practical development skills, you’ll grasp the theoretical side of how AR functions within a browser environment.

The course material is structured really well. Each lecture focuses on a single concept, making it easy to reference later. All the sample source code is clean and well-explained. You’ll also tackle three practical assignments, one for each type of tracking effect. One assignment even involves creating and deploying a real online AR portfolio for yourself. We’ll also share useful development tips, including remote debugging tools and webcam mocking techniques.

🧑‍🎓 Who this course is for:

• Web developers looking to add AR capabilities to their projects.
• AR Enthusiasts wanting to build experiences without native app development.
• Anyone interested in learning WebXR, MindAR, or three.js.

🧑‍🏫 About the Author

HiuKim Yuen is a graduate of McGill University with a degree in Computer Science, specializing in Machine Learning. He’s also a former Google software engineer. In recent years, he’s focused heavily on web-based augmented reality. HiuKim is a major contributor to the open-source web AR community, including projects like AR.js and MindAR.

🏁 Final Result

• You will complete three practical assignments, including creating and deploying your own online AR portfolio to showcase your newly acquired skills.