As an upfront disclaimer, I want to state that I think this is incredibly neat, and that I'm just trying to resolve a nagging question in my head.
Every time I see very well-done CSS animations, and especially when I see it extended into the realm of 3D graphics, I immediately think: To do all of this [animation/3D], the creator had to know a good bit about [animation/3D]. What makes them look at CSS and say "Yes! THIS is the language I want to do serious 3D work in!"?
Put less sarcastically: I find CSS to be a pain more often than not. What advantages do these Webkit-only CSS tricks have over WebGL? I was given the impression that the latter is more fully-featured.
I totally agree with you. Implementing this with WebGL would be much, much easier. However, I believe there is a need for lighting effects for simple interfaces built with HTML and CSS. The library is more for intermediate developers who want to add a touch of lighting without heavy programming.
Modeling 3D objects – like the Photon crane – with CSS is absurd! It was done solely for that initial "neato!" effect.
Requirements
Photon relies on the WebKitCSSMatrix object, so WebKit
is the only browser engine currently supported.
No idea what it's doing. I was clicking around for some time before I went to the 'Documentation' link, so maybe I can save others with the same issue (no Chrome) some time.
You could make it cross-platform (not webkit-only) by using a JS implementation of the WebKitCSSMatrix object, which happens to be available as part of the Firmin JS Animation library. It's a technique I use in Edit Room (link in profile) to support javascript controls for modifying 3D CSS transforms.
I noticed in Google Chrome that the edges of the crane figurine did not quite meet up, so that there were black lines in the body of the crane where the separate planes didn't quite meet.
I've noticed in the past that CSS seems to have real problems with this in other cases as well.
It's not constrained to CSS. Corners have always been a troublesome issue with 3D environments, and there are quite a few hacks needed to get it right. In many older games you used to be able to shoot "through" corners, as edge detection becomes difficult there. Minecraft still has issues with edges, and seeing what lies behind them is pretty common.
Every time I see very well-done CSS animations, and especially when I see it extended into the realm of 3D graphics, I immediately think: To do all of this [animation/3D], the creator had to know a good bit about [animation/3D]. What makes them look at CSS and say "Yes! THIS is the language I want to do serious 3D work in!"?
Put less sarcastically: I find CSS to be a pain more often than not. What advantages do these Webkit-only CSS tricks have over WebGL? I was given the impression that the latter is more fully-featured.