ViziCities Dev Diary #1: Visualising Cities in 3D using WebGL

&#62; If I'm to be honest, after compiling and writing this entry I'm actually in a state of disbelief about how much we've managed to get done in such a short space of time.<p>That is the magic of having and utilising the power of free and open-source software. Imagine not having three.js, QGIS, PostGIS etc.<p>Gorgeous work and a highly interesting "how we are doing it" insight. Thanks! Please more!

&#62; Unfortunately, in our efforts for global domination we quickly discovered the performance limitations of the project as it stood, as well as my personal knowledge with Three.js and WebGL. In short, the expanded version of London ran at a horrible 20–40fps depending on the system you viewed it on.<p>You got a lot farther than me when I tried Three.js before hitting performance problems. I was trying to make a WebGL 3d warehouse visualization app: <a href="http://chir.ag/projects/wh/" rel="nofollow">http://chir.ag/projects/wh/</a> and stopped because it was too slow once I loaded 1000 bins. I also never quite figured how to handle rotation/panning nicely (src: <a href="http://chir.ag/projects/wh/main.js" rel="nofollow">http://chir.ag/projects/wh/main.js</a>). I came up with a shorthand <a href="http://chir.ag/projects/wh/bins/wh.txt" rel="nofollow">http://chir.ag/projects/wh/bins/wh.txt</a> that expands to <a href="http://chir.ag/projects/wh/bins/bins.php" rel="nofollow">http://chir.ag/projects/wh/bins/bins.php</a> - I was going to make it an easy to use app where you could describe how the warehouse was organized with 20-30 lines of bin#s and positions and let the system generate the rest. Then it could parse APIs containing various properties per bin (full/empty, inventory amount, frequency of usage, days-since-last-used etc.) Clicking on any bin would open up a panel with more information and you'd have filtering/highlighting capability for the whole warehouse.<p>I made good progress initially but got busy with life and never got around to solving the too-many-bins problem. I still don't know how to improve the performance. Even when entire objects are outside the view, they still take up resources and time. I see you mentioned LOD support in Three.js - no idea if it would help me or not because each object is already as simple as it can be - just a box.<p>If someone wants to hack on this and make it functional, I'll help however I can.

My god, that is amazing and wonderful.<p>You should be hired by the uk.gov team to work on this full-time.<p>This, combined with various statistical information (crime, traffic, other stuff from the ONS) would be a huge boon to anyone using it and the interface makes it beginner friendly.

I would love to see more details about this.<p>How did you implement your data path from getting GIS data (shapefiles I presume) to PostGIS then GeoJSON and finally into ThreeJS?<p>What about combining the statistical data with the location?<p>And the heatmap/choropleth, is that something Three.js can do?<p>I have no knowledge of developing 3D stuff, but I have been looking into using D3 with canvas rendering just for this kind of visualizations. I'm playing with multidimensional data as stacked 3D cubes. So, getting something like this would really bootstrap my project to another level. Any thoughts about open sourcing?<p>In all, this looks very useful and expendable. The sky is the limit. Literally, when is sky coming? ;)

I am working on something similar with the prospect of getting CannonJS physics to work so that one can walk the city (in my case procedurally generated): <a href="https://twitter.com/dirkk/status/309024330115842049" rel="nofollow">https://twitter.com/dirkk/status/309024330115842049</a><p>I also tried a multi-device approach for visualisation: <a href="http://www.youtube.com/watch?v=-TiZzovx5YE" rel="nofollow">http://www.youtube.com/watch?v=-TiZzovx5YE</a><p>Any chance of collaboration?<p>From this thread I reckon there are quite a few people working on something similar. I guess it would be extremely cool if we could join forces.

Crossing my fingers <i>real</i> hard for somebody to pick this up eventually to make a no-nonsense FOSS SimCity clone out of this. Please, please, please.

The Ordnance Survey doesn't even hold height data on all buildings in the UK. They've started a few isolated projects but nothing as a deliverable dataset yet. I don't think there's a US equivalent despite your link to NYC Open Data.<p>You might want to look to Germany and CityGML. You might discover some town datasets that are complete in height and geometry detail.<p>If you happen on a LIDAR data source you've then got to tidy up against the buildings but you will run into errors caused by the time spent between the two data capture points. There's SRTM but i'm sure it'll be too coarse for your needs. I'm sure there's a replacement to SRTM but the name escapes me.<p>There's LandXplorer - now owned by Autodesk which will generate models from oblique aerial photogrammetry. There's also CityEngine that'll create fake cities based upon road networks.<p>@AndyBMapMan.

Wow, very interesting, this tickles my fancy... Imagine something like this but with an airfield, you could model the airfield and every airplane landing and getting up in real-time.

Looks awesome.<p>The Kinect could be a fun way to explore your visualizations -- seen here hooked up to Google Earth: <a href="https://github.com/jawj/pigeonsim" rel="nofollow">https://github.com/jawj/pigeonsim</a><p>Also, I'm sure <a href="http://www.bartlett.ucl.ac.uk/casa" rel="nofollow">http://www.bartlett.ucl.ac.uk/casa</a> would love to hear from you.

Its really inspiring to go through the dev stages you guyz went through while building it. Thanks for sharing :)

Excellent! Love the blog post. And ViziCities already looks beautiful. I can only imagine how wonderful it's going to be once a lot more vectors (population, vehicles, weather, energy, etc) are added in.<p>Would a simulation component be added in? Cause if it is, It'll be nothing short of awesome.<p>All the best!

If you haven't already, you guys should absolutely get some inspiration from Baidu's amazing 3D city maps. <a href="http://j.map.baidu.com/m8vSh" rel="nofollow">http://j.map.baidu.com/m8vSh</a>

This is a terrific blog post. Excellent project and excellent sharing. I feel like we have a lot of games set in real world cities to look forward to. Also: autonomous vehicle pathing?

This is amazing! It was cool to see the process of turning data points into a 3d city.. Combine this with the Occulus Rift and the Singularity won't be that far away :)

Are those clouds I see in that blurred image?<p>Are you teasing us with the prospect of 3d weather (perhaps by using radar data)?<p>If not that's cool, but if so, great idea.

FWIW, Nokia L&#38;C does not have "massive development teams" working on HTML5 visualization of geo-data, quite the opposite...

This should be used as some sort of case study in CS/IT courses. "How to be incredibly friggin' awesome."

Really amazing to get this after only one month, when you know how difficult is building 3D stuff !

You guys are friggin' wizards.

Great project. Looks really nice.

Beautiful.