Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS 3D Lighting Engine

photon.attasi.com

Post reply on HN
Print view View original

1–10 of 15 posts

Re: CSS 3D Lighting Engine

#2

Post by 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.

Re: CSS 3D Lighting Engine

#3

Post by vecinu »

darklajid wrote: post #2

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.

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.

Re: CSS 3D Lighting Engine

#4

Post by TazeTSchnitzel »

darklajid wrote: post #2

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.

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

Re: CSS 3D Lighting Engine

#5

Post by 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;

Re: CSS 3D Lighting Engine

#6

Post by vhf »

darklajid wrote: post #2

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.

  No idea what it's doing.
It does exactly what the title says. ;)

Quite impressive work.

Re: CSS 3D Lighting Engine

#9

Post by 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.

Re: CSS 3D Lighting Engine

#10

Post by thomasxiii »

splatcollision wrote: post #5

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 u…

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!
Post reply on HN