How to set up 3d.city locally for development?

The README doesn't provide detailed instructions, but you can clone the GitHub repository and run the HTML files directly. Ensure you have a modern browser with WebGPU support enabled, and note that Three.js dependencies may need manual handling due to the minimal setup.

Is 3d.city good for learning Three.js and WebGPU in games?

Yes, it's an excellent resource for seeing Three.js integrated with WebGPU for high-performance 3D graphics, and the use of web workers for simulation offers practical insights into optimizing web applications. However, the incomplete documentation means you'll need to explore the code yourself.

Can I modify the 3D models in 3d.city for my own project?

Yes, the GLB models are custom-made and open-source, so you can edit them with 3D software. However, integrating changes might require familiarity with Three.js and the project's structure, as there are no guides provided.

How does 3d.city compare to other web-based city builders like Citybound?

3d.city focuses on performance with WebGPU and minimal size, making it more experimental and optimized for modern browsers, whereas Citybound might offer more features but with different technical trade-offs. 3d.city is better for learning cutting-edge web tech but less feature-complete.

What browsers support 3d.city's WebGPU version?

It requires browsers with WebGPU support, such as Chrome or Edge with enabled flags, and may not work on Safari or older versions. The WebGL fallback is available but might have reduced performance on less capable devices.

Are there any tutorials for adding new features to 3d.city?

No, the README lacks tutorials, and the project's 'Work in progress' status means you'll likely need to rely on Three.js documentation and experiment with the codebase to implement additions like new buildings or simulation rules.

Does 3d.city have plans for multiplayer or online features?

Currently, it's focused on single-player simulation with no mention of multiplayer in the README. Adding such features would require significant custom development, as the codebase isn't designed for it out-of-the-box.

Open-Awesome

3d.city

NOASSERTIONJavaScript

A high-performance 3D city builder game built with Three.js and WebGPU, featuring simulation running in a web worker.

Visit Website GitHub

1.7k stars356 forks0 contributors

What is 3d.city?

3d.city is an open-source 3D city builder game that runs directly in web browsers using Three.js for rendering and WebGPU for enhanced performance. It solves the challenge of creating high-performance, visually rich city simulation games with minimal resource impact, combining realistic 3D graphics with a sophisticated simulation engine.

Target Audience

Web developers and game enthusiasts interested in browser-based 3D games, urban simulation, or learning how to build performance-optimized web applications with Three.js and WebGPU.

Value Proposition

Developers choose 3d.city for its focus on speed and efficiency, leveraging modern web technologies like WebGPU and web workers to deliver a smooth city-building experience without heavy dependencies or complex setup.

Overview

3d city builder game

Use Cases

Best For

Building browser-based 3D city simulation games
Learning Three.js and WebGPU integration for games
Creating performance-optimized web applications with web workers
Experimenting with urban planning simulations in JavaScript
Developing lightweight 3D games with minimal size impact
Exploring ES6-converted simulation engines like MicropolisJS

Not Ideal For

Production teams needing a stable, fully-featured game engine for release
Developers targeting older browsers or environments without WebGPU/WebGL 2.0 support
Projects requiring extensive documentation, tutorials, or community support for quick onboarding
Games that need multiplayer, social features, or extensive modding capabilities out-of-the-box

Pros & Cons

Pros

High-Performance Rendering

Leverages both WebGL and WebGPU for optimized 3D graphics with minimal size impact, as highlighted in the README's goal for maximum speed.

Realistic Simulation Engine

Uses a converted ES6 version of MicropolisJS for sophisticated city dynamics, providing a solid foundation for urban planning simulations.

Smooth Performance Optimization

Runs the game simulation in a web worker to maintain responsiveness, ensuring smooth gameplay even with complex calculations, as noted in the features.

Custom 3D Assets

Includes GLB 3D models specifically created by the author, offering unique visual assets tailored for the city builder experience.

Cons

Incomplete and Unstable

Marked as version 0.9.6 and 'Work in progress' in the README, indicating missing features, potential bugs, and lack of production readiness.

Sparse Documentation

The README is brief with broken HTML tags and lacks detailed setup, configuration, or API guides, making it challenging for new developers.

Limited Browser Compatibility

Heavy reliance on WebGPU and modern web APIs may exclude users with older browsers or devices, limiting accessibility.

Niche Simulation Integration

Based on a converted version of MicropolisJS, which might have integration quirks or lack updates compared to more mainstream game engines.

Frequently Asked Questions

Related Projects

Minetest

Luanti (formerly Minetest) is an open source voxel game-creation platform with easy modding and game creation

Stars13,556

Forks2,446

Last commit2 days ago

Craft

A simple Minecraft clone written in C using modern OpenGL (shaders).

Stars11,090

Forks1,452

Last commit2 years ago

Endless Sky

Space exploration, trading, and combat game.

Stars7,538

Forks1,304

Last commit4 days ago

Minecraft

Simple Minecraft-inspired program using Python and Pyglet

Stars5,440

Forks1,283

Last commit3 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub