In an innovative approach to celebrating their milestone of reaching 5 million developers, Netlify commissioned a WebGL-based marble rolling game that has captured the attention of the tech community, not just for its marketing message but for its technical implementation and physics-based gameplay.
Technical Implementation
The game, developed by Little Workshop over an 8-week period by a team of two, showcases impressive technical achievements using Three.js for rendering and Rapier 3D physics engine through WebAssembly. The development team utilized Unity for level design, with a sophisticated pipeline involving Blender Python scripting for geometry optimization and GLTF export. The integration of 2D content with the 3D environment was accomplished using CSS 3D transforms, demonstrating a seamless blend of web technologies.
Technical Stack:
- Frontend: Three.js (WebGL rendering)
- Physics Engine: Rapier 3D (via WebAssembly)
- Level Design: Unity Editor
- Asset Pipeline: Blender Python scripting
- Format: GLTF
- Development Time: 8 weeks
- Team Size: 2 developers
Physics and Gameplay
The marble physics implementation has received particular praise from the community for its realistic feel. The developers revealed they used Rapier 3D for core physics simulation, with custom code for special effects like magnetic attraction to hotspots. The ball's bouncing sound, interestingly, was created using basketball recordings, which accidentally contributed to a satisfying rubbery feel that players have enjoyed.
Technical Challenges and Bug Reports
Despite the polished presentation, users have reported several technical issues, particularly around collision detection and respawn mechanics. Multiple players encountered respawn loops and collision detection failures, especially during frame rate drops. The development team acknowledged these issues, explaining:
Sometimes the ball does some crazy things due to the way collision detection works. We tried to optimize and avoid most of the issues but it can happen.
Known Technical Issues:
- Collision detection failures during frame rate drops
- Respawn loop bugs in specific level sections
- Mobile control sensitivity issues
- iOS-specific gesture interference
Mobile Optimization
The mobile experience presented unique challenges, with some users reporting oversensitive controls and iOS-specific issues with gesture handling. The developers implemented workarounds for iOS Safari's text selection and sharing features, though some challenges persist due to platform limitations.
Community Response
The technical community's response has been overwhelmingly positive, with particular interest in the project's potential as a learning resource. While some developers have requested the code be open-sourced, others have already begun exploring speedrunning possibilities, highlighting the game's replayability despite its marketing origins.
The project stands as an exemplar of modern web development capabilities, demonstrating how marketing initiatives can push technical boundaries while creating engaging user experiences.
Source Citations: Cloudflare 1.1.1.1