AI QR Code Image Target with 8th Wall WebAR

đź’ś Made with 8th Wall
1

Screenshot 2025-05-05 at 11.42.00 AM
Screenshot 2025-05-05 at 11.42.00 AM283Ă—472 67.4 KB

In this project, I created a custom image target that also acts as the entry point to a WebAR experience—via a scannable AI-generated QR code.

:thread: Reference project visuals & build threads:

:link: Step 1: Create a Custom QR Code

I started with the 8th Wall WebAR project link, then used QRCode-AI.com to generate a visually styled QR code. This makes the code both functional and visually aligned with the final AR design.

Alternatively, for more control and cleaner results, you can create your own QR code art using tools like ControlNet. Here’s a great reference thread:

:brick: Step 2: Build & Align Your AR Content

The AR content was designed and animated in Blender. I made sure to match the proportions of the animation and 3D elements to the size and layout of the generated QR code image target.

To enhance depth and visual fidelity in AR, I used a hider material to simulate parallax occlusion—making parts of the scene appear to pass behind the image target.