8 ms·

3D.City – Game built with three.js and sea3d

434 points by huskyr 12y ago

bhouston 12y ago
Beautiful work with Three.js. But the simulation work is also really impressive -- and a lot of work. Simulation code here: http://lo-th.github.io/3d.city/build/city.3d.js http://lo-th.github.io/3d.city/build/city.3d.js Background worker (neat idea) that handles all user input and costly events, to keep the 3D animations consistently fast: http://lo-th.github.io/3d.city/js/worker.city.js http://lo-th.github.io/3d.city/js/worker.city.js
- willvarfar 12y ago
  Very neat! There are small details like laying out roads and making power lines go over them etc that are super-fiddly too. I know this because I played around with my own simcity for a while, first in true 3D (making curvy roads look nice is damn difficult) and then a 2D grid. Here's a screenshot I was particularly proud of - the effort to get to that point was more than it looks! http://media.tumblr.com/c9b51ca1eb2b3e89eb8d5af0f560ec34/tumblr_inline_mm0koaB6MW1qz4rgp.jpg http://media.tumblr.com/c9b51ca1eb2b3e89eb8d5af0f560ec34/tum... More on my algos http://williamedwardscoder.tumblr.com/post/49797579721/willcity-update http://williamedwardscoder.tumblr.com/post/49797579721/willc... I was going to procedurally produce the buildings using a variation on Eisenscript https://sites.google.com/site/williamedwardscoder/home/extendingeisenscript https://sites.google.com/site/williamedwardscoder/home/exten... with variables in the script based on things like price, distance to other zones, scores etc I look at the files you link and think "yeah!". I put my city simulation into a Web Worker and the UI in the browser thread though.
- agentultra 12y ago
  The worker code is interesting. Looks like a single observer that watches everything and dispatches to methods on a global state object. One would expect one observer per subject. Is there some implementation detail in web workers that makes this design more efficient than registering an observer per event?
- Keloran 12y ago
  the whole repo, much easier https://github.com/lo-th/3d.city https://github.com/lo-th/3d.city
- jastanton 12y ago
  For clarity, by user input it handles the callback of the map being clicked to delegate which tool it's going to use and to update the budget etc... I was excited at first to see all the event handlers setup in a thread that wasn't the UI thread because event handlers are expensive but that doesn't appear to be the case. AFAIK webworkers are fairly isolated so something like setting up event handlers would not be possible.
