3D.City – Game built with three.js and sea3d | Hacker News Reader

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

lo-th.github.io

434 pointshuskyr81 comments

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

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

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/tum...

More on my algos 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/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.

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?

the whole repo, much easier

https://github.com/lo-th/3d.city

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.

> The simulation work is also really impressive -- and a lot of work.

The simulation is from my own micropolisJS (http://micropolisjs.graememcc.co.uk and 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!

Is that compliant with your license?

It's his own work. He does not be to be compliant with anything.

It isn't his own work apparently, he copied the simulation and removed the GPL license statement.

It is his own work apparently.

`The simulation is from my own micropolisJS (http://micropolisjs.graememcc.co.uk and https://github.com/graememcc/micropolisJS) just stripped of the GPL License headers and attribution.`

That is not the same person as the one who made the 3D.CITY game.

It's not the same guy. He does give credit in the README, but still wrongfully stripped out the license information.

https://github.com/lo-th/3d.city/blob/gh-pages/README.md

"Start with the excelent port of Micropolis by graememcc"

It is not necessary, that it is the same guy. When graememcc adds a new license to his own work, than he can do it and an other person can use this license with agreement of the first author.

UPDATE: As much I see now, it seems that graememcc did not consent in using his work with altered license. So it is a violation.

There are three pieces of software. Each software was written by one person.

Micropolis is gpl'd.

MicropolisJS is a version of that, and is also correctly licensed.

3DCity - the submission here - is written by someone else. This person stripped the gpl headers and re-used some code without correctly licensing that code.

lo-th is not graememcc.

All the source code is available, and the previous work is cited, so how is this a violation of the license?

I think, when he is the author, than he can decide which licence to use. There are many examples (like MySQL) where double licensing is used. The original author can decide, which licence he finds appropriate.

The author of micropolisJS is not the author of 3D City. In this case, 3D City needs to be licensed under the GPL, and I believe 3D City needs to include the copyright details for the original port.

In addition, micropolisJS has additional terms added to the GPL [0], which are clearly linked to from the top of every source file in micropolisJS [1], which need to be distributed with 3D City.

[0] http://micropolisjs.graememcc.co.uk/LICENSE

[1] https://github.com/graememcc/micropolisJS/blob/master/js/Blo...

If he is not the same author, then you are right. One statement from an other poster suggested, that he is.

The original author would have the right to add new alternative license conditions as he wishes to.

Maybe the author of 3D City should say something about it.

Edit: Now I saw, what you mean. MicropolisJS seems to be an alteration of the GPL'ed Micropolis of an other author. And the owner of MicropolisJS stripped the GPL license from it to use it in the other project (btw. why?). I am no lawyer, but it really looks to me as a violation of the GPL, at least without permission of the first author.

The author of MicropolisJS is not the author of the ThreeJS SimCity clone that is the top of this HW story.

It's not a clone, it's derived from the original SimCity source code, which EA licensed under GPL V3 with the added condition that it should not be called "SimCity" without EA's approval. So it's important that all versions of the code include that license and the required provisions.

http://donhopkins.com/home/micropolis/olpc-ea-contract.pdf

https://code.google.com/p/micropolis/wiki/License

2.1 Modification. EA hereby grants to OLPC a non-exclusive, non-transferable, non-sub licensable, non-assignable, revocable right and license to modify the Original SimCity as provided by EA for the sole purpose of producing a version of the Original SimCity for distribution on laptops provided through the OLPC Program pursuant to the specifications set forth in Exhibit A ("OLPC SimCity"). All right, title and interest in OLPC SimCity and any interim modifications shall belong solely to EA. OLPC SimCity, and any subsequent versions, will not be distributed by OLPC unless the software meets the requirements set forth in Exhibit A. For the avoidance of doubt, nothing contained in this Agreement shall be deemed to limit or restrict EA’s right to use, modify, sell, distribute or license the Original SimCity in any other manner as EA so desires.

And on a completely unrelated topic:

Q: How do you know there's an elephant hiding under your bed?

A: Your face is pressed up against the ceiling!

They're all derived from the original source code of SimCity from Maxis, that I ported to Unix for DUX Software starting in 1991 (see http://art.net/~hopkins/Don/hyperlook/SimCity.README and http://art.net/~hopkins/Don/simcity/simcity-announcement.htm... ), and which was donated by EA to the OLPC project under a modified version of the GPL V3 license, with the condition that the name "SimCity" only be used for versions of the game that have been reviewed and approved by EA QA:

https://code.google.com/p/micropolis/wiki/License

This is from section 2.1 of contract between EA and OLPC:

http://donhopkins.com/home/micropolis/olpc-ea-contract.pdf

EXHIBIT A Territory: Worldwide

Original SimCity Code: Title: SimCity (published in or about 1990)

Format: Unix Platform

Deliverable Items: EA will deliver to OLPC the following materials on or shortly after the Effective Date:

1. Source code for the Unix port version of the Original SimCity.

2. Any EA Documentation that EA deems necessary.

General Software Requirements: OLPC agrees that the OLPC SimCity will not be approved by EA for distribution under Section 2.2 of this Agreement, until the OLPC SimCity meets the following general software requirements:

1. EA’s QA team is unable to crash the game in sixteen (16) man-hours of play-time.

2. EA’s QA team is unable to find images/language that is deemed inappropriate to achieve an “E” rating by the ESRB standard.

3. No use of any EA Trademarks that would reflect negatively upon the established reputation of EA.

4. Add copyright/license information to each source file to reflect the proper licensing. Specific Software Requirements: OLPC agrees that the OLPC SimCity will not be approved by EA for distribution under Section 2.2 of this Agreement, until the OLPC SimCity meets the following specific software requirements

1. The Air Crash Disaster is removed from the game.

2. EA approved splash screen is shown before the start of the game.

3. Simplify the Main Menu with EA provided GUI elements.

4. All text in the game must be legible.

5. Game audio must work.

6. Remove all attempted multi-player features.

7. SimCity Should be properly integrated to the XO’s GUI

8. Code for the EA approved splash screen is not included in the source code to be distributed with the OLPC SimCity executable.

I found your 2D version much easier and more fun to play. Wasted about an hour outright whereas I was over with 3D City in 5 minutes, approximately.

You should mark up his repository, either add an issue or whatnot, noting that the code is missing your GPL license.

My phone is too small -- how many pixels do I need in order for your mJS to render?

looks like lo-th updated the license for you :)

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.

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.

