9 ms·

Building a pure CSS 3D City

• 51Cards 15y ago
  Very very creative! A browser based SimCity clone should theoretically be possible with enough processing power.
  • chime 15y ago
    Minecraft demo in Chrome/Safari: http://mrdoob.github.com/three.js/examples/webgl_geometry_minecraft_ao.html http://mrdoob.github.com/three.js/examples/webgl_geometry_mi...
• javanix 15y ago
  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?
  • Hovertruck 15y ago
    IE9 has hardware-accelerated canvas. It's a work-in-progress in most major browsers I believe.
  • ineedtosleep 15y ago
    Chrome also has a GPU-accelerated 2D canvas, but you have to enable it in the about:flags page.
  • pak 15y ago
    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 15y ago
      There already is a hardware accelerated 3D context that uses the canvas element... WebGL!
      • pak 15y ago
        Whoa, didn't realize WebGL used canvas. Cool.
• ggruschow 15y ago
  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.
  • ggruschow 15y ago
    What did I say that called for downvoting?
  • lobo_tuerto 15y ago
    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 15y ago
      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.
• zheng 15y ago
  For the record, even though all of his live demos are marked Safari only, they work just fine in Chrome (for me anyways)
• chime 15y ago
  If anyone likes this kind of stuff, you might find my weekend project to be interesting: https://zetabee.com/weave/ https://zetabee.com/weave/ You can make pretty 2D designs using CSS: https://zetabee.com/weave/share/5e6a5811 https://zetabee.com/weave/share/5e6a5811 https://zetabee.com/weave/share/c6593101 https://zetabee.com/weave/share/c6593101 It is similar in concept to Structure Synth ( http://structuresynth.sourceforge.net/ 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.
• amadeus 15y ago
  Tried cranking up the number of buildings... http://dl.dropbox.com/u/18782/durp.html http://dl.dropbox.com/u/18782/durp.html