500万人の開発者達成を祝う革新的なアプローチとして、 Netlify は WebGL ベースのビー玉転がしゲームを制作依頼しました。このゲームは、マーケティングメッセージだけでなく、その技術的な実装とフィジックスベースのゲームプレイで技術コミュニティの注目を集めています。
技術的実装
Little Workshop の2人のチームによって8週間で開発されたこのゲームは、レンダリングに Three.js を、物理演算エンジンには WebAssembly を通じて Rapier 3D を使用するという印象的な技術的成果を示しています。開発チームは、レベルデザインに Unity を使用し、ジオメトリの最適化と GLTF エクスポートには Blender Python スクリプティングを活用する高度なパイプラインを採用しました。2Dコンテンツと3D環境の統合は CSS 3D トランスフォームを使用して実現され、ウェブ技術の完璧な融合を実証しています。
技術スタック：
- フロントエンド： Three.js （WebGLレンダリング）
- 物理エンジン： Rapier 3D （ WebAssembly 経由）
- レベルデザイン： Unity エディター
- アセットパイプライン： Blender Python スクリプティング
- フォーマット： GLTF
- 開発期間：8週間
- チーム規模：開発者2名
物理演算とゲームプレイ
ビー玉の物理演算の実装は、そのリアルな感触でコミュニティから特に称賛を受けています。開発者らは、コア物理シミュレーションに Rapier 3D を使用し、ホットスポットへの磁気的な引力などの特殊効果には独自のコードを使用したことを明らかにしました。興味深いことに、ボールのバウンド音にはバスケットボールの録音が使用され、これが偶然にもプレイヤーに好評な弾力のある感触を生み出すことになりました。
技術的課題とバグレポート
洗練された表現にもかかわらず、ユーザーからは特に衝突判定とリスポーンメカニズムに関する技術的な問題が報告されています。多くのプレイヤーが、特にフレームレートの低下時にリスポーンループや衝突判定の失敗に遭遇しました。開発チームはこれらの問題について以下のように説明しています：
衝突判定の仕組みにより、ボールが予期せぬ動きをすることがあります。最適化を行い、ほとんどの問題を回避しようと試みましたが、発生する可能性は残っています。
既知の技術的問題：
- フレームレート低下時の衝突判定の不具合
- 特定のレベル区間におけるリスポーンループのバグ
- モバイル端末の操作感度に関する問題
- iOS 特有のジェスチャー干渉の問題
モバイル最適化
モバイル体験では独自の課題が生じ、一部のユーザーから過敏なコントロールや iOS 特有のジェスチャー処理の問題が報告されています。開発者は iOS Safari のテキスト選択や共有機能に対するワークアラウンドを実装しましたが、プラットフォームの制限により一部の課題は依然として残っています。
コミュニティの反応
技術コミュニティの反応は非常に好意的で、特に学習リソースとしてのプロジェクトの可能性に関心が集まっています。一部の開発者がコードのオープンソース化を要望する一方で、すでにスピードラン可能性を探り始める人々も現れ、マーケティング目的で作られたゲームながらも再プレイ性の高さが示されています。
このプロジェクトは、マーケティング施策が技術的な境界を押し広げながら、魅力的なユーザー体験を創出できることを示す現代のウェブ開発の模範例となっています。