I wanted to share the rendering architecture of a project I’ve been working on. It’s a browser-based 3D game called KosmoKode, where players control a space fleet using real JavaScript algorithms.

Since I needed to run untrusted user code, handle WebSockets, and render a space battle simultaneously, performance was my top priority. I decided to skip React Three Fiber (R3F) and heavy frameworks, building the entire visualization in Vanilla Three.js (ES6+). Here is how I structured the scene to maintain a stable 60 FPS.

1. Rendering Hundreds of Objects with InstancedMesh

Space battles require a lot of debris, asteroid fields, and particle effects (like laser beams, engine trails, and explosions). Rendering these individually would kill the CPU with too many draw calls.

• Solution: I heavily utilized THREE.InstancedMesh. All asteroids of the same type, engine thruster particles, and laser projectiles are grouped into single draw calls. Updating the Matrix4 for thousands of instances directly in the animation loop kept the performance incredibly smooth even on integrated laptop GPUs.

2. Decoupling the Render Loop from Game Logic

In a game where users write while loops and heavy pathfinding logic, keeping that code on the main thread would freeze the Three.js requestAnimationFrame loop completely.

• Architecture: All user code and heavy logic run in a separate Web Worker (codeExecutor.js). The worker calculates the state and sends a compressed payload via postMessage to the main thread.
• The Three.js main thread only does what it does best: interpolates the coordinates and updates the scene graph. The camera, orbit controls, and mesh transformations are completely isolated from the game logic.

3. Asset Management and GLTFLoader

The game currently features 6 distinct ship classes (Fighters, Destroyers, Cruisers, etc.).

• I used GLTFLoader to load compressed .gltf models. To prevent frame drops during gameplay, all core geometries and materials are pre-loaded and cached during the initial loading screen. When a new ship spawns, the engine just clones the cached scene graph instead of parsing the model again.

4. Reactive UI vs WebGL Canvas

To keep the DOM updates from interfering with WebGL performance, the UI (built with Vanilla JS) sits in a separate layer over the <canvas>. It updates reactively based on WebSocket events, ensuring the Three.js renderer isn't blocked by DOM reflows.

Would love to hear your thoughts on this setup! How do you guys usually handle massive particle systems or asteroid fields in Vanilla Three.js? Any advanced techniques for frustum culling with InstancedMesh I should look into?

Hey Reddit,

I love teaching and sharing ideas, but I've always struggled with one thing: keeping people engaged. We're competing for attention against TikTok, video games, and a million other distractions. A standard, flat PowerPoint presentation just doesn't cut it anymore.

I kept thinking: What if a presentation felt less like a document, and more like a video game or a movie? What if you could literally walk through your ideas?

I'm a developer, so 8 months ago, I decided to build it myself. It's been a long, solo journey, but today I'm finally launching Aura Pro, a browser-based 3D presentation engine.

Here’s a bit about the technical challenges and the features I built specifically for educators, mentors, and anyone who wants to create something truly memorable.

My Biggest Technical Headaches

• Making 3D Usable for Everyone: My goal was to create immersive 3D worlds (cyberpunk cities, historical scenes, even Minecraft-style voxel worlds) that run smoothly in any browser, even on a student's old laptop. After a lot of trial and error with Three.js, I optimized it using techniques like Instancing and Frustum Culling. Now, it runs at a stable 60 FPS without needing a powerful GPU.
• Making AI Actually Useful: I wanted an AI that could take a messy wall of text (like a lecture summary) and automatically turn it into a well-structured presentation. After a lot of prompt engineering, I built an "AI Director" that maps content to over 75+ pre-built layouts, from interactive charts to beautiful bento grids. It’s a huge time-saver. https://clc.li/zbKKm

Features I Built for Teachers and Creators

• 🎥 Virtual Studio Mode: This is my favorite. It uses your webcam to cut out your silhouette (no green screen needed!) and places you inside your 3D presentation. Imagine teaching a history lesson while "standing" next to a 3D model of the Colosseum.
• 🗣️ AI Pitch Coach: I get nervous speaking, so I built this for myself and for students. You rehearse your presentation, and the AI uses your webcam to track your eye contact, analyze your speech pace, and point out filler words. It gives you a "confidence score" to help you improve.
• 🚀 110+ Ready-to-Use Templates: To fight "blank canvas anxiety," I created over 110 full templates for different subjects, from "History of Ancient Rome" to "Pitching a Startup Idea."
• 🎙️ Auto-Voiceover: If you want to create a pre-recorded lesson, you can use the AI voiceover feature. It uses premium neural voices to narrate your slides with studio quality.

My hope is that this tool can help other educators, mentors, and creators make their lessons and presentations more engaging and less forgettable.

I'm really looking for feedback from people who have to present ideas for a living.

Thanks for reading! I'll be in the comments to answer any questions.