HoloScript Studio - Complete Reference

Version: 0.1.0-beta Tech Stack: React 19 + Next.js 15 + Three.js + WebXR URL: studio.holoscript.net

Overview

HoloScript Studio is a web-based IDE for building VR/AR/XR scenes without writing code. Powered by Brittney AI, Studio enables natural language scene generation, real-time collaboration, and one-click publishing.

Key Features:

🎨 AI-driven scene creation (Brittney assistant)
🖌️ Visual shader graph editor
🎬 Cinematic camera paths
🦴 Character animation editor
🤝 Real-time multiplayer editing (CRDT)
🚀 One-click publish & share
📤 Export to 25+ platforms

Interface Layout

┌─────────────────────────────────────────────────────────────┐
│  [Logo] [Creator][Artist][Filmmaker][Expert][Character]    │ Top Bar
│  [New][Open][Save][Publish][VR Mode][Benchmark]           │
├──────────┬──────────────────────────────────────┬──────────┤
│          │                                      │          │
│  Hierarchy│         3D Viewport                 │Properties│ Main Area
│  Panel    │      (WebGL/Three.js Render)       │  Panel   │
│          │                                      │          │
│  [Objects]│      [Transform Gizmos]            │ [Details]│
│  [Assets] │      [Grid & Axes]                 │ [Settings│
│  [Layers] │                                      │  Config] │
│          │                                      │          │
├──────────┴──────────────────────────────────────┴──────────┤
│  💬 Brittney AI │  [Prompt Input Bar]           │ [Send]  │ Bottom Bar
└─────────────────────────────────────────────────────────────┘

Top Bar

Mode Selector

Icon	Mode	Description	Shortcut
🎨	Creator	AI scene building, drag-and-drop	`Ctrl+1`
🖌️	Artist	Shader graph, material editor	`Ctrl+2`
🎬	Filmmaker	Camera paths, cinematic timeline	`Ctrl+3`
⚙️	Expert	Code editor (Monaco), debugging	`Ctrl+4`
🦴	Character	Animation editor, skeletal FK	`Ctrl+5`

Button	Action	Shortcut
New	Create new scene	`Ctrl+N`
Open	Load scene from file/URL	`Ctrl+O`
Save	Save scene locally	`Ctrl+S`
Publish	Generate shareable URL	`Ctrl+P`
VR Mode	Enter WebXR immersive mode	`V`
Benchmark	Run performance test (FPS)	`B`
Settings	Studio preferences	`,`
Help	Documentation & tutorials	`F1`

3D Viewport

Camera Controls

Action	Mouse	Touchscreen	VR
Orbit	Left Click + Drag	1-Finger Drag	Head Movement
Pan	Right Click + Drag or Middle Click + Drag	2-Finger Drag	Controller Stick
Zoom	Scroll Wheel	Pinch	Controller Trigger
Focus	Double-Click Object	Double-Tap Object	Look + Trigger

Transform Gizmos

With an object selected:

Key	Gizmo	Action
`G`	Move (Translate)	Drag colored arrows (X=red, Y=green, Z=blue)
`R`	Rotate	Drag colored circles
`S`	Scale	Drag colored boxes or center for uniform scale
`Esc`	Cancel	Reset to original transform
`Enter`	Confirm	Apply transform

Fine Control:

Shift while dragging = Slow precision mode
Ctrl while dragging = Snap to grid
Alt while dragging = Relative to parent

Grid & Axes

Grid: XZ plane, 1-unit spacing, fades with distance
Axes: Red (X), Green (Y), Blue (Z)
Origin: Yellow sphere at (0,0,0)

Toggle visibility: Ctrl+G (grid), Ctrl+H (axes)

Selection

Single Select: Left-click object
Multi-Select: Shift + Click
Box Select: Ctrl + Drag
Deselect All: Click empty space or press Escape

Brittney AI Panel

Opening the Panel

Click 💬 icon (right side)
Press Ctrl+B
Type / in viewport (quick prompt)

Chat Interface

Brittney understands:

Natural language scene descriptions
Requests for changes ("make the sky purple")
Technical questions ("how do I add physics?")
Debugging ("why isn't my NPC responding?")
Optimization ("make this faster")

Example Prompts:

Create a medieval castle with towers and a moat

Add a flying dragon that circles the castle

Make the dragon breathe fire when I click it

Optimize this scene for Quest 2

Export this to Unity with C# scripts

Scene Generator Tab

Describe your scene in the text area
Select templates (optional): Battle Royale, Escape Room, D&D Dungeon, etc.
Click Generate
Brittney creates HoloScript code
Scene renders in 3D viewport

Scene Critique Tab

Click Analyze Scene
Brittney evaluates:
- ✅ What works well
- ⚠️ Potential issues (performance, usability)
- 💡 Suggestions for improvement
- 🎨 Aesthetic recommendations
Click suggested changes to apply them

AI Material Tab

Select an object
Describe desired material: "holographic blue glass with rainbow reflections"
Click Generate Shader
Preview in real-time
Tweak parameters or regenerate

Hierarchy Panel (Left)

Objects Tree

Displays all scene objects in parent-child hierarchy:

📦 Scene
├─ 🌍 Environment
│  ├─ ☀️ DirectionalLight
│  └─ 🌫️ Fog
├─ 📐 Ground
├─ 🏰 Castle
│  ├─ 🗼 Tower1
│  └─ 🗼 Tower2
└─ 🐉 Dragon
   ├─ 🔥 FireBreath (ParticleSystem)
   └─ 🎵 RoarSound

Duplicate: Ctrl+D
Delete: Delete or Backspace
Rename: F2
Parent To: Drag onto another object
Unparent: Drag to root level
Hide/Show: H (toggle visibility)
Lock/Unlock: L (prevent selection)

Filters

Search: Ctrl+F - Find objects by name
Type Filter: Show only lights, cameras, meshes, etc.
Layer Filter: Show/hide by layer

Properties Panel (Right)

Transform

Position (X, Y, Z): World-space coordinates
Rotation (X, Y, Z): Euler angles in degrees
Scale (X, Y, Z): Uniform or per-axis

Reset buttons: Click ↺ to reset to default (0 for position/rotation, 1 for scale)

Object Properties

Name: Object identifier (used in code)
Type: Geometry type (box, sphere, cylinder, etc.)
Color: Base color (hex or RGB)
Material: PBR properties (metalness, roughness, emissive)
Visible: Show/hide object
Cast Shadow: Object creates shadows
Receive Shadow: Object receives shadows

Traits

List of applied traits with configuration:

@physics
  ├─ mass: 1.0
  ├─ bounciness: 0.5
  └─ friction: 0.8

@grabbable
  ├─ grab_distance: 0.5
  └─ two_handed: false

@llm_agent
  ├─ model: "claude-3-5-sonnet"
  ├─ temperature: 0.7
  └─ tools: [...]

Add Trait: Click + Add Trait button, search, configure

Remove Trait: Click X next to trait name

State

Custom object state (key-value pairs):

yaml

state:
  health: 100
  mana: 50
  inventory: []
  is_open: false

Add State: Click + Add State Variable

Creator Mode 🎨

Purpose: AI-assisted scene building for non-programmers

Features

Template Library: Pre-built scenes (Battle Royale, Coffee Shop, etc.)
Object Library: Drag-and-drop props
Brittney Integration: Natural language commands
Real-time Preview: WYSIWYG editing

Workflow

Start with template or empty scene
Describe what you want to Brittney
Brittney generates objects
Drag to reposition
Tweak in Properties panel
Publish when done

Artist Mode 🖌️

Purpose: Visual shader & material creation

Shader Graph Editor

Node-Based Editing:

Input Nodes: UV, Position, Normal, Time
Math Nodes: Add, Multiply, Lerp, Clamp
Texture Nodes: Sample2D, Cubemap
Output Node: FragColor (RGBA)

Workflow:

Right-click canvas → Add Node
Connect nodes by dragging from output to input
Preview updates in real-time
Export to GLSL or save as .shader

Built-In Shader Templates