- graememcc 12y ago
  > The simulation work is also really impressive -- and a lot of work. The simulation is from my own micropolisJS (http://micropolisjs.graememcc.co.uk http://micropolisjs.graememcc.co.uk and https://github.com/graememcc/micropolisJS https://github.com/graememcc/micropolisJS) just stripped of the GPL License headers and attribution. micropolisJS in turn is a port of Micropolis, the open-source release of Sim City 1989 for One Laptop Per Child. Edit: edited the link. You'd think I should get links to my own site correct!
  - judk 12y ago
    Is that compliant with your license?
    - the_mitsuhiko 12y ago
      It's his own work. He does not be to be compliant with anything.
      - bhouston 12y ago
        It isn't his own work apparently, he copied the simulation and removed the GPL license statement.
        edvinbesic 12y ago
        It is his own work apparently. `The simulation is from my own micropolisJS (http://micropolisjs.graememcc.co.uk http://micropolisjs.graememcc.co.uk and https://github.com/graememcc/micropolisJS https://github.com/graememcc/micropolisJS) just stripped of the GPL License headers and attribution.`
        anamexis 12y ago
        That is not the same person as the one who made the 3D.CITY game.
        stickydink 12y ago
ceeK 12y ago
Thanks for wasting away the last 30 mins of my life (really it's fantastic, great job!).
- huskyr 12y ago
  Not my game, just posted the link!
willvarfar 12y ago
Here's what Simcity 3D ought to look like! http://media.tumblr.com/tumblr_m1ouer157w1r3qp3f.jpg http://media.tumblr.com/tumblr_m1ouer157w1r3qp3f.jpg (Found it http://www.darkroastedblend.com/2012/03/retro-future-glorious-transportation.html http://www.darkroastedblend.com/2012/03/retro-future-gloriou... here and used it as a desktop wallpaper for ages!)
erikb 12y ago
It's nearly killing my whole computer. What are the requirements to run it?
- AlexeyBrin 12y ago
  Preferably a WebGL capable browser and video card, otherwise Three.js could potentially switch to HTML5 canvas.
  - erikb 12y ago
    On the newest FF it's very slow (maybe not WebGL?) and on the current Chromium it's not even loading. Both running on a freshly installed Ubuntu 14.04.
    - dkyc 12y ago
      Butter-smooth on latest Chrome for Mac OS X
    - AlexeyBrin 12y ago
      Do you have proper drivers for your video card on Ubuntu ? On my MacBook Air runs smooth on both Chrome and Firefox. Same on Windows 8.1. Unfortunately, I can't test it on Ubuntu because I don't have a GUI installation of Ubuntu (I use the server version).
    - bryanlarsen 12y ago
      does this work? http://get.webgl.org/ http://get.webgl.org/ what does about://gpu say in Chrome? There are bugs in the latest version of Chrome for Ubuntu in both the Intel and nVidia drivers.
    - diltonm 12y ago
      I ran it on Ubuntu 14.04, Google Chrome, nVidia card, it ran great! The CPU usage was a lot lower than I expected for JavaScript doing WebGL.
    - nacs 12y ago
mxfh 12y ago
The developers, Laurent Thillet, blog is here: http://3dflashlo.wordpress.com/ http://3dflashlo.wordpress.com/ including other crazy stuff like this: http://3dflashlo.wordpress.com/2014/02/17/png-to-script/ http://3dflashlo.wordpress.com/2014/02/17/png-to-script/
Shengbo 12y ago
This is beautiful, thank you for posting.
cturhan 12y ago
As a three.js fun, I enjoyed very much. Great job.
aikah 12y ago
Nice! quite fun!
diltonm 12y ago
The Load and Save worked, the game is amazingly good. The use of "use strict" blew me away, I had no idea that existed, it gives me a sense that JavaScript is becoming a solid language. The game, day/night, seasons, I would buy this. It might need to be converted to Java to lower CPU usage but even as JavaScript it actually uses less than I'd have thought. Very nice work. On "use strict" I can't believe all the stuff JavaScript allows when it's not used, so I'm glad it exists: http://www.w3schools.com/js/js_strict.asp http://www.w3schools.com/js/js_strict.asp
jguimont 12y ago
The last 10 min reminded me how much time I spent playing SimCity, SimTower and Civilization.
judk 12y ago
It runs almost as fast as simcity native ran on my 33Mhz 486 in 1991. Is WebGL evere going to really work?
- prezjordan 12y ago
  Something tells me your browser doesn't support WebGL, in which case Three.js will default to canvas operations.
  - make3 12y ago
    lol. your brother.
  - judk 12y ago
    Right. That's what's frustrating about WebGL.
bobajeff 12y ago
It ran pretty well in Chrome for Android. A few observations about it: The drag view was buggy so I had to re-click it over and over again. It also crashed on me a a couple of times. Also placing objects was hard to do and it took me awhile to figure out how to drag the screen.
clarry 12y ago
Got any screenshots?
- louhike 12y ago
  http://3dflashlo.files.wordpress.com/2014/07/sim14.jpg?w=518 http://3dflashlo.files.wordpress.com/2014/07/sim14.jpg?w=518
nakedrobot2 12y ago
Awesome! Brings back old memories of late nights and precious cities with the very first simcity. At this point, my browser has ground to a halt, my retina macbook is running very hot, and the little green rectangle does not follow the cursor anymore to aim where i'm going to plant the next building: https://dl.dropboxusercontent.com/u/14314213/Screen%20Shot%202014-11-28%20at%207.02.56%20PM.jpg https://dl.dropboxusercontent.com/u/14314213/Screen%20Shot%2... cheers!
Kequc 12y ago
In Chrome on OS X I find myself clicking to place a zone then having to wait, then move my mouse a tiny bit before the zone would appear. If I started moving the mouse too much after clicking it gets put in the wrong place and if I don't move the mouse the zone never appears. After 10 minutes I hit a bug where adding more zones seemed to place an 'invisible' zone. Which deleted the trees that were there and could be connected to electricity but didn't draw anything on the ground and would never populate. Or at least I couldn't see if it was populated and I couldn't play anymore.
- M2Ys4U 12y ago
  I've hit that bug a few times. If you save the map, refresh the page, load the map again and bulldoze the invisible zones everything works again.
- Redoubts 12y ago
  Definitely seems to get buggier with time http://i.imgur.com/oAEulTD.png http://i.imgur.com/oAEulTD.png
- seanalltogether 12y ago
  Happens in firefox osx as well.
- Animats 12y ago
  I'm seeing those "invisibles" in Chrome/Win7, too. It's as if the display engine has run out of sprites. Is there some limited display resource here?
jplahn 12y ago
Really enjoy this! Like everyone else, the nostalgia is so strong. The only thing that seemed off for me was the "Drag", which I think somebody else mentioned. I found myself clicking and re-clicking it multiple times to pan around the map, which got old after a bit. That was in latest Chrome on Mac OSX. Great work however!
make3 12y ago
pretty awesome. just wanted to say that in latest chrome on windows 8.1, when the city gets in 30k population range, new buildings and zonings model's don't appear; well, everything new doesn't appear, pretty much. also, wire seems to have trouble being built over steets most of the time
odiroot 12y ago
Surprisingly it runs on my Jolla. I thought the browser is not enough bleeding-edge. It's pretty smooth as well, although switching to snow kills it a bit.
Animats 12y ago
Breaks Ghostery: Exception { message: "", result: 2147746065, name: "NS_ERROR_NOT_AVAILABLE", filename: "resource://gre/modules/addons/XPIProvider.jsm -> jar:file:///home/john/.mozilla/firefox/ifg18hmm.default/extensions/551f2920-3c19-11e1-b86c-0800200c9a66@jetpack.xpi!/bootstrap.js -> resource://gre/modules/commonjs/toolkit/loader.js -> resource://firefox-at-ghostery-dot-com/ghostery/lib/ui/desktop/button.js", lineNumber: 60, columnNumber: 0, inner: null, data: null, stack: "create@resource://gre/modules/addons/XPIProvider.jsm -> jar:file:///home/john/.mozilla/firefox/ifg18hmm.default/extensions/551f2920-3c19-11e1-b86c-0800200c9a66@jetpack.xpi!/bootstrap.js -> resource://gre/modules/commonjs/toolkit/loader.js -> resource://firefox-at-ghostery-dot-com/ghostery/lib/ui/desktop/button.js:60:11 Reported to Ghostery support.
PsychopompPoet 12y ago
wow thanks this is awesome
Apofis 12y ago
Doesn't work Chromium 38.0.2125.111 Ubuntu 14.10
DonHopkins 12y ago
I'm really glad to see this wonderful work that people have done based on the original SimCity source code! many thanks to Will Wright and the people at EA/Maxis and OLPC for helping make it open source, and to everyone who worked on making it run so nicely and easily in the web browser. This project shows exactly why that was an important thing to do, and I hope it inspires others to do similar things.
fffrad 12y ago
This is amazing. I remember playing this game before and it was all choppy. I am not sure it used threejs before. Good job in improving it.
johnloeber 12y ago
Wow, this is very impressive. Some people say that anything that can be done in a C-type language will be done in JS between five and ten years later -- this is evidence for that point. The gameplay feels nice, and it reminds me of Caesar II, if that game is familiar to anyone. That being said, I think the game would benefit from introducing a few objectives.
- frik 12y ago
  You are right. About Caesar II/III, it was a nice city building game. But the 3DCity game is very similar to another game called SimCity/SimCity2000. Some mentioned in this thread that it even uses the open source code of the original SimCity 1 for its city simulation code.
ilija139 12y ago
What to do to solve the pollution problem? :D
- Animats 12y ago
  Haven't found anything yet. Concentrating all the industry away from the residential sections doesn't help. Using all nuclear power doesn't help.
  - anonfunction 12y ago
    Building a lot of parks?
Nmachine 12y ago
Crashes Firefox mobile
olofd 12y ago
Feel asleep after playing the game. I woke up rich! http://imgur.com/BTZdkCo http://imgur.com/BTZdkCo
msie 12y ago
Didn't work until I reenabled Hardware Acceleration in Chrome settings. Doh!

434 points by huskyr 12y ago

Beautiful work with Three.js. But the simulation work is also really impressive -- and a lot of work. Simulation code here: http://lo-th.github.io/3d.city/build/city.3d.js http://lo-th.github.io/3d.city/build/city.3d.js Background worker (neat idea) that handles all user input and costly events, to keep the 3D animations consistently fast: http://lo-th.github.io/3d.city/js/worker.city.js http://lo-th.github.io/3d.city/js/worker.city.js

willvarfar 12y ago
Very neat! There are small details like laying out roads and making power lines go over them etc that are super-fiddly too. I know this because I played around with my own simcity for a while, first in true 3D (making curvy roads look nice is damn difficult) and then a 2D grid. Here's a screenshot I was particularly proud of - the effort to get to that point was more than it looks! http://media.tumblr.com/c9b51ca1eb2b3e89eb8d5af0f560ec34/tumblr_inline_mm0koaB6MW1qz4rgp.jpg http://media.tumblr.com/c9b51ca1eb2b3e89eb8d5af0f560ec34/tum... More on my algos http://williamedwardscoder.tumblr.com/post/49797579721/willcity-update http://williamedwardscoder.tumblr.com/post/49797579721/willc... I was going to procedurally produce the buildings using a variation on Eisenscript https://sites.google.com/site/williamedwardscoder/home/extendingeisenscript https://sites.google.com/site/williamedwardscoder/home/exten... with variables in the script based on things like price, distance to other zones, scores etc I look at the files you link and think "yeah!". I put my city simulation into a Web Worker and the UI in the browser thread though.
agentultra 12y ago
The worker code is interesting. Looks like a single observer that watches everything and dispatches to methods on a global state object. One would expect one observer per subject. Is there some implementation detail in web workers that makes this design more efficient than registering an observer per event?
Keloran 12y ago
the whole repo, much easier https://github.com/lo-th/3d.city https://github.com/lo-th/3d.city
jastanton 12y ago
For clarity, by user input it handles the callback of the map being clicked to delegate which tool it's going to use and to update the budget etc... I was excited at first to see all the event handlers setup in a thread that wasn't the UI thread because event handlers are expensive but that doesn't appear to be the case. AFAIK webworkers are fairly isolated so something like setting up event handlers would not be possible.
graememcc 12y ago
> The simulation work is also really impressive -- and a lot of work. The simulation is from my own micropolisJS (http://micropolisjs.graememcc.co.uk http://micropolisjs.graememcc.co.uk and https://github.com/graememcc/micropolisJS https://github.com/graememcc/micropolisJS) just stripped of the GPL License headers and attribution. micropolisJS in turn is a port of Micropolis, the open-source release of Sim City 1989 for One Laptop Per Child. Edit: edited the link. You'd think I should get links to my own site correct!
- judk 12y ago
  Is that compliant with your license?
  - the_mitsuhiko 12y ago
    It's his own work. He does not be to be compliant with anything.
    - bhouston 12y ago
      It isn't his own work apparently, he copied the simulation and removed the GPL license statement.
      - edvinbesic 12y ago
        It is his own work apparently. `The simulation is from my own micropolisJS (http://micropolisjs.graememcc.co.uk http://micropolisjs.graememcc.co.uk and https://github.com/graememcc/micropolisJS https://github.com/graememcc/micropolisJS) just stripped of the GPL License headers and attribution.`
        anamexis 12y ago
        That is not the same person as the one who made the 3D.CITY game.
        stickydink 12y ago

ceeK 12y ago

Thanks for wasting away the last 30 mins of my life (really it's fantastic, great job!).

huskyr 12y ago
Not my game, just posted the link!

willvarfar 12y ago

Here's what Simcity 3D ought to look like! http://media.tumblr.com/tumblr_m1ouer157w1r3qp3f.jpg http://media.tumblr.com/tumblr_m1ouer157w1r3qp3f.jpg (Found it http://www.darkroastedblend.com/2012/03/retro-future-glorious-transportation.html http://www.darkroastedblend.com/2012/03/retro-future-gloriou... here and used it as a desktop wallpaper for ages!)

erikb 12y ago

It's nearly killing my whole computer. What are the requirements to run it?

AlexeyBrin 12y ago
Preferably a WebGL capable browser and video card, otherwise Three.js could potentially switch to HTML5 canvas.
- erikb 12y ago
  On the newest FF it's very slow (maybe not WebGL?) and on the current Chromium it's not even loading. Both running on a freshly installed Ubuntu 14.04.
  - dkyc 12y ago
    Butter-smooth on latest Chrome for Mac OS X
  - AlexeyBrin 12y ago
    Do you have proper drivers for your video card on Ubuntu ? On my MacBook Air runs smooth on both Chrome and Firefox. Same on Windows 8.1. Unfortunately, I can't test it on Ubuntu because I don't have a GUI installation of Ubuntu (I use the server version).
  - bryanlarsen 12y ago
    does this work? http://get.webgl.org/ http://get.webgl.org/ what does about://gpu say in Chrome? There are bugs in the latest version of Chrome for Ubuntu in both the Intel and nVidia drivers.
  - diltonm 12y ago
    I ran it on Ubuntu 14.04, Google Chrome, nVidia card, it ran great! The CPU usage was a lot lower than I expected for JavaScript doing WebGL.
  - nacs 12y ago

mxfh 12y ago

The developers, Laurent Thillet, blog is here: http://3dflashlo.wordpress.com/ http://3dflashlo.wordpress.com/ including other crazy stuff like this: http://3dflashlo.wordpress.com/2014/02/17/png-to-script/ http://3dflashlo.wordpress.com/2014/02/17/png-to-script/

Shengbo 12y ago

This is beautiful, thank you for posting.

cturhan 12y ago

As a three.js fun, I enjoyed very much. Great job.

aikah 12y ago

Nice! quite fun!

diltonm 12y ago

The Load and Save worked, the game is amazingly good. The use of "use strict" blew me away, I had no idea that existed, it gives me a sense that JavaScript is becoming a solid language. The game, day/night, seasons, I would buy this. It might need to be converted to Java to lower CPU usage but even as JavaScript it actually uses less than I'd have thought. Very nice work. On "use strict" I can't believe all the stuff JavaScript allows when it's not used, so I'm glad it exists: http://www.w3schools.com/js/js_strict.asp http://www.w3schools.com/js/js_strict.asp

jguimont 12y ago

The last 10 min reminded me how much time I spent playing SimCity, SimTower and Civilization.

judk 12y ago

It runs almost as fast as simcity native ran on my 33Mhz 486 in 1991. Is WebGL evere going to really work?

prezjordan 12y ago
Something tells me your browser doesn't support WebGL, in which case Three.js will default to canvas operations.
- make3 12y ago
  lol. your brother.
- judk 12y ago
  Right. That's what's frustrating about WebGL.

bobajeff 12y ago

It ran pretty well in Chrome for Android. A few observations about it: The drag view was buggy so I had to re-click it over and over again. It also crashed on me a a couple of times. Also placing objects was hard to do and it took me awhile to figure out how to drag the screen.

clarry 12y ago

Got any screenshots?

louhike 12y ago
http://3dflashlo.files.wordpress.com/2014/07/sim14.jpg?w=518 http://3dflashlo.files.wordpress.com/2014/07/sim14.jpg?w=518

nakedrobot2 12y ago

Awesome! Brings back old memories of late nights and precious cities with the very first simcity. At this point, my browser has ground to a halt, my retina macbook is running very hot, and the little green rectangle does not follow the cursor anymore to aim where i'm going to plant the next building: https://dl.dropboxusercontent.com/u/14314213/Screen%20Shot%202014-11-28%20at%207.02.56%20PM.jpg https://dl.dropboxusercontent.com/u/14314213/Screen%20Shot%2... cheers!

Kequc 12y ago

In Chrome on OS X I find myself clicking to place a zone then having to wait, then move my mouse a tiny bit before the zone would appear. If I started moving the mouse too much after clicking it gets put in the wrong place and if I don't move the mouse the zone never appears. After 10 minutes I hit a bug where adding more zones seemed to place an 'invisible' zone. Which deleted the trees that were there and could be connected to electricity but didn't draw anything on the ground and would never populate. Or at least I couldn't see if it was populated and I couldn't play anymore.

M2Ys4U 12y ago
I've hit that bug a few times. If you save the map, refresh the page, load the map again and bulldoze the invisible zones everything works again.
Redoubts 12y ago
Definitely seems to get buggier with time http://i.imgur.com/oAEulTD.png http://i.imgur.com/oAEulTD.png
seanalltogether 12y ago
Happens in firefox osx as well.
Animats 12y ago
I'm seeing those "invisibles" in Chrome/Win7, too. It's as if the display engine has run out of sprites. Is there some limited display resource here?

jplahn 12y ago

Really enjoy this! Like everyone else, the nostalgia is so strong. The only thing that seemed off for me was the "Drag", which I think somebody else mentioned. I found myself clicking and re-clicking it multiple times to pan around the map, which got old after a bit. That was in latest Chrome on Mac OSX. Great work however!

make3 12y ago

pretty awesome. just wanted to say that in latest chrome on windows 8.1, when the city gets in 30k population range, new buildings and zonings model's don't appear; well, everything new doesn't appear, pretty much. also, wire seems to have trouble being built over steets most of the time

odiroot 12y ago

Surprisingly it runs on my Jolla. I thought the browser is not enough bleeding-edge. It's pretty smooth as well, although switching to snow kills it a bit.

Animats 12y ago

Breaks Ghostery: Exception { message: "", result: 2147746065, name: "NS_ERROR_NOT_AVAILABLE", filename: "resource://gre/modules/addons/XPIProvider.jsm -> jar:file:///home/john/.mozilla/firefox/ifg18hmm.default/extensions/551f2920-3c19-11e1-b86c-0800200c9a66@jetpack.xpi!/bootstrap.js -> resource://gre/modules/commonjs/toolkit/loader.js -> resource://firefox-at-ghostery-dot-com/ghostery/lib/ui/desktop/button.js", lineNumber: 60, columnNumber: 0, inner: null, data: null, stack: "create@resource://gre/modules/addons/XPIProvider.jsm -> jar:file:///home/john/.mozilla/firefox/ifg18hmm.default/extensions/551f2920-3c19-11e1-b86c-0800200c9a66@jetpack.xpi!/bootstrap.js -> resource://gre/modules/commonjs/toolkit/loader.js -> resource://firefox-at-ghostery-dot-com/ghostery/lib/ui/desktop/button.js:60:11 Reported to Ghostery support.

PsychopompPoet 12y ago

wow thanks this is awesome

Apofis 12y ago

Doesn't work Chromium 38.0.2125.111 Ubuntu 14.10

DonHopkins 12y ago

I'm really glad to see this wonderful work that people have done based on the original SimCity source code! many thanks to Will Wright and the people at EA/Maxis and OLPC for helping make it open source, and to everyone who worked on making it run so nicely and easily in the web browser. This project shows exactly why that was an important thing to do, and I hope it inspires others to do similar things.

fffrad 12y ago

This is amazing. I remember playing this game before and it was all choppy. I am not sure it used threejs before. Good job in improving it.

johnloeber 12y ago

Wow, this is very impressive. Some people say that anything that can be done in a C-type language will be done in JS between five and ten years later -- this is evidence for that point. The gameplay feels nice, and it reminds me of Caesar II, if that game is familiar to anyone. That being said, I think the game would benefit from introducing a few objectives.

frik 12y ago
You are right. About Caesar II/III, it was a nice city building game. But the 3DCity game is very similar to another game called SimCity/SimCity2000. Some mentioned in this thread that it even uses the open source code of the original SimCity 1 for its city simulation code.

ilija139 12y ago

What to do to solve the pollution problem? :D

Animats 12y ago
Haven't found anything yet. Concentrating all the industry away from the residential sections doesn't help. Using all nuclear power doesn't help.
- anonfunction 12y ago
  Building a lot of parks?

Nmachine 12y ago

Crashes Firefox mobile

olofd 12y ago

Feel asleep after playing the game. I woke up rich! http://imgur.com/BTZdkCo http://imgur.com/BTZdkCo

msie 12y ago

Didn't work until I reenabled Hardware Acceleration in Chrome settings. Doh!