Definitely seems to get buggier with time

http://i.imgur.com/oAEulTD.png

Happens in firefox osx as well.

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?

The developers, Laurent Thillet, blog is here: http://3dflashlo.wordpress.com/

including other crazy stuff like this: http://3dflashlo.wordpress.com/2014/02/17/png-to-script/

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

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!

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

Not my game, just posted the link!

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%2...

cheers!

Here's what Simcity 3D ought to look like! http://media.tumblr.com/tumblr_m1ouer157w1r3qp3f.jpg

(Found it http://www.darkroastedblend.com/2012/03/retro-future-gloriou... here and used it as a desktop wallpaper for ages!)

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.

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.

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

Preferably a WebGL capable browser and video card, otherwise Three.js could potentially switch to HTML5 canvas.

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.

Butter-smooth on latest Chrome for Mac OS X

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).

does this work? 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.

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.

Runs smoothly on FF on my Macbook (Retina). You likely have a driver issue.

It runs almost as fast as simcity native ran on my 33Mhz 486 in 1991.

Is WebGL evere going to really work?

Something tells me your browser doesn't support WebGL, in which case Three.js will default to canvas operations.

lol. your brother.

Right. That's what's frustrating about WebGL.

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.

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.

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.

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.

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

What to do to solve the pollution problem? :D

Haven't found anything yet. Concentrating all the industry away from the residential sections doesn't help. Using all nuclear power doesn't help.

Building a lot of parks?

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

This is beautiful, thank you for posting.

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

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

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

Crashes Firefox mobile

Got any screenshots?

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

Nice! quite fun!

Doesn't work Chromium 38.0.2125.111 Ubuntu 14.10

wow thanks this is awesome

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.

Reply on news.ycombinator.com