AR-activated stickers for Shape Reality.
The first sticker drop brings physical stickers to life with a WebAR experience built with 8th Wall & A-Frame.
A browser-based tool for generating 8th Wall image target files. Crop, resize, and grayscale a photo, test the image target's tracking, and download a ready-to-use .zip folder.
evanmcarlson/image-target-studio
AR-activated stickers for Shape Reality.
The first sticker drop brings physical stickers to life with a WebAR experience built with 8th Wall & A-Frame.
An interactive WebAR puzzle experience using 8th Wall & A-Frame.
Image target experience showcasing a dramatic reveal animation, enhanced with bloom postprocessing.
AR-activated t-shirt concept using 8th Wall & A-Frame.
When scanned, the shirt revealed a digital animation that seamlessly transforms the Balenciaga logo through the colors of the rainbow.
A physical-to-digital intervention provoking awareness around control of attention, identity, and reality. A WebAR layer transforms physical posters, shifting the viewer from passive observer to active participant.
Chroma key (green screen) shader applied to an image target in A-Frame, compositing video content onto a tracked physical target in WebAR.
An AR-activated t-shirt for the ctrl project. Scanning the printed design tracks an image target and composites chroma-keyed video onto the shirt in WebAR.
A scan-and-lock UI overlay for A-Frame image target experiences. Animated corner brackets snap onto the tracked target as it's found, with a sweeping scan line confirming the lock.
A-Frame example demonstrating GUI controls for manipulating scene properties in a WebAR experience.
Custom camera shader applied to a live feed in A-Frame, enabling real-time post-processing effects in WebAR.
Chroma key (green screen) shader for A-Frame, compositing video content into a WebAR scene.
Selective bloom post-processing effect in A-Frame, applying glow to specific objects in a WebAR scene.
Spline-based path animation in A-Frame, moving objects along smooth curves in a WebAR scene.
Example demonstrating how to embed a WebAR experience inline within a standard web page using A-Frame and 8th Wall.
Face occlusion in A-Frame using a head mesh to realistically hide objects behind the user's face in AR.
Real-time texture mapping onto a tracked face mesh in A-Frame, enabling face paint and mask effects in WebAR.
Face tracking example that locks a 3D object in a fixed position relative to the tracked face using A-Frame.
World-tracked AR experience in A-Frame where ghost-like objects are placed and persist in physical space.
Animated GIF textures applied to 3D geometry in A-Frame, bringing 2D animations into a WebAR scene.
Custom gradient shaders for A-Frame materials, creating smooth color transitions on 3D objects in WebAR.
Image target tracking example that overlays interactive stickers onto a physical target using A-Frame.
A-Frame WebAR experience featuring Mario and Luigi, demonstrating character animation and world tracking.
A-Frame example demonstrating opacity animation on 3D objects, creating fade-in and fade-out effects in WebAR.
A-Frame experience that randomizes and shuffles 3D object arrangements in AR, demonstrating dynamic scene composition.
Interactive transform controls for manipulating 3D objects in A-Frame — translate, rotate, and scale in WebAR.
A-Frame example offloading heavy computation to Web Workers, keeping the AR rendering thread smooth and responsive.
A plane tracked to an image target "disappears" by continuously repainting itself with colors sampled live from the camera feed at its own corners, blending into whatever surface or lighting it's placed on.
A custom Three.js rendering pipeline integrated with 8th Wall, demonstrating how to extend the default render loop.
Stencil buffer technique in Three.js that renders a 3D model selectively behind a masked region in WebAR.
Real-time mesh detection using the Raw API Toolkit (RATK) with Three.js and 8th Wall, surfacing geometry from the physical environment.
Plane detection using the Raw API Toolkit (RATK) with Three.js and 8th Wall, identifying horizontal and vertical surfaces in the environment.
A minimal example of loading and rendering a 3D model in a WebAR scene using Three.js and 8th Wall.
Post-processing effects pipeline in Three.js integrated with 8th Wall, applying full-screen shader passes to a WebAR scene.
A face tracking WebAR experience built in 8th Wall Studio, emitting animated hearts from the user's face.
A customizable loading screen implementation for 8th Wall Studio experiences.
A face tracking starter: a face-mesh texture, a 3D head occluder, and a forehead-anchored object, with built-in photo/video capture.
A collection of face effects — 3D glasses, face-mesh tattoos, and a head occluder — layered onto a tracked face.
A React-powered gallery of custom face materials — PBR skins, animated video textures, and custom shaders — swappable in real time.
A makeup face filter applying eyeshadow, eyelash, and texture maps onto a tracked face mesh.
Additive-blended face effects layering animated laser and mask textures onto a tracked face mesh.
Interactive virtual makeup with adjustable colors for eyeshadow, liner, lipstick, blush, and colored contacts.
A virtual makeup try-on with a color palette for eyeshadow, liner, lipstick, and more.
Blends face morph targets in real time, scrubbing through expressions with on-screen controls.
A samurai mask face filter with real-time environment reflections.
Physics-based dangly earrings that hang and swing from the ears, using face tracking and A-Frame physics.
An animated face filter with hanging earrings and morph-target expressions, driven by physics and face tracking.
Turn yourself into an elf — adds pointed ears, a hat, and makeup with tap-to-change skin tone. Take an "elfie."
An elf face filter with pointed ears, a hat, and adjustable skin tone.
A minimal starter for anchoring 3D content to the ears with face tracking.
A pirate face filter with a 3D hat and a physics-driven chain, using face tracking and A-Frame physics.
A physics mini-game where apples fall and bounce off your head, using face tracking and A-Frame physics.
A playful demo: open your mouth to eat a cookie, driven by mouth-open face events.
A "this or that" game that uses head rotation as input to choose between options.
Demonstrates face tracking events — reacting to mouth open/closed and tracking state — with an on-screen indicator.
A Pride face filter that spawns floating hearts and letters with real-time reflections, plus tap-to-place and camera swap.
Overlays a decorative frame onto the camera feed and bakes it into photo/video captures via the media recorder.
A face effects demo combining 3D glasses, a face texture, and synced background music, with photo/video capture.
A face filter demonstrating head occlusion with a top hat and video-textured surfaces.
A face tracking example that anchors a stylized 3D avatar to the user against a custom environment.
An abstract face filter that warps the face into a void using custom shaders and face tracking.
Plays a full-screen video effect triggered when a face is detected.
A custom-shader face filter with swappable eye, mouth, and head textures and a front/back camera flip.
A live demo of a forked A-Frame component for sprite-based particle effects — published to make it accessible to developers who need a working example out of the box.
Example code on implementing a WebView iOS app which launches an 8th Wall WebAR experience.
Immersal integration with 8th Wall.