dom3d: Rendering 3D with CSS3 | Hacker News Reader

dom3d: Rendering 3D with CSS3

jlongster.com

91 pointsjlongster24 comments

For some reason this reminds me of being 14 writting assembly to take over the graphic card and reading various LaMothe books on game programming. Looks nice on the new firefox, no display on ie9.

I think i'll stick to canvas but definetly a neat hack.

I need to look into ie9's support for CSS transforms, but if it supports that it should work. It definitely took me back to my high school days of 3d hacking :)

EDIT: Currently, it also needs to support linear-gradient background images because that's how I draw a triangle with a div. I don't think IE9 supports that unfortunately.

FYI, this demo silently fails on the current Safari version in OS X 10.6.7. On Chrome and Firefox it renders a mesh in the top right hand corner of the page. Whilst I acknowledge the authors says "Various browsers will have glitches with this hack, as it's really a severe and gross hack", I'm getting rather tired of these examples that are, at best, domain specific browser kludges rather than general interesting cases of HTML/JS usage.

By these standards, the much derided IE specific features were a great thing for the web. Welcome to HTML 5, where "Best viewed in XXX" is the old new rage. I thought we'd left this behind in 2005?

It simply uses CSS3 properties according to the standard. As CSS3 is not fully supported yet, this hasn't been fully tested across browsers, and just needs whatever proprietary tags to work (-webkit-*, etc.).

If only. It also uses chunks of WebGL (ArrayBuffer etc). Removing these dependencies makes it mostly work in Safari (the 404 example, for example, renders fine when using fallbacks to the standard JavaScript arrays).

My big problem with the state of web programming at the moment is that people are generating these examples which, despite being based on "standards", are virtually worthless to anyone much outside of nightly build users. Some of these "standards" (i.e. WebSockets) are so ill-concived that they get rolled into one browser release, before being rolled out of the next when found to be flawed. These things are not "standards" - they're browser makers playing around with ideas. Similarly, this example (whilst cool) is not CSS3 - it's CSS 3 plus selection of other supra-bleeding edge stuff that wasn't needed to demonstrate the issue.

Whilst I generally applaud using cutting edge technologies, the entire point of the web (to me) is interoperability. As we seem to move more and more towards "This works fine if you're in Chrome, others may vary", I'm claiming that this is not the web any more than "You need Java 1.X.Y" or "Viewed best in IE 6" was. It's a custom delivery platform for content that happens to piggy-back on HTML, draped in a guise respectability via rushed out and hacked together concepts that many will never implement (as by the time someone's finally got around to doing it, they're onto v(X + 3) of the "standard").

Sigh, I sound about 30 years older than I am. However, having been involved in real standardisation where we strive to create something stable and reusable, these types of examples make HTML 5 look a melange of disparate and barely interoperable concepts. This is not intended as specific slight to the creator of this stuff - it's a cool and admitted hack. It's more a mild rant on the state of web development and the disconect between the technorati and people who actually try and create; not even things for the IE6 users - things for users of browsers less than than 6 months old (and possibly more than 6 months into the future of the browser it currently works on).

All I have to do is check if ArrayBuffer exists, and if not fallback to normal arrays. That's not WebGL, it's typed arrays. What else does it depend on?

It depends fully on standards which are currently being implemented. It works in Firefox and Chrome, and can easily be made to work in Opera (and I think IE9 too) by using the "-o" css3 prefixes.

its impossible to progress without breaking standards, tech demos are the perfect place to do that.

I'm starting to move more and more away from this point of view. I can see much of the merit in it - but have come to think that drawing some kind of uncrossable line at the browser level that demands uniformity is ultimately arbitrary.

Why shouldn't browser vendors innovate at the cutting edge? Why shouldn't application developers have to make a choice between platforms just like they have to at any other layer of the big grand tree of tech?

I know it wouldn't be popular among folks who want to build enormous websites that centralise distribution of media etc... and mega-corporations that rely on such mass distribution... but I'm all for a kind of severe nominalisation of the web where technologies are allowed to freely develop to serve smaller and highly targeted niches.

I can understand the desire to have one platform that works for everything... If there was just one smartphone platform in existence at any one time that'd be great too from that point of view. Reaching the masses would then be a snap!

