

dom3d: Rendering 3D with CSS3 - jlongster
http://jlongster.com/s/dom3d/

======
keithnoizu
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.

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

------
archgrove
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?

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

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

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

~~~
yuhong
It was easy to switch between IE and Netscape too.

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

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

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

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

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

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

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

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

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

