Famo.us css 3d转换

时间:2014-05-03 04:35:26

标签: css css3 canvas webgl famo.us

Famo.us声称它直接与GPU对话"计算自己的css变换。我假设他们正在讨论4x4变换矩阵。

  1. 当他们说"与GPU交谈时#34;这意味着他们在WebGL中做数学吗?
  2. 当他们显示3D元素时,他们是否在画布元素中使用WebGL?
  3. 他们的技术真的很特别,或者他们的主张是出色的营销活动的结果吗?

2 个答案:

答案 0 :(得分:1)

免责声明:我不为Famo.us工作,我只是分享他们的愿景,应该建立软件。

所有三个问题的答案都是否定的。当他们说与GPU谈话时,他们并不是指矩阵计算,他们指的是由浏览器加速GPU的CSS的matrix3d属性。通过抛弃普通HTML和CSS的盒子模型,我们可以创建一个新的模型,它遵循传统的图形开发,它基于笛卡尔坐标系统,并且所有元素都通过3d变换绝对定位。

没有WebGL,也没有写入画布。屏幕上的每个(表面)元素都只是一个被转换的div。每一段文字仍然可以突出显示,每个按钮仍然可以点击。一切都活着。渲染从Context开始,在大多数情况下,Context是渲染树的顶层。其他子视图的节点将添加为子节点。在每个渲染周期中,调用上下文的渲染函数,该函数返回向下看树并递归地调用每个子视图的渲染函数。由于渲染引擎与requestAnimationFrame紧密集成,因此可以确定所有计算,然后在屏幕刷新时进行渲染。

该技术可以被认为是特殊的,因为它抛弃了许多传统范例,转而采用更现代的方法来构建Web应用程序。话虽如此,它只是Javascript。 HTML不是为Web应用程序构建的。 HTML和CSS是为静态内容页面构建的,并且在尝试实现类似于我们喜欢和喜爱的应用程序的应用程序时起到了作用。 Famo.us使得只使用JS或像CoffeeScript这样的编译到JS语言构建应用程序成为可能。您可以在屏幕上定义与div对应的Surfaces,并应用HTML属性和CSS的属性。您仍然可以选择应用CSS类或将HTML注入曲面。

最终选择取决于您。如果您没有看到该值,或者对构建Web应用程序的方式感到满意,那么请坚持使用它。在接下来的几个月里,你会看到更多的演示出现,就像像我一样的真实用户创建它们。我已经可以告诉你,它非常有前途。

干杯

答案 1 :(得分:0)

我想添加一个稍微更新的答案:

(我也是,不为Famo.us工作,但我确实在那里工作了三个星期)

虽然@johntraver已经很好地总结了Famo.us目前所做的事情,但重要的是要了解famo.us将支持canvas和webGL。

深入研究famo.us的哲学,它抛弃了HTML和CSS为布局和动画提供的所有工具。 famo.us中的所有曲面绝对位于顶部:0,左:0,其他一切完全由变换完成,由变形计算。

动画也是在javascript中完成的,不使用CSS过渡或动画。

您对它的看法越多,Famo.us几乎不依赖于HTML或CSS,这正是计划。 Famo.us将HTML视为众多可能的渲染器中的一种。

他们正在努力将webGL渲染添加到famo.us.从本质上讲,这将实现布局和动画的通用API,它将能够为两个世界中的最佳状态呈现为WebGL和HTML。

因此,计算仍将完全在Javascript中完成,但输出可能是带有变换的表面或WebGL。

希望有所帮助。