Hi DEV community! 👋
I want to share a project I've been working on: IA Code Studio (https://ia-codestudio.com). It is a next-generation interactive WebGL playground and IDE designed to make building Three.js scenes, 3D widgets, and interactive websites as fast and collaborative as possible.
Here is the backstory of how it was built, the architecture behind it, and the features we packed into it.
🌟 The Core Features
🤖 1. AI Prompt-to-3D Co-pilot
Writing boilerplate code for WebGL and Three.js can be tedious (setting up renderers, cameras, lights, orbit controls, etc.).
- The Solution: I integrated an AI assistant directly into the Monaco editor. You can prompt the AI in English or French to build a scene (e.g., "create a glowing wireframe grid with rotating metal spheres"), and it compiles and runs the WebGL code in real-time. ### 👥 2. Real-Time Multiplayer Sandbox (DevSocial Hub) Coding is better with friends. I wanted a way for developers to pair program in 3D:
- Real-time Sync: Powered by Firebase, multiple developers can join the same room code and code simultaneously.
- 3D Laser Cursors: We created synchronized 3D raycasting cursors, so you can point at elements in the 3D preview and your teammate sees exactly where you are looking.
- WebRTC Voice Chat: No need for Discord or Zoom. We built high-fidelity peer-to-peer microphone voice channels directly into the browser tab using WebRTC. ### ⏪ 3. DVR Time-Travel Debugger & Time Machine (Local Version Control)
- DVR Panel: A floating panel that lets you travel back and forth between execution states to see how variables change.
-
Time Machine History: Automatically takes local snapshots of your code every 5 minutes and lets you restore any version with 1-click. All snapshots persist in
localStorageso they survive page refreshes! ### 📦 4. Standalone 1-Click Compiler Once you are happy with your 3D creation (like our prebuilt Steampunk Chrono or Webcam Avatar widgets), you can export the entire workspace as a single, self-contained, offline-ready HTML file or a ZIP bundle. --- ## 🛠️ The Tech Stack I wanted the application to load instantly and run smoothly, so I opted for a lightweight stack: - Frontend: Vanilla HTML5, CSS3 (Glassmorphism design system), and Modern ES6+ JavaScript.
- 3D Engine: Three.js (WebGL renderer, OrbitControls).
- Editor: Monaco Editor (the core engine behind VS Code).
- Database & Sync: Firebase (Firestore real-time listeners for cursor sync, Auth, and Hosting).
* WebRTC Protocol: RTCPeerConnection API with Firestore-based signaling for the voice channels.
🚀 Try It Out!
The platform is live and offers a Preemium plan:
- 🎁 Free Tier: You can try 3 of our interactive components/widgets completely free of charge.
- ⚡ Pro Tier ($10/month): Unlock the full power of the AI co-pilot, real-time multiplayer coding sandboxes, custom 3D vector extruders, and unlimited exports.
👉 Live Website: https://ia-codestudio.com
I would love to get your feedback: - What features should we add next?
- How does the platform feel? Let me know in the comments below!