TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Beercamp: An Experiment With CSS 3D

44 点作者 bogdans大约 13 年前

8 条评论

kevingadd大约 13 年前
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)<p>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.<p>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).
评论 #3857399 未加载
评论 #3857415 未加载
评论 #3857329 未加载
rollypolly大约 13 年前
<p><pre><code> 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. </code></pre> 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.<p><pre><code> 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. </code></pre> 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.
评论 #3859559 未加载
orta大约 13 年前
That's very impressive work, and the tutorial of the process involved in making it is definitely worth a read too
tomelders大约 13 年前
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.<p>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.
评论 #3857615 未加载
评论 #3857744 未加载
anonymous大约 13 年前
Tried in Google Chrome 20 on Debian unstable, but it says my browser doesn't support CSS 3D.
j_c大约 13 年前
I'm all for pushing boundaries, but this is a classic case of form over function.
评论 #3857414 未加载
Maxious大约 13 年前
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.
skizm大约 13 年前
Wow, this actually works (although it is super slow) in firefox mobile on my droid bionic.