7 ms·

Show HN: Interactive WebGL visualization of all 47K buildings in Manhattan

151 points by taylorbaldwin 8y ago

taylorbaldwin 8y ago
Data sources: https://www1.nyc.gov/site/doitt/initiatives/3d-building.page https://www1.nyc.gov/site/doitt/initiatives/3d-building.page https://www1.nyc.gov/site/planning/data-maps/open-data/dwn-pluto-mappluto.page https://www1.nyc.gov/site/planning/data-maps/open-data/dwn-p... And code is open: https://github.com/rolyatmax/nyc-buildings https://github.com/rolyatmax/nyc-buildings
- pvg 8y ago
  Seems unhappy about something in Chrome 67 (OS X). https://imgur.com/a/v9eosLz https://imgur.com/a/v9eosLz
ratsimihah 8y ago
I left it running in a background tab and forgot about it, and suddenly my computer got REALLY slow haha.
- sgt 8y ago
  Yes that's still the case with most WebGL demos I click. I clicked this one, and played around for 10 seconds. Then I heard the fans of my Macbook Pro spinning up.
  - laythea 8y ago
    Although I agree that this seems badly optimised, I too have a Macbook Pro, and the fans spinning up is quite normal when using 3D applications. Ie. Although webGL, I think most of the work load is the "GL" part not the "web" part.
gandreani 8y ago
I really appreciate the confirmation modal in the beginning. This is _very_ cool
- justherefortart 8y ago
  Didn't work in Firefox for me, maybe I have something disabled. Reminds me of Escape from New York a bit :-)
  - vanderZwan 8y ago
    I suspect this is the reason: > Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://tbaldwin.nyc3.digitaloceanspaces.com/bin-to-bbl.csv https://tbaldwin.nyc3.digitaloceanspaces.com/bin-to-bbl.csv. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