Fresnel Rim Light
Normal Mapping
Parallax Occlusion Mapping
Holographic Display
Toon Shading
Dissolve Effect

Keyboard Shortcuts

Space: Open node menu
Delete: Remove selected nodes
Ctrl+D: Duplicate selection
Ctrl+G: Group nodes
Ctrl+Shift+D: Preview shader on selected object

Filmmaker Mode 🎬

Purpose: Cinematic camera control & animation

Camera Path Recording

Click Record Path button
Move camera through scene (orbit, pan, zoom)
Click Stop Recording
Path saved as spline curve

Timeline Editor

┌───────────────────────────────────────────────────┐
│  [Play] [Pause] [Stop]  ⏱️ 00:05.23 / 00:30.00  │
├───────────────────────────────────────────────────┤
│  Camera   ▬▬▬▬▬●▬▬▬▬▬▬▬▬▬▬▬●▬▬▬▬▬▬▬▬▬▬▬     │
│  Light    ▬▬▬▬▬▬▬▬▬●▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬     │
│  Dragon   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬●▬▬▬▬▬▬▬▬▬▬     │
└───────────────────────────────────────────────────┘

Features:

Keyframe Editing: Click ● to set keyframes
Interpolation: Linear, Ease-In, Ease-Out, Bezier
Playback Speed: 0.25x to 2x
Loop Mode: Once, Loop, Ping-Pong

Export Options

Video: MP4 (H.264), WebM
Image Sequence: PNG frames
Camera Data: JSON for external tools

Expert Mode ⚙️

Purpose: Direct HoloScript code editing

Monaco Code Editor

Features:

Syntax highlighting
Auto-completion (Ctrl+Space)
Error squiggles
Multi-cursor editing (Ctrl+Alt+Up/Down)
Find & Replace (Ctrl+F)
Go to Definition (F12)
Formatting (Shift+Alt+F)

Side-by-Side View

Split view: Code (left) + 3D Preview (right)

Changes in code update preview in real-time.

Debugging Tools

Console: View errors & warnings
AST Explorer: Inspect parsed syntax tree
Performance Profiler: Identify bottlenecks
Trait Inspector: See active traits per object

Character Mode 🦴

Purpose: Character animation & rigging

GLB Import

Click Import Character
Select .glb file with skeleton
Character loads with bones visible

FK (Forward Kinematics) Animation

Bone Selection:

Click bone in viewport
Or select from bone tree panel

Rotation Controls:

Drag rotation gizmo
Or use sliders (X, Y, Z rotation)

Animation Clip Recording

Set character to T-pose
Click Record Clip
Animate bones frame-by-frame
Click Stop Recording
Name clip (e.g., "Wave", "Jump", "Sit")

Animation Library

Save clips to reuse:

Play: Preview animation
Export: Save as .anim file
Import: Load from file

Collaboration

Real-Time Multi-User Editing

Start Collaborating:

Click Share button
Copy invite URL
Send to collaborators
They join instantly (no signup required)

Features:

Multi-cursor awareness: See where others are editing
Live sync: Changes appear in real-time
Conflict resolution: CRDT (Yjs) prevents overwrites
Voice chat: Optional (requires browser permission)

Presence Indicators

Avatar icons: Show active users in top-right
Colored cursors: Each user has unique color
Selection highlights: See what others selected

VR Mode

Entering VR

Connect VR headset (Quest, Vision Pro, PC VR)
Open Studio in VR-capable browser (Chrome, Edge, Firefox Reality)
Click VR Mode button
Grant permission if prompted
Put on headset

VR Controls

Meta Quest 2/3:

Grip buttons: Grab objects
Triggers: Select/Activate
Thumbsticks: Move/Rotate camera
Hand Tracking: Pinch to grab (controller-free)

Apple Vision Pro:

Look + Pinch: Select objects
Pinch + Drag: Move objects
Two-hand pinch + spread: Scale

PC VR (Index, Vive):

Similar to Quest controls

In-VR Editing

Place objects: Grab from menu, position in space
Transform: Pinch opposite corners to scale/rotate
Delete: Throw object off-edge or use menu
Undo: Controller shake gesture

Performance

