Avatar Studio

Overview

Avatar Studio is the browser-based 3D design and configuration suite in the Asiyst Dashboard. It allows product designers, marketers, and developers to customize character appearance, test animation transitions in real time, and publish production-ready asset bundles.

Studio Interface Walkthrough

1. Left Navigation Panel:

   - General: Avatar name, internal tags, and project bindings.

   - Appearance: 3D model selection, scale slider, rotation offset, and shadow strength.

   - Animations: State-by-state animation track bindings.

   - Lighting: Studio lighting presets (Natural Sunlight, Cyberpunk Neon, Minimal Studio, Dark Mode Warm).

1. Center 3D Viewport: An interactive WebGL canvas allowing 360-degree rotation, zoom, and animation playback scrubbing.

1. Right Inspector Panel: Real-time state switcher to trigger idle, walking, talking, listening, and thinking animations on demand.

Real-Time 3D Viewport Controls

• Orbit / Rotate: Click and drag with the left mouse button.

• Pan Viewport: Click and drag with the right mouse button (or hold Shift).

• Zoom In / Out: Scroll mouse wheel or pinch on trackpad.

• Reset Camera: Click the target reset icon in the top-right viewport toolbar.

Appearance, Lighting & Material Tuning

• Scale & Anchor: Adjust how tall the character stands relative to the host webpage (default scale: 1.0 = ~140px on desktop screens).

• Shadow Quality: Enable soft contact ambient occlusion shadows beneath the avatar's feet for grounded depth.

• Environment Maps (HDRI): Select from 6 studio HDRIs for realistic material reflections on metallic and glossy surfaces.

Publishing & Version Control

Whenever you adjust materials or animation tracks:

• Click Save Draft to test locally without affecting live production traffic.

• Click Publish Changes to generate an immutable release bundle (e.g. v1.4.0). The edge CDN propagates updates worldwide in under 15 seconds.