.png)
5 days ago
1
https://ubernaut.github.io/cubechat
A fully-functional peer-to-peer multiplayer 3D world with integrated video chat and screen sharing. Players can move around a Tron-themed infinite grid, see and hear each other through WebRTC video/audio streams, and share their screens on virtual billboards.
- WebSocket Relay Server: Efficient signaling for peer discovery and connection
- WebRTC Video/Audio: Real-time video and audio streaming between players
- Proximity-Based Connections: Automatic video connection/disconnection based on player distance
- Automatic Reconnection: Robust connection handling with exponential backoff
- Virtual Billboards: Share your screen on large virtual billboards in the 3D world
- Multiple Simultaneous Shares: Support for multiple players sharing screens at once
- Accurate Track Management: Robust system to prevent video stream mix-ups
- Billboard Positioning: Position your billboard at your current location
- Tron-Themed Environment: Dark infinite grid with glowing cyan lines
- Physics Engine: Realistic physics with gravity, jumping, and collision detection
- Smooth Movement: WASD movement with rotation-relative direction
- Camera Controls: Free-look camera with arrow key rotation
- Player Avatars: Colored cubes with real-time video textures on their faces
- Video Textures: Player video streams rendered on cube faces
- Glowing Effects: Neon glow effects on players and grid lines
- Dynamic Billboards: Screen shares displayed on large billboards with proper aspect ratios
- Smooth Animations: Interpolated player movement for fluid visuals
cubechat/
├── src/
│ ├── p2p/
│ │ └── network.js # WebRTC P2P networking with video/audio
│ ├── renderer/
│ │ └── scene.js # Three.js scene, players, and billboards
│ ├── physics/
│ │ └── world.js # Physics engine with collision detection
│ ├── controls/
│ │ └── input.js # Player input handling
│ ├── main.js # Main application orchestration
│ └── style.css # Tron-themed styling
├── server/
│ ├── server.js # HTTP server for serving the app
│ └── ws-server.js # WebSocket relay server for P2P signaling
├── index.html # Main HTML entry point
└── package.json # Dependencies and scripts
- W: Move forward
- S: Move backward
- A: Strafe left
- D: Strafe right
- Space: Jump
- Shift: Sprint (faster movement)
- Left Arrow: Rotate camera left
- Right Arrow: Rotate camera right
- Up Arrow: Look up
- Down Arrow: Look down
- B: Toggle screen share billboard at current location
- ESC: Stop screen sharing
- Install dependencies:
npm install
cd server && npm install && cd ..
- Start the WebSocket relay server:
- In a new terminal, start the development server:
- Open multiple browser windows to http://localhost:5173 to test multiplayer
- Build the application:
-
The production files are in the docs/ directory
-
Deploy to a web server with WebSocket support
- WebRTC Peer Connections: Direct peer-to-peer connections for video/audio
- Data Channels: For position updates and metadata
- Track Management: Separate handling of camera and screen share tracks
- Renegotiation: Proper handling of adding/removing tracks dynamically
- Metadata Sync: Track IDs sent via data channels for accurate stream classification
- Camera Streams: getUserMedia for video/audio capture
- Screen Streams: getDisplayMedia for screen sharing
- Track Separation: Camera and screen tracks kept separate to prevent mixing
- Stream Rebuilding: Dynamic stream reconstruction when tracks are added/removed
- Gravity: Realistic falling and jumping
- Ground Collision: Players stay on the ground plane
- Velocity Management: Smooth acceleration and deceleration
- Sprint Mechanics: Speed boost when holding shift
- Three.js Scene: WebGL rendering with efficient geometry
- Video Textures: Real-time video rendering on cube faces
- Billboard System: Large planes for screen sharing
- Distance Culling: Efficient rendering of distant objects
- Glow Effects: Post-processing for neon aesthetic
- ES6 Modules: Clean separation of concerns
- Event-Driven: Message handlers for network events
- State Management: Centralized player and stream state
- Extensible Design: Easy to add new features
For local network testing, see LAN_SETUP.md
The application auto-detects the environment:
- Development: Uses ws://localhost:8080
- Production: Uses wss://secretworkshop.net/cubechat/
You can override the WebSocket server URL with the VITE_WS_SERVER environment variable.
- Modern browser with WebRTC support (Chrome, Firefox, Edge, Safari)
- Camera and microphone permissions
- Screen sharing API support (for billboard feature)
- Maximum of ~10-15 simultaneous video connections (browser WebRTC limits)
- Proximity-based connection management (400 unit radius)
- Screen share requires HTTPS in production
- Voice activation indicators
- Text chat system
- Avatar customization
- Persistent world state
- Mobile device support
- VR/AR integration
MIT
Built with:
