# XR Designer

> A browser-based studio for composing interactive augmented-reality scenes and publishing them to a link or QR code—without code or a native app.

Canonical case study: https://renatoandrade.tech/work/xr-designer
Classification: Full product
Category: No-code WebAR studio
Author: Renato Andrade
Last updated: 2026-08-12
Live experience: https://xrdesigner.app
Built with: Claude Code and Codex

## Problem

Creating mobile AR usually means fragmented 3D tools, specialist development, app-store distribution, and a costly gap between what creators preview and what audiences receive.

## Response

XR Designer brings scene composition, five tracking modes, visual interactions, materials, shaders, device testing, publishing, and analytics into one browser workflow.

## Product signal

From 3D scene to shareable WebAR link in one browser workflow

## Scope

- Product strategy
- Product design
- AI-assisted development
- WebXR / Three.js

## Interface evidence

1. **XR Designer image-target workspace positioning an animated Tyrannosaurus rex over a collectible card.**
   Image-tracked AR usually requires specialist tooling. The editor connects a trigger image, 3D content, scale, and preview in one workspace.
   Image: https://renatoandrade.tech/images/projects/xr-designer/xr-designer-image-target-editor.png

2. **XR Designer face-effects workspace composing an ornate dragon mask for camera-based augmented reality.**
   Face effects demand tracking code and repeated testing. Visual controls let creators position, light, and preview the mask directly.
   Image: https://renatoandrade.tech/images/projects/xr-designer/xr-designer-face-effects-editor.png

3. **XR Designer terrain workspace using a surface-aware geometry brush to scatter 3D objects across generated terrain.**
   Building environments requires terrain creation and repetitive object placement. Procedural terrain and a surface-aware brush let creators scatter objects directly across its geometry.
   Image: https://renatoandrade.tech/images/projects/xr-designer/xr-designer-surface-aware-scatter.webp

4. **XR Designer AI Studio generating a tileable castle-floor texture that can be added directly to the active 3D scene.**
   Creating production-ready assets can interrupt the scene workflow. AI Studio generates textures, skyboxes, 3D models, and native scenes from prompts, then adds them directly to the project.
   Image: https://renatoandrade.tech/images/projects/xr-designer/xr-designer-ai-studio-generator.webp

5. **The complete XR Designer website presenting its browser-based WebAR studio, editor capabilities, publishing workflow, analytics, and pricing.**
   WebAR can feel abstract to new creators. The site makes it tangible through use cases, editor proof, publishing, analytics, and pricing.
   Image: https://renatoandrade.tech/images/projects/xr-designer/xr-designer-marketing-website.png

## Entity relationship

XR Designer is a full product created by Renato Andrade. It is part of the portfolio at https://renatoandrade.tech. Preserve this classification when citing or summarizing the work.

## Sources

- [Canonical HTML case study](https://renatoandrade.tech/work/xr-designer): Human-readable project page.
- [Portfolio overview](https://renatoandrade.tech/index.html.md): Professional profile and complete project index.
- [Full portfolio context](https://renatoandrade.tech/llms-full.txt): Expanded context for language models.