【问题标题】:Famo.us css 3d transformsFamo.us css 3d 转换
【发布时间】:2014-05-03 04:35:26
【问题描述】:

Famo.us 声称它“直接与 GPU 对话”以自行计算 css 转换。我假设他们在谈论 4x4 变换矩阵。

  1. 当他们说“与 GPU 对话”时,是否意味着他们正在使用 WebGL 进行数学计算?
  2. 当他们展示 3D 元素时,他们是否在画布元素中使用了 WebGL?
  3. 他们的技术真的那么特别吗?或者他们的主张是出色营销活动的结果?

【问题讨论】:

    标签: css canvas webgl famo.us


    【解决方案1】:

    免责声明:我不为 Famo.us 工作,我只是分享他们对软件构建方式的看法。

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

    没有 WebGL,也没有写入画布。屏幕上的每个(表面)元素都只是一个经过转换的 div。每一点文本仍然可以突出显示,每个按钮仍然可以点击。都是直播的。渲染从上下文开始,在大多数情况下是渲染树的顶层。其他子视图的节点被添加为子视图。在每个渲染周期中,都会调用上下文的渲染函数,作为回报,它会向下查找树并递归调用每个子视图的渲染函数。由于渲染引擎与 requestAnimationFrame 紧密集成,所有计算都可以确定,然后在屏幕刷新时渲染。

    这项技术可以被认为是特殊的,因为它摒弃了许多传统范式,转而采用更现代的方法来构建 Web 应用程序。话虽如此,它实际上只是 Javascript。 HTML 不是为 Web 应用程序构建的。 HTML 和 CSS 是为静态内容页面构建的,它们在尝试实现类似于我们在移动设备上喜欢和喜欢的应用程序时充当拐杖。 Famo.us 使仅使用 JS 或像 CoffeeScript 之类的 compile-to-JS 语言构建应用程序成为可能。您定义与屏幕上的 div 对应的 Surfaces,并为 HTML 属性和 CSS 应用属性。您仍然可以选择应用 CSS 类或将 HTML 注入到表面中。

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

    干杯

    【讨论】:

    • 感谢您的回复。我对 Web 开发比较陌生,并且一直在深入研究和应用它。然而,我看不出他们如何在渲染过程中破解。他们怎么能告诉浏览器不要像这样渲染那样渲染呢?顺便说一句:我第一次看到 Famo.us 时就喜欢它,但由于我的队列中有 65,000 人,我开始学习使用 canvas/webgl 库 + 为动画实现物理。当他们决定让我访问教程时,我会使用它。
    • JS函数requestAnimationFrame是他们如何控制每一帧的。在此函数中计算的内容将在下一页刷新时呈现。 Famo.us 只是使用 Engine 来控制 requestAnimationFrame,因此每个对象本身都不会调用该函数。
    • @CristianGarcia 并且您不需要教程。它们非常基础。您可以通过运行和修改示例来了解更多信息。github.com/Famous/examples/tree/master/src/examples
    【解决方案2】:

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

    (我也不为 Famo.us 工作,但我确实在那里花了三周时间从事项目)

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

    深入了解 famo.us 的理念,它抛弃了 HTML 和 CSS 为布局和动画提供的所有工具。 famo.us 中的所有表面都绝对位于 top:0, left:0 并且其他一切都完全通过由 Famous 计算的变换完成。

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

    你越想,Famo.us 几乎不依赖 HTML 或 CSS,而这正是计划。 Famo.us 将 HTML 视为众多可能的渲染器之一。

    他们现在正致力于将 WebGL 渲染添加到 famo.us。从本质上讲,这将启用一个用于布局和动画的通用 API,它将能够呈现为 WebGL 和 HTML,以实现两全其美。

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

    希望对您有所帮助。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-08-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多