0

Famo.us claims that it "talks directly to the GPU" to compute themselfs the css transforms. I assume they are talking about the 4x4 transform matrix.

  1. When they say the "talk to the GPU" it means they are doing their maths in WebGL?
  2. When they show 3D elements are they using WebGL in a canvas element?
  3. Is their technology real THAT special or their claims are the result of an excellent marketing campaign?
Cristian Garcia
  • 9,630
  • 6
  • 54
  • 75

2 Answers2

1

Disclaimer: I do not work for Famo.us, I just share their vision in way software should be built.

The answer to all three questions is no. When they say talks to the GPU, they are not referring to the matrix calculations, they are referring to the matrix3d property of CSS that is GPU accelerated by the browser. By throwing out the box model of normal HTML and CSS, we can create a new model that follows the likes of traditional graphics development, which is based on a Cartesian coordinate system and all elements are absolutely positioned with 3d transforms.

There is no WebGL and no write to canvas. Every one of the (surface) elements on screen is just a div that is transformed. Every bit of text will still be highlightable and every button will still be clickable. It's all live. The rendering starts at the Context, which in most cases is the top level of the render tree. Nodes for other subviews are added as children. On each render cycle the context's render function is called, which in return looks down the tree and calls the render function of each subview recursively. Since the render engine is tightly integrated with requestAnimationFrame, all calculations can be determined then rendered at the time of screen refresh.

The technology can be considered special, because it throws away so many traditional paradigms in favor of a more modern approach to building web applications. That being said, it's really only Javascript. HTML was not built for web applications. HTML and CSS were built for static content pages and work as a crutch in trying to achieve applications similar to the ones we love and adore on mobile. Famo.us makes it possible to build applications with only JS, or a compile-to-JS language like CoffeeScript. You define Surfaces which correspond to divs on screen, and you apply properties for HTML attributes and CSS. You still have the option to apply CSS classes or inject HTML into surfaces.

In the end the choice is up to you. If you do not see the value, or are comfortable with the way you build web applications, then stick with it. Over the next few months you will see many more demos popping up as real users like myself create them. I can tell you already, it's amazingly promising.

Cheers

johntraver
  • 3,612
  • 18
  • 17
  • Thanks for the response. I am relatively new to web development and have been studying and applying it intensely. Yet, I don't see how they can hack in the rendering process. How can they tell the browser don't render like this render like that? BTW: I loved Famo.us when I first saw it, but since I am like 65,000 in the queue, I started learning to use canvas/webgl libraries + implementing physics for animations. I'll use it when they decide to let me have access to the tutorials. – Cristian Garcia May 03 '14 at 08:33
  • the JS function requestAnimationFrame is how they control each frame. What gets calculated in this function will render on the next page refresh. Famo.us just uses an Engine to control requestAnimationFrame, so every object isn't calling that function itself. – johntraver May 03 '14 at 16:23
  • @CristianGarcia and you don't need the tutorials.. They are very basic.. You can learn much more by running and tinkering with the examples.. https://github.com/Famous/examples/tree/master/src/examples – johntraver May 03 '14 at 17:30
0

I want to add a slightly updated answer:

(I, too, don't work for Famo.us, but I did spend three weeks there working on projects)

While @johntraver has summed up pretty nicely what Famo.us does at the moment, it is important to understand that famo.us WILL support canvas and webGL.

Going deeper into the philosophy of famo.us, it throws away all the tools that HTML and CSS provide for layout and animation. ALL surfaces in famo.us are absolutely positioned at top:0, left:0 and EVERYTHING else is done purely with transforms, that are calculated by famous.

Animations are also done in javascript and don't use CSS transitions or Animations.

The more you think about it, Famo.us has almost no dependency on HTML or CSS, and that is exactly the plan. Famo.us treats HTML as just one of many possible renderers.

They are now working on adding WebGL rendering to famo.us. Essentially, what this will enable is a common API for layout and animation that will be able to render to WebGL AND HTML for the best of both worlds.

So, calculations will still be done in Javascript entirely, but the output may either be surfaces with transforms OR WebGL.

Hope that helps.

Naman Goel
  • 1,525
  • 11
  • 16