🎨 VR Air Draw

An immersive WebXR application for painting floating 3D strokes in virtual space using VR hand controllers

---

📖 What is VR Air Draw?

VR Air Draw is an immersive WebXR application that lets users physically paint floating 3D strokes in virtual space using VR hand controllers — with a fully interactive virtual dashboard for color, thickness, clear, and save controls, all usable from inside the headset without breaking immersion.

Put on a VR headset, press the trigger, and draw anything — floating sculptures, diagrams, freeform art — suspended in 3D space around you.

---

🎯 Project Significance

This project is a deep exploration of WebXR and real-time 3D interaction design:

• VR/XR Game Development — Real-time 3D rendering, spatial controller tracking, raycasting interaction, and immersive UX design using WebXR and Three.js.

This is not a tutorial clone — it is a custom-built VR creative tool running entirely in a browser with no app store installation required.

---

✨ Key Features

🎨 3D Air Drawing System

Feature	Description
Real-time stroke rendering	Trigger-held XYZ coordinates are instantly connected into 3D line geometry
Multi-stroke support	Multiple independent floating strokes built separately in one session
Virtual dashboard	Collision-detectable VR menu with interactive buttons inside the headset
Raycasting interaction	Controller laser ray detects dashboard button intersections precisely
Thickness control	+ / - buttons adjust stroke width for all new lines dynamically
Color randomizer	One-tap color cycling algorithm changes stroke color on demand
Clear & Save	Full scene clear or export all 3D coordinate + color data as a structured file

---

🏗️ System Architecture

┌─────────────────────────────────────────┐
│           VR HEADSET (WebXR)            │
│                                         │
│  ┌──────────────────────────────────┐   │
│  │         3D Air Drawing           │   │
│  │                                  │   │
│  │  Right Trigger held              │   │
│  │  → Track XYZ controller position │   │
│  │  → Connect points → Line geometry│   │
│  │  → Render stroke in 3D scene     │   │
│  │                                  │   │
│  │  VR Dashboard (raycasting)       │   │
│  │  → Color · Thickness · Clear     │   │
│  │  → Save strokes to file          │   │
│  └──────────────────────────────────┘   │
│                                         │
│  Three.js renderer → WebXR session      │
│  Stereoscopic output to headset lenses  │
└─────────────────────────────────────────┘

---

🛠️ Technologies Used

Frontend — VR Application

• WebXR API — Headset session management, stereoscopic rendering, spatial controller tracking
• Three.js — 3D scene, line geometry, raycasting, VR dashboard rendering
• JavaScript (ES Modules) — Controller event handling, drawing logic, stroke management
• Vite — Build tool and local development server
• TLS/SSL Certificates — HTTPS hosting required by browser VR APIs

---

🚀 Getting Started

Prerequisites

Node.js v18+     npm / yarn
A WebXR-compatible browser (Chrome / Edge)
A VR headset (Meta Quest recommended) or WebXR emulator

1. Clone the Repository

git clone https://github.com/Anil-CAI/vr_airdraw.git
cd vr_airdraw

2. Install Dependencies

npm install

3. Start the HTTPS Development Server

# WebXR requires HTTPS — run with SSL
npm run dev -- --https

# Or for production build:
npm run build && npm run preview

4. Open in VR

1. Connect your VR headset to the same local network
2. Open the HTTPS URL in your headset browser (Meta Quest Browser recommended)
3. Press "Enter VR"
4. Hold right trigger → move your hand to draw floating 3D strokes
5. Aim at the dashboard buttons → trigger to interact (color, thickness, clear, save)

---

📁 Project Structure

vr_airdraw/
│
├── index.html                  # App entry point + HTTPS VR launcher
├── main.js                     # Core VR app logic
│   ├── setupScene()            # Three.js scene, camera, renderer
│   ├── trackControllers()      # WebXR controller pose tracking
│   ├── handleDrawing()         # Trigger → XYZ → 3D line geometry
│   └── handleDashboard()       # Raycasting VR menu interaction
│
├── style.css                   # Pre-VR dashboard UI styling
├── package.json                # Frontend dependencies
└── vite.config.js              # Build + HTTPS config

---

🗺️ Roadmap

• WebXR session with dual controller tracking
• Real-time 3D line drawing with trigger input
• Multi-stroke support — independent floating strokes
• VR dashboard with raycasting button interaction
• Color randomizer and stroke thickness controls
• Clear all strokes from scene
• Save all 3D stroke data as structured file
• Hand tracking support — draw without physical controllers
• Haptic feedback — feel texture while drawing
• 3D brush shapes — draw with spheres, cubes, ribbons instead of lines
• Undo / redo stroke history
• Drawing export to .glb / .obj 3D file format
• Multi-user session — collaborate in the same drawing canvas over WebRTC
• Gallery mode — load and view previously saved drawings in VR

---

🔬 Skills Demonstrated

This project demonstrates a focused and production-relevant skill set for VR game development and XR engineering roles:

Domain	Skills Demonstrated
VR Development	WebXR session management, stereoscopic rendering, spatial controller tracking
3D Graphics	Three.js real-time geometry, raycasting, material rendering, scene management
Immersive UX Design	In-VR dashboard interaction, spatial UI layout, controller-native controls
Procedural Generation	Real-time XYZ coordinate capture and dynamic 3D line geometry construction
JavaScript Engineering	ES Modules, event-driven controller input, file export via Blob API
Web Standards	WebXR API, HTTPS/TLS hosting, browser-native VR without app store

---

🇯🇵 Japan Career Relevance

This project directly maps to the technical work done at Japan's leading XR and game development companies:

日本語: このプロジェクトはWebXRとThree.jsを使ったVR空間描画アプリケーションです。ソニー・インタラクティブエンタテインメントやバンダイナムコなど、日本のゲーム企業で働くことが目標です。

(This project is a VR spatial drawing application built with WebXR and Three.js. My goal is to work at Japanese game companies such as Sony Interactive Entertainment and Bandai Namco.)

---

🔗 Related Projects

Project	Description
🌌 Galaxy Cinema VR	WebXR virtual cinema — local video playback in an immersive galaxy environment
🤖 ROS Turtlesim Guide	ROS2 robot control fundamentals using Turtlesim simulation

---

👤 About the Developer

Anil Kumar — VR Game Developer & Robotics Engineer from India, building toward a career in Japan's XR and robotics industry.

• Currently learning: ROS2 · C++ · OpenXR · Japanese (JLPT N5)
• Open to: VR Developer / XR Game Engineer roles in Japan

---

📄 License

This project is open source under the MIT License.

---

_{Built to explore the frontier of VR creative tools and immersive 3D interaction · India → Japan 🇮🇳 → 🇯🇵}