CSS 3D Lighting Engine

[chao-]

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.

[thomasxiii]

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.

Hope that helps clear some things up.

[tambourine_man]

I think it's same reason why people develop a JavaScript game of Tron in 219 bytes. Because you can, because it's a challenge and fun.

I don't really know why, but I also find great joy in working in constrained environments, and usually end up learning something in the process.

[darklajid]

  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.

[vecinu]

Thank you. I was clicking everywhere trying to see why I wasn't seeing any 'lighting'.

The author should put a Chrome-only warning on the front page.

[TazeTSchnitzel]

Ah. I somehow missed the "CSS" in the title and thought it was WebGL, was surprised when it didn't work in FF.

[vhf]

  No idea what it's doing.

It does exactly what the title says. ;)

Quite impressive work.

[splatcollision]

Very neat work!

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.

Here's the relevant file: https://github.com/beastaugh/firmin/blob/master/src/matrix.j...

You could use this when WebKitCSSMatrix doesn't exist, and support other browsers that support 3d transforms:

Something like:

//shim to create CSSMatrix object reference using either WebKit or Firmin implementation

if (!window.CSSMatrix) window.CSSMatrix = window.WebKitCSSMatrix || window.FirminCSSMatrix;

[thomasxiii]

I'm going to be looking into this. I hate putting "WebKit only" on things, but this was the simplest solution I could find. Thank you for this!

[NathanKP]

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.

[jjcm]

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.

[nu11pointer]

Does this only work on Chrome for OSX or something? I use Chrome on Windows exclusively and I just see a blank page.

[RandallBrown]

works fine on windows chrome for me. V19 on the regular release channel.