css - Famo.us css 3d 转换

标签 css canvas webgl famo.us

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

  1. 当他们说“与 GPU 对话”时,是否意味着他们正在使用 WebGL 进行数学运算?
  2. 当他们显示 3D 元素时,他们是否在 Canvas 元素中使用了 WebGL?
  3. 他们的技术是否真的那么特别,或者他们的声明是出色营销事件的结果?

最佳答案

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

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

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

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

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

干杯

关于css - Famo.us css 3d 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23440308/

相关文章:

css - 编码 CSS3 阴影的最佳方式?

html - "Active"导航栏上的框未显示下拉菜单

javascript - 为什么这个 HTML5 Canvas 不显示?

javascript - WebGL 中的切换着色器程序

javascript - 带有着色器的背景平面与 Three.js 中的所有内容重叠

html - 图像顶部文字的最佳解决方案

css - 如何使用 mat-chips/angular material2 的 ngFor 使 div 中的 flexbox 具有 2 列?

javascript - HTML5 Canvas 绘图像素与提供的颜色不同

java - Canvas 和图形上下文 - 如何更改画笔的形状

javascript - Three.js:表面是片面的