- bkircher 8y ago
  Indeed. Also no three.js [1]. Only some d3 [2] bits. [1] https://threejs.org/ https://threejs.org/ [2] https://github.com/d3/d3-scale https://github.com/d3/d3-scale
  - wereHamster 8y ago
    regl (http://regl.party/ http://regl.party/) instead of three.js. For such relatively static scenes (the 3D model doesn't change, only the vertex colors), regl is simpler IMO. You have more control over when stuff (buffers, shaders) are allocated. And no scene graph means you don't have to traverse it during each render (to update the world matrix etc).
doughj3 8y ago
Doesn't seem to work in Chromium 62 or Chrome 63. Occasionally the browser says "Rats! WebGL hit a snag. [Ignore] [Reload]", and neither action helps. Occasionally WebGL doesn't hit a snag, but the visualization only loads partly, with some buildings, sometimes with color but sometimes not, and just overall appears broken.
- 0x0 8y ago
  Why are you running chrome/chromium 62-63? 66 is the current version, isn't there a ton of vulnerabilities in older versions?
htgb 8y ago
Both scrolling and panning (dragging) feels inverted to me! Specifically, it behaves the opposite way to for example Google Maps. (Scrolling away from the computer, towards me, takes me closer to the map. Dragging doesn't keep that map pixel under the cursor, but drags the "camera" around.) The visualisation itself was cool, if a bit slow in Firefox on my laptop.
- dbatten 8y ago
  I second this. I'd also add that the inputs are way too sensitive. Moving my mouse only a couple of pixels completely inverts the visualization! It's basically impossible to exert any fine-grained control.
- fogleman 8y ago
  Scroll zoom direction preference is basically a toss up, but the panning seems natural to me.
- laythea 8y ago
  I was unable to control it properly and gave up.
- Raphmedia 8y ago
  The camera works exactly like it would in a 3D editing software. Felt 100% intuitive to me. Think of it as grabbing a model physically moving it vs. you controlling camera across a 3D scene. Edit: Or perhaps, you being the city in third person vs. you being the camera in first person.
  - saagarjha 8y ago
    No, it doesn't. If you "grab" a point closer to yourself than the axis of rotation, then yes, it kind of acts like it should, but if you grab something far away then the rotation direction doesn't flip as it would in other software. This breaks the illusion that you're grabbing the model. It would probably be fine if they went with the opposite model ("grabbing the viewport"), as long as they kept it consistent, but they don't and it makes it feel out of place.
rhcom2 8y ago
Very cool, small quality of life suggestion is allow movement with WASD or the arrow keys.
iooi 8y ago
The camera should move when zooming in, for example if I'm pointing at the Empire State and I zoom in, the zoom should center on the building.
deleted 8y ago
[deleted]
2474 8y ago
Very cool data visualization. Are there any particular reasons you chose not to a library like THREE? Bundle size perhaps?
deleted 8y ago
[deleted]
nwsm 8y ago
Am I misinterpreting something or are the height colors meaningless?
daveguy 8y ago
Crashed my browser (but on mobile, so maybe expected for intensive webgl). Chrome Mobile Version: 65.0.3325.109 Second launch didn't crash but gave the error: webgl hit a snag with the option to reload or ignore. Reload: always gives the same error. Ignore: if no "loading" visible then no further response. If "loading" visible then loading bar continues to load until ~95% complete then no futher response.
- hughes 8y ago
  Crashed mine on desktop too, on 66.0.3359.117. Locks up for a few seconds, slowly reaches ~75% loading progress, then "Aw, Snap!"
izacus 8y ago
Hmm, this actually runs surprisingly slow (I have a top of the line 15" MBP with discrete graphics and it's not hitting 30fps). What's the deal with that? Is WebGL just so inherently slower than "proper" OpenGL powering games? Lack of optimization? What are the bottlenecks?
- shurcooL 8y ago
  I'm guessing the largest cause of the performance not being great is the large amount of data, and the approach to render it is not optimal. If the same rendering algorithm was implemented using OpenGL instead, I suspect the performance would not be significantly different from this WebGL version. If you want a random example of a well-optimized demo that uses WebGL for rendering, try the demo at https://www.funkykarts.rocks/demo.html https://www.funkykarts.rocks/demo.html and see how well that performs.
- ucaetano 8y ago
  You can compare this with Google Maps, since IIRC Google Maps also uses WebGL, and renders all of Manhattan with far more detail and without a snag.
- mortehu 8y ago
  For static geometry like this, the entire scene should be uploaded to the GPU in a few calls when you open the page, and then never again. Only the transformation matrix, a 4x4 matrix which transforms vectors from world space to display space, needs updating. There's no reason this shouldn't run at 60fps on any machine that supports WebGL (excluding CPU-only implementations).
  - mattdesl 8y ago
    The geometry in this demo already is static. The app is vertex bound since the geometry has 11 million vertices, which is not trivial for any GPU to render.
    - izacus 8y ago
      How does that number compare to for example Cities: Skylines which renders cityscapes smoothly on the same hardware?
woodpanel 8y ago
Slightly off-topic: As the majority of Central Park front property seems to be Co-Op owned, can anyone explain to me how this can be? (In Europe Co-Op housing AFAIK isn't for the poor, but not that luxurious either)
- walrus01 8y ago
  i might be grossly wrong, but canadian/british-derived legal system perspective: these properties probably pre-date modern legal systems for what we know as a strata-title property in british columbia, queensland or new south wales? to the best of my knowledge the NYC cooperatives are corporations where the individual residents own shares, so it's functionally equivalent to a strata title condominium. the main difference being that people cannot just buy a unit in the coop, they need to be approved by a board vote. apparently even celebrities and senior business figures occasionally get turned down for coop memberships in nyc because other members of the board consider them undesirable for some reason. whereas in a fee-simple strata title system any person or corporation with sufficient money can buy a condominium (unless it's an age 55+ building).
walrus01 8y ago
does anybody remember messing around with VRML browser plugins in Netscape in about 1997? https://en.wikipedia.org/wiki/VRML https://en.wikipedia.org/wiki/VRML
futurix 8y ago
"tends to work best with Chrome" - back to 2000s with new tech.
noobermin 8y ago
Is it just me? The colormap doesn't seem correct for the height. Other than that it's nice.
aap_ 8y ago
It's all white and light grey, very hard to see anything :/
DougN7 8y ago
That was really cool. I zoomed in until I was essentially at ground level and looked around. I have to say that to me, it was depressing. I can't imagine living in a place where 90%(?) of the sky is obscured. It's great so many people like living in the city, but I personally could never do it.

151 points by taylorbaldwin 8y ago

Data sources: https://www1.nyc.gov/site/doitt/initiatives/3d-building.page https://www1.nyc.gov/site/doitt/initiatives/3d-building.page https://www1.nyc.gov/site/planning/data-maps/open-data/dwn-pluto-mappluto.page https://www1.nyc.gov/site/planning/data-maps/open-data/dwn-p... And code is open: https://github.com/rolyatmax/nyc-buildings https://github.com/rolyatmax/nyc-buildings

pvg 8y ago
Seems unhappy about something in Chrome 67 (OS X). https://imgur.com/a/v9eosLz https://imgur.com/a/v9eosLz

ratsimihah 8y ago

I left it running in a background tab and forgot about it, and suddenly my computer got REALLY slow haha.

sgt 8y ago
Yes that's still the case with most WebGL demos I click. I clicked this one, and played around for 10 seconds. Then I heard the fans of my Macbook Pro spinning up.
- laythea 8y ago
  Although I agree that this seems badly optimised, I too have a Macbook Pro, and the fans spinning up is quite normal when using 3D applications. Ie. Although webGL, I think most of the work load is the "GL" part not the "web" part.

gandreani 8y ago

I really appreciate the confirmation modal in the beginning. This is _very_ cool

justherefortart 8y ago
Didn't work in Firefox for me, maybe I have something disabled. Reminds me of Escape from New York a bit :-)
- vanderZwan 8y ago
  I suspect this is the reason: > Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://tbaldwin.nyc3.digitaloceanspaces.com/bin-to-bbl.csv https://tbaldwin.nyc3.digitaloceanspaces.com/bin-to-bbl.csv. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
bkircher 8y ago
Indeed. Also no three.js [1]. Only some d3 [2] bits. [1] https://threejs.org/ https://threejs.org/ [2] https://github.com/d3/d3-scale https://github.com/d3/d3-scale
- wereHamster 8y ago
  regl (http://regl.party/ http://regl.party/) instead of three.js. For such relatively static scenes (the 3D model doesn't change, only the vertex colors), regl is simpler IMO. You have more control over when stuff (buffers, shaders) are allocated. And no scene graph means you don't have to traverse it during each render (to update the world matrix etc).

doughj3 8y ago

Doesn't seem to work in Chromium 62 or Chrome 63. Occasionally the browser says "Rats! WebGL hit a snag. [Ignore] [Reload]", and neither action helps. Occasionally WebGL doesn't hit a snag, but the visualization only loads partly, with some buildings, sometimes with color but sometimes not, and just overall appears broken.

0x0 8y ago
Why are you running chrome/chromium 62-63? 66 is the current version, isn't there a ton of vulnerabilities in older versions?

htgb 8y ago

Both scrolling and panning (dragging) feels inverted to me! Specifically, it behaves the opposite way to for example Google Maps. (Scrolling away from the computer, towards me, takes me closer to the map. Dragging doesn't keep that map pixel under the cursor, but drags the "camera" around.) The visualisation itself was cool, if a bit slow in Firefox on my laptop.

dbatten 8y ago
I second this. I'd also add that the inputs are way too sensitive. Moving my mouse only a couple of pixels completely inverts the visualization! It's basically impossible to exert any fine-grained control.
fogleman 8y ago
Scroll zoom direction preference is basically a toss up, but the panning seems natural to me.
laythea 8y ago
I was unable to control it properly and gave up.
Raphmedia 8y ago
The camera works exactly like it would in a 3D editing software. Felt 100% intuitive to me. Think of it as grabbing a model physically moving it vs. you controlling camera across a 3D scene. Edit: Or perhaps, you being the city in third person vs. you being the camera in first person.
- saagarjha 8y ago
  No, it doesn't. If you "grab" a point closer to yourself than the axis of rotation, then yes, it kind of acts like it should, but if you grab something far away then the rotation direction doesn't flip as it would in other software. This breaks the illusion that you're grabbing the model. It would probably be fine if they went with the opposite model ("grabbing the viewport"), as long as they kept it consistent, but they don't and it makes it feel out of place.

rhcom2 8y ago

Very cool, small quality of life suggestion is allow movement with WASD or the arrow keys.

iooi 8y ago

The camera should move when zooming in, for example if I'm pointing at the Empire State and I zoom in, the zoom should center on the building.

deleted 8y ago

[deleted]

2474 8y ago

Very cool data visualization. Are there any particular reasons you chose not to a library like THREE? Bundle size perhaps?

deleted 8y ago

[deleted]

nwsm 8y ago

Am I misinterpreting something or are the height colors meaningless?

daveguy 8y ago

Crashed my browser (but on mobile, so maybe expected for intensive webgl). Chrome Mobile Version: 65.0.3325.109 Second launch didn't crash but gave the error: webgl hit a snag with the option to reload or ignore. Reload: always gives the same error. Ignore: if no "loading" visible then no further response. If "loading" visible then loading bar continues to load until ~95% complete then no futher response.

hughes 8y ago
Crashed mine on desktop too, on 66.0.3359.117. Locks up for a few seconds, slowly reaches ~75% loading progress, then "Aw, Snap!"

izacus 8y ago

Hmm, this actually runs surprisingly slow (I have a top of the line 15" MBP with discrete graphics and it's not hitting 30fps). What's the deal with that? Is WebGL just so inherently slower than "proper" OpenGL powering games? Lack of optimization? What are the bottlenecks?

shurcooL 8y ago
I'm guessing the largest cause of the performance not being great is the large amount of data, and the approach to render it is not optimal. If the same rendering algorithm was implemented using OpenGL instead, I suspect the performance would not be significantly different from this WebGL version. If you want a random example of a well-optimized demo that uses WebGL for rendering, try the demo at https://www.funkykarts.rocks/demo.html https://www.funkykarts.rocks/demo.html and see how well that performs.
ucaetano 8y ago
You can compare this with Google Maps, since IIRC Google Maps also uses WebGL, and renders all of Manhattan with far more detail and without a snag.
mortehu 8y ago
For static geometry like this, the entire scene should be uploaded to the GPU in a few calls when you open the page, and then never again. Only the transformation matrix, a 4x4 matrix which transforms vectors from world space to display space, needs updating. There's no reason this shouldn't run at 60fps on any machine that supports WebGL (excluding CPU-only implementations).
- mattdesl 8y ago
  The geometry in this demo already is static. The app is vertex bound since the geometry has 11 million vertices, which is not trivial for any GPU to render.
  - izacus 8y ago
    How does that number compare to for example Cities: Skylines which renders cityscapes smoothly on the same hardware?

woodpanel 8y ago

Slightly off-topic: As the majority of Central Park front property seems to be Co-Op owned, can anyone explain to me how this can be? (In Europe Co-Op housing AFAIK isn't for the poor, but not that luxurious either)

walrus01 8y ago
i might be grossly wrong, but canadian/british-derived legal system perspective: these properties probably pre-date modern legal systems for what we know as a strata-title property in british columbia, queensland or new south wales? to the best of my knowledge the NYC cooperatives are corporations where the individual residents own shares, so it's functionally equivalent to a strata title condominium. the main difference being that people cannot just buy a unit in the coop, they need to be approved by a board vote. apparently even celebrities and senior business figures occasionally get turned down for coop memberships in nyc because other members of the board consider them undesirable for some reason. whereas in a fee-simple strata title system any person or corporation with sufficient money can buy a condominium (unless it's an age 55+ building).

walrus01 8y ago

does anybody remember messing around with VRML browser plugins in Netscape in about 1997? https://en.wikipedia.org/wiki/VRML https://en.wikipedia.org/wiki/VRML

futurix 8y ago

"tends to work best with Chrome" - back to 2000s with new tech.

noobermin 8y ago

Is it just me? The colormap doesn't seem correct for the height. Other than that it's nice.

aap_ 8y ago

It's all white and light grey, very hard to see anything :/

DougN7 8y ago

That was really cool. I zoomed in until I was essentially at ground level and looked around. I have to say that to me, it was depressing. I can't imagine living in a place where 90%(?) of the sky is obscured. It's great so many people like living in the city, but I personally could never do it.