dom3d: Rendering 3D with CSS3

by jlongster • 15 years ago

91 24 15 years ago

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.

archgrove3• 15 years ago

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?

jlongster7• 15 years ago

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

archgrove3• 15 years ago

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

duopixel• 15 years ago

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

jlongster7• 15 years ago

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.

jlongster7• 15 years ago

And Opera support is done.

keithnoizu• 15 years ago

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.

jlongster7• 15 years ago

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.

vietor2• 15 years ago

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.

jlongster7• 15 years ago

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

vietor2• 15 years ago

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.

pault• 15 years ago

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.

jlongster7• 15 years ago

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.

PostOnce• 15 years ago

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.

pacomerh• 15 years ago

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.

dom3d: Rendering 3D with CSS3

Related Stories