5 ms·

Beercamp: An Experiment With CSS 3D

44 points by bogdans 14y ago

orta 14y ago
That's very impressive work, and the tutorial of the process involved in making it is definitely worth a read too
Maxious 14y ago
This seems more responsive than the Flash page turn demos but there are some artifacts when I turn the page (other pages clipping in/out?) and the text isn't anti-aliased.
kevingadd 14y ago
Nice idea but it's super glitchy in both Chrome and Firefox and it's also very laggy in FF. Maybe it's my video drivers? (FF13, Chrome 18, Win7/GTX 570) Pages using bleeding-edge tech like this need an easily accessible fallback. I can't find any way to access the content from that Beercamp page in a non-busted-3d format. Article's example of correct 'depth-sorting' isn't demonstrating depth sorting, since depth sorting sorts entire elements to the front/back - interpenetration isn't possible. For interpenetration like he demonstrates, you have to split scene elements up into smaller elements or depth-sort at the pixel level (modern 3d cards do something resembling an approximation of this via the z-buffer).
- downx3 14y ago
  Agreed, so annoying. Tried in Google Chrome on Debian Wheezy AMD64 with Intel GM45. Place feedback and alternative links at the top of the page also. Otherwise users are just left puzzled.
- thomasxiii 14y ago
  It is indeed buggy and FF lags like crazy. The Chromium team has looked into some of the issues and many of them have been fixed in Canary; give that a go! No, there isn't a way to access everything without a 3d capable browser. This was more of a time constraint than anything else. Thank you for clarifying the depth-sorting issue. I've perhaps overgeneralized in that area. So, will browsers render interpenetration differently based on the hardware?
- estel 14y ago
  I think that the issue is related to this Chromium bug: http://code.google.com/p/chromium/issues/detail?id=110457 http://code.google.com/p/chromium/issues/detail?id=110457
j_c 14y ago
I'm all for pushing boundaries, but this is a classic case of form over function.
- SquareWheel 14y ago
  I do believe that is the intention with this demo. From the first paragraph in the article: Each year we abandon browser support and throw a “Pshaw” in the face of semantics so that we can play with some emerging features of modern browsers.
rollypolly 14y ago
The deviceorientation event enables us to pull alpha, beta and gamma rotation values. Note that these values are relative to the current orientation of the device. The image above shows the axes of a phone held perpendicular to the ground in portrait mode. Does 'alpha' really run up-and-down the iPhone while in portrait? The first value is usually the X axis, and usually runs 'sideways' of an iPhone in portrait mode. Unfortunately, each browser implements depth-sorting differently and, therefore, has its own issues. The best we can do to combat the glitchy pop-through of underlying elements is to keep planes away from each other. Is there no way to enable depth testing? ie: Using the zbuffer for per-pixel depth read / test / write? You can avoid depth sorting that way, at a small performance cost, and the result looks better.
- unconed 14y ago
  You can't use the z buffer because layers may be transparent and require antialiasing on the edges...
anonymous 14y ago
Tried in Google Chrome 20 on Debian unstable, but it says my browser doesn't support CSS 3D.
tomelders 14y ago
My favourite thing about this is that here, on my Macbook Pro, my CPU usage stays nice and low, and my fans don't even seem to notice all the 3D happening in my browser. If this were built in Flash, I'd be worried that looking at it for too long would result in my Macbook burning a hole through my desk.
- georgebones 14y ago
  Really? 100% CPU for me in Firefox and my macbook pro fans went crazy. I decided to test Chrome - better but still peaks around 50%. Safari was the best peaking at 30% while using it. Also, are you sure a Flash version would use more CPU? This only uses 60% when I'm walking around - http://www.unrealengine.com/flash/ http://www.unrealengine.com/flash/
  - tomelders 14y ago
    Using Safari, and not a peep.
- novalis 14y ago
  My favorite thing about reacting to flash is how meme based it has become.
