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 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 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.