Building a pure CSS 3D City | Hacker News Reader

Building a pure CSS 3D City

cubiq.org

78 pointsukdm15 comments

A lot of these CSS posts reference the performance gains realized from using CSS transforms as opposed to canvas because the transforms are hardware-accelerated.

How long will it be before canvas gets hardware-accelerated? Is there a technical hurdle that needs to be overcome in getting (for example) V8 to talk directly to GPUs?

IE9 has hardware-accelerated canvas. It's a work-in-progress in most major browsers I believe.

Chrome also has a GPU-accelerated 2D canvas, but you have to enable it in the about:flags page.

Canvas is still 2D though, so unless they develop a 3D drawingContext for canvas, you won't be able to do what's in this article with the same kind of hardware acceleration. With canvas you'd still need to run all your own poly drawing routines, while I imagine Webkit is able to take 3D CSS properties and map <div>'s straight to polys that render with hardware T&L pipelines. (Which makes me wonder, how the heck are they dealing with Z-order?)

There already is a hardware accelerated 3D context that uses the canvas element... WebGL!

Whoa, didn't realize WebGL used canvas. Cool.

Tried cranking up the number of buildings...

http://dl.dropbox.com/u/18782/durp.html

For the record, even though all of his live demos are marked Safari only, they work just fine in Chrome (for me anyways)

If anyone likes this kind of stuff, you might find my weekend project to be interesting: https://zetabee.com/weave/

You can make pretty 2D designs using CSS:

https://zetabee.com/weave/share/5e6a5811

https://zetabee.com/weave/share/c6593101

It is similar in concept to Structure Synth ( http://structuresynth.sourceforge.net/ ) but in 2D and using CSS. I was thinking of making a browser-based 3D Structure Synth but not many people seem to like making art with code.

Very very creative! A browser based SimCity clone should theoretically be possible with enough processing power.

Minecraft demo in Chrome/Safari: http://mrdoob.github.com/three.js/examples/webgl_geometry_mi...

You could skip all the CSS transformation stuff and just serve the browser the images in the orientation you want them. In this projection and buildings-of-cubes, there's only 2 perspectives for a wall and 1 for ground/roofs.

And how does real time spinning and panning work with your suggestion?

You need the transformations to make the buildings spin in your browser window. Didn't you see the demo?

Panning would work fine since the objects in this projection don't change anything but position with panning. Spinning would only work in 90 degree increments, but that's fine for many, maybe most cases you'd be doing this. Most isometric-ish projection systems I recall seeing don't spin / change perspective. I'd imagine that's because it's disturbing to look at since things don't get smaller as they get farther away. For whatever reason the static version doesn't induce the same reaction.

What did I say that called for downvoting?

Reply on news.ycombinator.com