{
  "id": 10266662,
  "title": "Building a 3D Exploration Game with Three.js",
  "url": "https://urgent.news/2026/09/27/building-a-3d-exploration-game-with-three-js",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-27T18:03:39.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/vampirejs/building-a-3d-exploration-game-with-threejs-2198"
  },
  "original_language": "en",
  "account": "The story begins with a technical club at a college wanting to impress visitors with a unique game. The Technical Head of the club proposed creating a 3D exploration game using Three.js, a WebGL 3D rendering library. The game had to be performed well on mobile devices and easy to distribute, leading the team to decide on a web-based approach.\n\nInspired by Bruno Simon's work, the team aimed to create a game with a similar aesthetic and gameplay, featuring a car to navigate an isolated island, mini-games, and zones for displaying information. The challenge was to incorporate shaders and other advanced elements while maintaining performance on mobile devices.\n\nThe team used Three.js for rendering, TypeScript for application logic, Cannon.es for physics, and GLSL for custom shaders. They began by creating a basic scene with primitive shapes and progressed to designing meshes for the car, trees, and obstacles. The next phase involved enhancing the visuals with custom shaders and optimizing performance for mobile devices.\n\nTo achieve beautiful visuals while ensuring high performance, the team implemented instanced geometry systems, lightweight shaders, and avoided expensive post-processing techniques like SSAO or Bloom. They used pseudo-ambient occlusion by shading grass blades darker and utilized CSS color filters for basic color grading instead of rendering filmic LUTs dynamically.\n\nThe map design was simplified using a grayscale density mask, allowing for easy adjustments and content changes. With these performance optimizations, the game maintained high frame rates on both mobile and desktop platforms. The final game can be found at https://gdu-sip.netlify.app/, and the inspiration behind the project is showcased at https://bruno-simon.com/.",
  "summary": "Back story (For performance optimizations, skip to the next section ;)) The game development club I am a part of had to present themselves in front of the freshers at my college, and being a Technical Head at the club, I thought it would be cool if we did something that sets us apart from the other clubs in the first impression itself. Hence, we decided to make a game, and let the crowd play it…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 2,
    "also_reported_by": [
      {
        "outlet": "Dev.to",
        "title": "Three things that cost me real time building a 25-source news aggregator",
        "url": "https://urgent.news/2026/09/27/three-things-that-cost-me-real-time-building-a-25-source-news",
        "published": "2026-09-27T08:16:16.000Z"
      }
    ]
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}