Benchmark Tool

Run Test:

Click Benchmark button
Studio spawns 1000 objects
Measures FPS over 10 seconds
Displays results: Min/Avg/Max FPS

Target Performance:

Desktop: 60 FPS @ 1000 objects
Quest 2: 72 FPS @ 500 objects
Quest 3: 90 FPS @ 750 objects

Optimization Tools

Auto-Optimize (via Brittney):

Optimize this scene for Quest 2

Brittney will:

Enable LOD (Level of Detail)
Use InstancedMesh for duplicates
Reduce shadow quality
Simplify geometry
Enable frustum culling

Manual Optimization:

LOD: Add @lod trait with distance thresholds
Instancing: Use @instanced for repeated objects
Occlusion Culling: Enable in Settings > Rendering
Shadows: Lower resolution or disable

Export & Publishing

One-Click Publish

Click Publish
Studio uploads scene to CDN
Returns shareable URL: studio.holoscript.net/s/abc123
Anyone can view (no account needed)

Privacy Options:

Public: Listed in gallery
Unlisted: Only accessible via URL
Private: Requires password

Multi-Platform Export

Available Targets (25+):

Game Engines:

Unity (C# MonoBehaviour)
Unreal (C++ / Blueprint)
Godot (GDScript)
VRChat (UdonSharp)

Web:

WebGPU (standalone HTML)
React Three Fiber (JSX)
Babylon.js

Mobile/XR:

visionOS (Swift + RealityKit)
Android XR (Kotlin)
iOS ARKit (Swift)

Robotics:

URDF (ROS 2)
SDF (Gazebo)

IoT:

DTDL (Azure Digital Twins)
WoT (W3C Thing Description)

Export Process:

Click Export
Select target platform
Configure options (package name, namespace, etc.)
Click Generate
Download .zip file

Keyboard Shortcuts Reference

Global

Shortcut	Action
`Ctrl+N`	New scene
`Ctrl+O`	Open scene
`Ctrl+S`	Save scene
`Ctrl+P`	Publish
`Ctrl+Z`	Undo
`Ctrl+Y`	Redo
`Ctrl+B`	Toggle Brittney panel
`Ctrl+/`	Toggle console
`F1`	Help
`F11`	Fullscreen
`V`	VR Mode

Viewport

Shortcut	Action
`G`	Move (translate)
`R`	Rotate
`S`	Scale
`Delete`	Delete selected
`Ctrl+D`	Duplicate
`H`	Hide/Show
`F`	Focus on selected
`Numpad .`	Frame all

Code Editor (Expert Mode)

Shortcut	Action
`Ctrl+Space`	Auto-complete
`Ctrl+F`	Find
`Ctrl+H`	Find & Replace
`F12`	Go to Definition
`Shift+F12`	Find References
`Ctrl+/`	Comment/Uncomment
`Shift+Alt+F`	Format Document

Settings

General

Theme: Light / Dark / Auto
Language: English, Spanish, French, German, Japanese
Auto-Save: Interval (1min, 5min, 10min)

Rendering

Anti-Aliasing: None, FXAA, MSAA x2/x4/x8
Shadow Quality: Low, Medium, High, Ultra
Post-Processing: Bloom, SSAO, Color Grading
Grid Size: 0.5, 1, 2, 5 units

AI (Brittney)

Provider: OpenAI, Anthropic, Google, Custom
API Key: Your key (stored locally)
Model: GPT-4, Claude 3.5, Gemini 1.5
Temperature: 0-1 (creativity)
Max Tokens: 512, 1024, 2048, 4096

Collaboration

Username: Display name
Cursor Color: Pick color
Voice Chat: Enable/Disable
Show Presence: Show/Hide other users

Performance

FPS Limit: 30, 60, 90, 120, Unlimited
LOD Distance: Near, Medium, Far
Physics Substeps: 1-10
Enable Frustum Culling: Yes/No

Troubleshooting

Scene Won't Load

Clear cache (Ctrl+Shift+R)
Check console for errors (F12)
Verify .holo syntax in Expert mode

Brittney Not Responding

Check AI settings (API key, model)
Verify internet connection
Check provider status page

VR Mode Not Working

Ensure WebXR-capable browser
Connect headset before clicking VR
Grant browser permissions

Performance Issues

Run benchmark (B key)
Enable optimizations (Settings > Performance)
Reduce object count or shadows
Use LOD trait

Export Failed

Check scene for errors
Verify target platform supported
Try different export format

Community & Support

Discord: discord.gg/holoscript
GitHub: github.com/brianonbased-dev/Holoscript
Docs: holoscript.net/guides
Studio Feedback: feedback.holoscript.net

Happy building in Studio! 🎨✨

HoloScript Studio - Complete Reference ​

Overview ​

Interface Layout ​

Top Bar ​

Mode Selector ​

Toolbar Buttons ​

3D Viewport ​

Camera Controls ​

Transform Gizmos ​

Grid & Axes ​

Selection ​

Brittney AI Panel ​

Opening the Panel ​

Chat Interface ​

Scene Generator Tab ​

Scene Critique Tab ​

AI Material Tab ​

Hierarchy Panel (Left) ​

Objects Tree ​

Context Menu (Right-Click) ​

Filters ​

Properties Panel (Right) ​

Transform ​

Object Properties ​

Traits ​

State ​

Creator Mode 🎨 ​

Features ​

Workflow ​

Artist Mode 🖌️ ​

Shader Graph Editor ​

Built-In Shader Templates ​

Keyboard Shortcuts ​

Filmmaker Mode 🎬 ​

Camera Path Recording ​

Timeline Editor ​

Export Options ​

Expert Mode ⚙️ ​

Monaco Code Editor ​

Side-by-Side View ​

Debugging Tools ​

Character Mode 🦴 ​

GLB Import ​

FK (Forward Kinematics) Animation ​

Animation Clip Recording ​

Animation Library ​

Collaboration ​

Real-Time Multi-User Editing ​

Presence Indicators ​

VR Mode ​

Entering VR ​

VR Controls ​

In-VR Editing ​

Performance ​

Benchmark Tool ​

Optimization Tools ​

Export & Publishing ​

One-Click Publish ​

Multi-Platform Export ​

Keyboard Shortcuts Reference ​

Global ​

Viewport ​

Code Editor (Expert Mode) ​

Settings ​

General ​

Rendering ​

AI (Brittney) ​

Collaboration ​

Performance ​

Troubleshooting ​

Scene Won't Load ​

Brittney Not Responding ​

VR Mode Not Working ​

Performance Issues ​

Export Failed ​

Community & Support ​

HoloScript Studio - Complete Reference

Overview

Interface Layout

Top Bar

Mode Selector

Toolbar Buttons

3D Viewport

Camera Controls

Transform Gizmos

Grid & Axes

Selection

Brittney AI Panel

Opening the Panel

Chat Interface

Scene Generator Tab

Scene Critique Tab

AI Material Tab

Hierarchy Panel (Left)

Objects Tree

Context Menu (Right-Click)

Filters

Properties Panel (Right)

Transform

Object Properties

Traits

State

Creator Mode 🎨

Features

Workflow

Artist Mode 🖌️

Shader Graph Editor

Built-In Shader Templates

Keyboard Shortcuts

Filmmaker Mode 🎬

Camera Path Recording

Timeline Editor

Export Options

Expert Mode ⚙️

Monaco Code Editor

Side-by-Side View

Debugging Tools

Character Mode 🦴

GLB Import

FK (Forward Kinematics) Animation

Animation Clip Recording

Animation Library

Collaboration

Real-Time Multi-User Editing

Presence Indicators

VR Mode

Entering VR

VR Controls

In-VR Editing

Performance

Benchmark Tool

Optimization Tools

Export & Publishing

One-Click Publish

Multi-Platform Export

Keyboard Shortcuts Reference

Global

Viewport

Code Editor (Expert Mode)

Settings

General

Rendering

AI (Brittney)

Collaboration

Performance

Troubleshooting

Scene Won't Load

Brittney Not Responding

VR Mode Not Working

Performance Issues

Export Failed

Community & Support