Introduction to Web AR development

Set up a web ar development environment with plain html and javascript, a text editor, and a browser. Run a server for testing and debug with console logs using remotejs.

Download and unzip the course attachment to access libs, assets, lectures, and lectures-start folders, and use the readme to map lectures to source code.

Learn browser-based ar by building a webgl scene with three.js, creating a box geometry and camera, then overlay a transparent canvas over a live video feed to render 3d objects.

This update explains migrating MindAR from global window imports to modular ES modules with import maps and a polyfill, covering version changes from 1.1.4 to 1.2.x and browser considerations.

Load gltf models into a web ar scene with three.js by importing gltf loader, adding gltf.scene to anchor, and refining lighting, scale, and position; use a promise-based loader helper.

MindAR handles multiple targets using detection and tracking, and the maxTrack parameter controls how many targets to track, enabling simultaneous display of two targets while balancing performance.

Animate 3d models in ar scenes using intrinsic gltf animations with a three.js mixer and clock delta, or apply extrinsic animation by updating rotation and other properties each frame.

Learn how to handle events in web AR by using anchor.onTargetFound and anchor.onTargetLost to start and stop animations for detected targets, with separate callbacks per anchor.

Implement spatial audio in web ar with three.js: load audio, create a listener and positional audio, attach to an anchor, set reference distance, and play/pause on target found or lost.

Learn to play video in an ar scene with 3js by loading a video, creating a video texture on a plane, and overlaying it on the target image with play/pause.

Learn to remove green screen in a web ar scene using a chroma material, align the video plane perpendicularly to the target, and adjust position and scale for popping-out effect.

Fix autostart for web ar by requiring user interaction to trigger the start function, using a button, and preloading video assets via an init flow to satisfy Safari autoplay rules.

Render HTML elements with CSS in web AR by wrapping a div with a CSS 3D object, attaching it to an anchor, and using the CSS renderer.

Explore two methods to play video in ar: video texture with an html5 video and iframe-based playback using css 3d object, demonstrated with a Vimeo embed.

Learn how to stream youtube videos in web augmented reality using the youtube player API to control video life cycle, start on detection, and pause on loss.

Customize the MindAR ui by disabling ui loading or ui scanning, or assign a custom ui id to enable lifecycle-driven display of a bespoke scanning screen.

Utilize the MindAR library to compile a target image and build ar experiences with multiple contents, animations, and interactions, then deploy a public online ar portfolio using GitHub Pages.

Quick start guides building a face-tracking ar app with MindAR, adapting from image tracking, and attaching a semi-transparent sphere to the nose tip via a 3d anchor.

Import 3d models into an AR scene by loading a glasses gltf, downscaling it with 0.01, and attaching to a facial anchor, highlighting the occlusion when the head tilts.

Explore how to solve the AR occlusion problem with an occluder: render a transparent virtual head before the glasses to hide underlying objects in a 3D scene.

Create and render a dynamically generated face mesh with the MindAR library, apply a texture as a transparent face mask, and continuously update its geometry and pose in real time.

Learn how to switch between the front and back cameras in mind ar using a simple switchCamera method activated by a button on an HTML/JavaScript page, enabling seamless face tracking.

Learn how to capture a photo, preview it, and share it via the Web Share API or fallback options, including URL sharing and press-and-hold techniques on mobile.

Explore world-tracking ar with the WebXR API, a native browser standard, and set up a development environment using the WebXR emulator in Chrome for desktop and mobile testing.

Bootstrap a WebXR immersive AR scene with three.js, set up a scene, camera, and renderer, and render a 0.3 meter cube via an AR button and DOM overlay.

Swap the custom start end button for a 3js ar button to manage the webxr session lifecycle, including import and renderer wiring.

Learn WebXR hit testing by projecting a ray from the device to detect surfaces and anchor virtual objects with a reticle that follows hit positions.

Learn to detect hand gestures with the fingerpose library on top of the hand pose model, recognizing wave, thumbs up, die, and jump to drive AR robot animations.

Integrate face api.js with MindAR to detect facial expressions in real time and display corresponding openmoji textures on a 3d plane using tensorflow.js.

Explore how aframe wraps 3js to build AR scenes with HTML, using a-scene and a-box, with embedded mode and access to 3js objects for WebXR and MindAR.

Learn how to enable WebXR in A-frame using the WebXR component, configure hit-test and optional features, and drive a reticle and a box with controller select in a WebXR scene.

explore model viewer, a google web component for viewing 3d models in plain html via a single script, with features like annotations, lighting, skybox, animations, and ar mode.

Explore no-code web ar hosted solutions that let you upload image target and add 3d content. Deploy via a studio with public url; hosting a static site is easy.

Outline the webAR pipeline and core technologies—WebGL, Wasm, glTF, 3D models, tracking engines like MindAR, WebXR, and TensorFlow.js—alongside key 3D frameworks.