

Building a pure CSS 3D City - ukdm
http://cubiq.org/building-a-pure-css-3d-city

======
javanix
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?

~~~
pak
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?)

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

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

------
amadeus
Tried cranking up the number of buildings...

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

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

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

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

~~~
chime
Minecraft demo in Chrome/Safari:
[http://mrdoob.github.com/three.js/examples/webgl_geometry_mi...](http://mrdoob.github.com/three.js/examples/webgl_geometry_minecraft_ao.html)

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

~~~
lobo_tuerto
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?

~~~
ggruschow
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.

