Welcome back to another edition of Sensei Notes!

This week, we're going multiplayer! Two great options for building real-time 3D experiences, an exciting opportunity for 3D devs in the AI agent space, and a gorgeous lighting technique using TSL. Let's go! 🎮 🤖 💡

🎮 Building Multiplayer 3D Experiences with R3F

My Top Pick: Bun WebSockets

For custom real-time and collaborative 3D experiences, Bun's built-in WebSocket server is hard to beat:

• 7x more throughput than Node.js + ws
• Zero dependencies, WebSocket support built into Bun.serve()
• Native pub/sub, no Redis needed for single-server setups

Full control over your networking layer. You decide what state gets synced, how often, and in what format.

Project ideas:

• 🎨 Collaborative 3D whiteboard
• 🏠 Real-time 3D room planner
• 👥 Multiplayer virtual showroom
• 📊 Live 3D data dashboard

For Real Games: Colyseus

Building actual multiplayer games? Colyseus is an open-source Node.js framework that handles the hard parts:

• Automatic state sync with binary delta serialization
• Room-based match-making on demand
• Authoritative server to prevent cheating
• Horizontal scaling for thousands of concurrent users
• JS/TS client that works seamlessly with R3F
• MIT licensed

Project ideas:

• ⚔️ Real-time 3D battle arena
• 🏎️ Multiplayer racing game
• 🧊 Cooperative 3D puzzle game
• 🌍 Mini MMO world

🤖 AI Agents Meet 3D Web Dev

AI agents are everywhere now. Autonomous programs that browse the web, write code, manage emails. Tools like OpenClaw let you run your own personal AI agent connected to WhatsApp, Telegram, Discord, and more.

But here's the thing: agents are mostly text-based right now. Terminal windows and chat bubbles. There's a huge opportunity for 3D web devs to build visual interfaces for AI agents.

Give your agent a 3D body, a visual workspace, or a dashboard of what it's doing. Check out this example of a 3D visualization of an AI agent's activity. Perfect intersection of R3F skills and the AI wave.

Why this matters:

• AI is booming, every company needs better agent UIs
• 3D is your edge, most AI devs can't build immersive experiences
• It's early, no "standard" way to visualize agents yet

Project ideas:

• 🤖 3D avatar visualizing agent activity in real-time
• 🧠 3D node graph of an agent's thought process
• 📡 Mission control dashboard for monitoring multiple agents

💡 Beautiful Lighting with TSL: The SSGI Pass

This is the secret behind Pascal's lighting. Three.js added a Screen-Space Global Illumination (SSGI) pass built with TSL for WebGPU, and we're already using it in production. The difference it makes is night and day.

SSGI simulates how light bounces between surfaces. Even on our black and white Pascal scene, it gives us lovely shades of gray (fifty of them, maybe? 😏). The indirect lighting creates soft, natural gradients everywhere, and the built-in ambient occlusion is fantastic, adding depth and contact shadows that make every object feel grounded in the scene.

• 🎨 Dramatically better lighting without touching a single light
• ⚡ Post-processing pass, no scene restructuring needed
• 🧪 Built with TSL, showcasing what's possible beyond GLSL
• 🔮 WebGPU only, another reason to try the new renderer

Toggle it on and you'll see the difference immediately. Check out the live demo →

That's it for this one! Let me know what topics you'd like me to cover next. Join the conversation on Discord!

Happy coding 🧑‍💻

Wawa