skizm 14y ago
Wow, this actually works (although it is super slow) in firefox mobile on my droid bionic.

44 points by bogdans 14y ago

orta 14y ago

That's very impressive work, and the tutorial of the process involved in making it is definitely worth a read too

This seems more responsive than the Flash page turn demos but there are some artifacts when I turn the page (other pages clipping in/out?) and the text isn't anti-aliased.

kevingadd 14y ago

Nice idea but it's super glitchy in both Chrome and Firefox and it's also very laggy in FF. Maybe it's my video drivers? (FF13, Chrome 18, Win7/GTX 570) Pages using bleeding-edge tech like this need an easily accessible fallback. I can't find any way to access the content from that Beercamp page in a non-busted-3d format. Article's example of correct 'depth-sorting' isn't demonstrating depth sorting, since depth sorting sorts entire elements to the front/back - interpenetration isn't possible. For interpenetration like he demonstrates, you have to split scene elements up into smaller elements or depth-sort at the pixel level (modern 3d cards do something resembling an approximation of this via the z-buffer).

downx3 14y ago
Agreed, so annoying. Tried in Google Chrome on Debian Wheezy AMD64 with Intel GM45. Place feedback and alternative links at the top of the page also. Otherwise users are just left puzzled.
thomasxiii 14y ago
It is indeed buggy and FF lags like crazy. The Chromium team has looked into some of the issues and many of them have been fixed in Canary; give that a go! No, there isn't a way to access everything without a 3d capable browser. This was more of a time constraint than anything else. Thank you for clarifying the depth-sorting issue. I've perhaps overgeneralized in that area. So, will browsers render interpenetration differently based on the hardware?
estel 14y ago
I think that the issue is related to this Chromium bug: http://code.google.com/p/chromium/issues/detail?id=110457 http://code.google.com/p/chromium/issues/detail?id=110457

j_c 14y ago

I'm all for pushing boundaries, but this is a classic case of form over function.

SquareWheel 14y ago
I do believe that is the intention with this demo. From the first paragraph in the article: Each year we abandon browser support and throw a “Pshaw” in the face of semantics so that we can play with some emerging features of modern browsers.

rollypolly 14y ago

The deviceorientation event enables us to pull alpha, beta and gamma rotation values. Note that these values are relative to the current orientation of the device. The image above shows the axes of a phone held perpendicular to the ground in portrait mode. Does 'alpha' really run up-and-down the iPhone while in portrait? The first value is usually the X axis, and usually runs 'sideways' of an iPhone in portrait mode. Unfortunately, each browser implements depth-sorting differently and, therefore, has its own issues. The best we can do to combat the glitchy pop-through of underlying elements is to keep planes away from each other. Is there no way to enable depth testing? ie: Using the zbuffer for per-pixel depth read / test / write? You can avoid depth sorting that way, at a small performance cost, and the result looks better.

unconed 14y ago
You can't use the z buffer because layers may be transparent and require antialiasing on the edges...

anonymous 14y ago

Tried in Google Chrome 20 on Debian unstable, but it says my browser doesn't support CSS 3D.

tomelders 14y ago

My favourite thing about this is that here, on my Macbook Pro, my CPU usage stays nice and low, and my fans don't even seem to notice all the 3D happening in my browser. If this were built in Flash, I'd be worried that looking at it for too long would result in my Macbook burning a hole through my desk.

georgebones 14y ago
Really? 100% CPU for me in Firefox and my macbook pro fans went crazy. I decided to test Chrome - better but still peaks around 50%. Safari was the best peaking at 30% while using it. Also, are you sure a Flash version would use more CPU? This only uses 60% when I'm walking around - http://www.unrealengine.com/flash/ http://www.unrealengine.com/flash/
- tomelders 14y ago
  Using Safari, and not a peep.
novalis 14y ago
My favorite thing about reacting to flash is how meme based it has become.

skizm 14y ago

Wow, this actually works (although it is super slow) in firefox mobile on my droid bionic.