But I guess I've never really understood the argument for this rigorous standardisation of the web platform. At least, I've never understood what people think is special about the web such that this standardisation is an absolute must - beyond the view that people are too lazy to use multiple browsers. It's ironic because no one believes that there should be one single smartphone platform - yet it's a hell of a lot harder for people to switch platforms if there is an app on one that they particularly want to use. It takes 30 seconds to install a new browser - a couple of seconds to launch - if you need to switch.

What am I not getting here?

It was easy to switch between IE and Netscape too.

Yet pointless because they were both terrible.

That was the problem in reality. The proprietary extensions were almost irrelevant, unless you were a big fan of blinking text. The issue was those two stagnant browsers were strangling the web, IE & Microsoft doing so with malice.

The fact that we can even make that comparison with a straight face shows just how far we've come. You literally just tried to equate a browser market in which there are 4 very active and competitive players releasing new versions daily/weekly, to one where a near monopoly kept the same browser version on the market for six years.

Yep, why do you think the WaSP was created? AFAIK this war began with Netscape having a monopoly back in 1995, which effectively killed HTML 3.0 and resulted in 3.2.

  Sigh, I sound about 30 years older than I am. However,
  having been involved in real standardisation where we
  strive to create something stable and reusable, these types
  of examples make HTML 5 look a melange of disparate and
  barely interoperable concepts.

No, you just sound like someone who has no idea how HTML5 spec is developed and how implementations of it find their ways to browsers. Or would you prefer XHTML2 way: all theory, nothing in the real world ever?

So the "throw it at the wall and see what sticks" strategy is the new "standards" vogue? As I tried to say, isn't this what we got up in arms against Microsoft for? Its a minor improvement as people tend to at least write up the new "standards", but the problem with IE wasn't that their additions were unreplicable - it was that they were not replicated.

Also, your example is a false dichotomy. I can be concerned about the "standardisation" process usage I'm seeing without demanding a glacial and purely theoretic process.

Make sure you check the SVG/Raphael link on the top right corner, which is the same sample done with SVG.

I just added Safari support, btw. It just took a couple minutes to use to "-webkit-gradient" property instead and check for types array support in the vector library.

Opera support is coming in the next minute, too.

And Opera support is done.

I can see this being really useful for some simple 3D transitions within web apps, along the lines of the cylindrical date picker in Safari on the iPhones.

One of my co-founders hacked something similar together in JS using an different technique a few years ago, but never got around to going anywhere with it: http://www.zettabytestorage.com/gloam/

I don't think it's been touched since sometime in 2008, but it's still fun. (Though notably more primitive)

Edit: The website for it is rather sparse and stale, but drop us a note at 'support' at the above domain name and it'll get to the original author of the code.

Edit: Also, not trying to steal your thunder or anything, what you're doing is different and new, what I linked is quite unmaintained. Just pointing out some similar work who's author I know well, and who might be fun to have chat with about it.

No worries, that looks interesting, although I don't see the source code anywhere.

Like I said, it's more abandoned than anything else at this point. Drop us a note.

I'll see if he feels like digging it up and tossing it on github or something.

I think it's funny that everybody is jumping on the CSS3 animation bandwagon because flash is clunky and maxes out your CPU, and the results are these cool demos that... max out my CPU. Don't get me wrong; it's a cool trick, and I'm as happy to see Flash die as anyone, but the wave of Actionscript 3D engines that were released 3 years ago were better looking and more performant. I understand that it's an immature technology, but I have a terrible feeling that in another year every webpage I visit is going to feature CSS3 animated banners that will have my aging macbook hot enough to grill chorizos on.

It's a good point, and this probably should never be used in production. If it is, it would be more like the "pole" example, which doesn't redraw except for user interaction. In that case, it won't max out your CPU.

I really like when people get the most out of things, this is a good example of squeezing limitations and using technology in a way it wasn't meant to. This is what hacking means to me.

I normally run Chrome. Out of curiosity, I opened it in Firefox 4. It renders more prettily in FF4, the triangles are more tightly bound together and without the odd jerkiness that I saw in Chrome.

Reply on news.ycombinator.com