famous/engine

Famous Engine

The Famous Engine is a free and open source JavaScript rendering engine. What makes the Famous Engine unique is its JavaScript rendering engine and 3D physics engine that gives developers the power and tools to build native quality apps and animations using pure JavaScript. It is designed to allow developers the ability to render to both DOM and WebGL in a unified API.

Getting Started

We have several guides & tutorials on our site to help you get up and running with Famous, such as Hello Famous. Here's a quick boilerplate example.

Boilerplate

If you have the Famous Engine included in your project, it is very easy to start getting content rendered to the screen. Below is a short example of how to get HTML content written to the screen.

var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');

FamousEngine.init();
var scene = FamousEngine.createScene();

var node = scene.addChild();
var domEl = new DOMElement(node, {
    content: 'Hello World',
    properties: {
        fontFamily: 'Arial'
    }
});

In this example, we use the Famous Engine to kick off the rendering process and create a scene for our application. From here, we can add nodes to our scene and use components to give them the ability to draw. For more, here are some deeper dives on scene graph and components.

Seed Project

If you are looking for an easy way to get a Famous application up and running, check out our seed project. This includes the FamousEngine, index.html file, preloaded CSS with friendly default values, and some boilerplate to get you started.

npm

The Famous Engine is also available on npm.

npm install famous

This will add the Famous Engine to your node_modules folder to be included into your project.

Contributing

Cloning this repository directly is primarily for those wishing to contribute to our codebase. Check out our contributing instructions to get involved.

Note: cloning only provides the Famo.us folder with all Famo.us code, but it does no application scaffolding. You will additionally need to create your own index.html. Currently we have a dependency on glslify, a browserify transform to compile our glsl shaders.

Documentation

• Rendered versions of the source code reference documentation: docs.
• Guides and tutorials: guides

Community

• If you would like to report a bug, please check the issues section in our contributing instructions.
• Please join us on the "famous-community" slack.
  • http://slack.famous.org/signup to sign up
  • http://slack.famous.org/ to log in
• For contributors, read more instructions in CONTRIBUTING.md.

Licensing information

• The Famous rendering engine is licensed under the MIT license
• Contact [email protected] for further inquiries.

engine's Issues

FamousEngine does not destroy scenes

FamousEngine provides API to createScene() but not to destroyScene(). Calling scene.dismount() successfully removes all descendant nodes but it does not remove itself from the engine.

We need this functionality to avoid memory leaks in SPA where you often need to create/destroy scenes whenever layout changes.

GestureHandler component blocks focus on <input/>

GestureHandler component blocks focus on <input/>. Is this an expected behavior?

---

👍 Without GestureHandler

new DOMElement(node, {
  tagName: 'input'
});

---

👎 With GestureHandler

new DOMElement(node, {
  tagName: 'input'
});

new GestureHandler(node).on('tap', (event) => {
  console.log(`[${event.time}] Blocked by handler!`);
});

Error when running "famous dev"

I am installing famo.us, and I created a project, then went into the folder and ran famous dev like it says here

http://famous.org/get-started.html

but then I get an error:

Does anyone know how to fix this? (I'm on windows 7 64-bit)
Thanks

C:\Users\Me\Desktop\Apps\Messenger>famous create messenger
Seed project created at: C:\Users\Me\Desktop\Apps\Messenger\messenger

C:\Users\Me\Desktop\Apps\Messenger>cd messenger

C:\Users\Me\Desktop\Apps\Messenger\messenger>famous dev
Node Modules not yet installed, attempting to do so now.
events.js:85
throw er; // Unhandled 'error' event
^
Error: spawn npm ENOENT
at exports._errnoException (util.js:746:11)
at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
at child_process.js:1144:20
at process._tickCallback (node.js:355:11)

C:\Users\Me\Desktop\Apps\Messenger\messenger>

famous-container only working on document load

One second after the document is loaded, https://assets-beta.famo.us/embed/embed.js doesn't convert the famous-container into the iframe.

Check plunkr (hit run / see console in dev tools)

http://plnkr.co/edit/As2ewoxhQ896ygfzDQ8N?p=preview

So injecting famous-container after ajax requests, or rendering it with a timed ngIf (as in the example) won't work.

isShown returns wrong value until after the first call to show() or hide()

When a node is created and added to the scene graph, initially calling isShown() on the node returns false, while the node is shown and visible.

To test this issue, follow the steps in Getting Started to create a new test project, and modify the code to print the isShown status of logo node. You will see the node is reported hidden, while its visible and spinning!

After the first explicit call to show() or hide function, the returned value is corrected.

Firefox rotation/perspective bug

I noticed this bug, running Firefox 34.0.5, however, it's perfectly fine now running 37.0.2.

Curious if we have any insights as to what may be causing it, incase others encounter the same issue.

UIEvents misbehave with nested scenes

mouseover UIEvents are only added to Scene 1 but Scene 2 also tries to capture events for some reason.

You can find source code for the above example here.

GestureHandler does not trigger "end" events for "tap" gestures

GestureHandler currently triggers only start events for tap gestures.

The source code tells me this was intended behavior by design, but wouldn't it be more consistent with other gesture types to trigger an end event (or at least provide an option to subscribe this event status)? Any of these events on receive can terminate the tap event being tracked: touchmove, mousemove, touchend, mouseup, and mouseleave.

Besides consistency, it would allow handling long press (touch & hold) gestures. We can also only react to end events, similar to onTouchEnd/onMouseUp.

If the original intention behind triggering only start events was for simplicity in event handling, we can probably add a filtering option to .on() while triggering both start and end by default. (ex: .on('tap', ['start'], cb) or .on('tap:start', cb))

windows 7 install

I am on windows 7 (ok poor me) as it is my dev platform . I try following your instructions on get-started.html. Now I have node 2.10.1 installed and step 3 fails:

Node modules not yet installed, attempting ...
events.js:85
throw er; //unhandled 'error' event

or this image

I assume that this is the reason the src folder in a test project contains a script that does not exiist:

<script src="bundle.js"></script>

I must be missing a key step as it is hard to believe this is released code and if so where is QA

All demos on website are black

On my OnePlus phone with Chrome 42 all the demos paint only black. Lots of reports on hacker news too.

https://news.ycombinator.com/item?id=9586913

Wrapping content in separate DIV results into non delegated events not being listened to properly

The bound _triggerEvent function has not been added to the content DIV.

This massively complicates the way we are adding event listeners.

DynamicGeometry renders different results in Web Workers

DynamicGeometry renders different results in Web Workers.

---

👎 Triangles with 3 vertices

new DynamicGeometry()
  .setVertexPositions([
    -1, 0, 0,
    1, 0, 0,
    0, 1, 0,
  ]);

---

👍 Triangles with 4 vertices

new DynamicGeometry()
  .setVertexPositions([
    -1, 0, 0,
    1, 0, 0,
    0, 1, 0,
    0, -1, 0,
  ]);

---

👎 Lines with 0 vertices

new DynamicGeometry()
  .setDrawType('lines');

---

👎 Lines with 2 vertices

new DynamicGeometry()
  .setDrawType('lines')
  .setVertexPositions([
    -1, 0, 0,
    1, 0, 0,
  ]);

---

👎 Lines with 3 vertices

new DynamicGeometry()
  .setDrawType('lines')
  .setVertexPositions([
    -1, 0, 0,
    1, 0, 0,
    0, 1, 0,
  ]);

---

👎 Lines with 4 vertices

new DynamicGeometry()
  .setDrawType('lines')
  .setVertexPositions([
    -1, 0, 0,
    1, 0, 0,
    0, 1, 0,
    0, -1, 0,
  ]);

Normal offset application in vertex shader?

This line should be in the fragment shader.

vec3 invertedNormals = a_normals + (u_normals.x < 0.0 ? calculateOffset(u_normals) * 2.0 - 1.0 : vec3(0.0));

Which requires some refactors to the vertex shader.

This will apply the normal texture on a per fragment basis versus a per vertex basis, which makes a lot more sense for textures.

TLDR: If you don't have enough vertices it looks like this:

When it should look like this:

Context size doesn't update unless scene is attached to body

Currently, the context resize does not get propagated through the system unless the scene is attached to body. It is possible to hack in the resize event by manually listening to window.onresize (see below). It would be great if there was some kind of flag that could be passed in to FamousEngine.createScene that would automatically alert Famous to check if the context size has changed on window resize events.

Example of hacking in a listener to a non-body context resize:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Famous :: Seed Project</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            body {
                position: absolute;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-font-smoothing: antialiased;
                -webkit-tap-highlight-color: transparent;
                -webkit-perspective: 0;
                perspective: none;
                overflow: hidden;
            }
            #my-container {
                width: 100%;
                height: 100%;
                background-color: peru;
            }
        </style>
    </head>
    <body>
        <div id="my-container"></div>
        <script src="index.bundle.js"></script>
    </body>
</html>

index.js

'use strict';

var DOMElement = require('famous/dom-renderables/DOMElement');
var FamousEngine = require('famous/core/FamousEngine');

// Boilerplate
FamousEngine.init()

var scene = FamousEngine.createScene('#my-container');
var root = scene.addChild();
root.setSizeMode(0, 0, 0);
root.setProportionalSize(0.5, 0.5);
var el = new DOMElement(root);
el.setProperty('background', 'black');

/*---------------------------------------------------------------*/
// Hack to force context to update on window resize
/*---------------------------------------------------------------*/
window.onresize = function(size) {
    FamousEngine.compositor._contexts['#my-container'].updateSize();
    FamousEngine.compositor.sendResize('#my-container', FamousEngine.compositor._contexts['#my-container'].DOMRenderer.getSize())
}

Proportional sizing z

It seems like using proportional size for z results in a 0 z-size. Perhaps we could use some value like innerWidth to determine z-size...

Getting reference to DOM element for a given Node

We need API to get reference to DOM element for a given Node with DOMElement component attached.

I'm trying to do something like React.render(<SomeComponent/>, toThisElement)

Node.getChildren returns unexpected results.

When removing children, node.getChildren will return an array with 'null' members. As a result, calling Node.getChildren().length returns an innacurate count, which is unintuitive.

@demobo-com @DnMllr @alexanderGugel

Setting class through a DOMElement's attributes breaks famous css and causes positioning issues

Try to set a DOMElement's class using something like:

var domEl1 = new DOMElement(node1, {
    attributes: {
        class: 'my-class'
    }
});

This results in the created div not having the 'famous-dom-element' class which I think it should have. This then causes all further nodes to have bugged positioning, shifted lower than they should be.

Full example of the bug (node 2 in the example is not rendered in the correct position):

var Famous = require('famous');

var DOMElement = Famous.domRenderables.DOMElement;
var FamousEngine = Famous.core.FamousEngine;

FamousEngine.init();
var scene = FamousEngine.createScene();

var node1 = scene.addChild();
var domEl1 = new DOMElement(node1, {
    content: 'Hello World',
    properties: {
        fontFamily: 'Arial',
    },
    attributes: {
        class: 'erm'
    }
});
node1.setSizeMode('absolute','absolute');
node1.setAbsoluteSize(300,300);
var node2 = scene.addChild();
var domEl2 = new DOMElement(node2, {
    content: 'whatsup',
    properties: {
        fontFamily: 'Arial',
    }
});

compositor.updateSize() does not handle nested scenes

compositor.updateSize() does not correctly handle a case with nested scenes (example described here) where the size of a scene depends on another scene.

There's a workaround that involves manually calling compositor.updateSize() again on nested scene's size change, but it'd be nice if the engine somehow handles this case as well, if possible.

Registering multiple custom sampler2D textures for GLSL

(I was able to port some transitions from glsl.io with minimal code change. Thanks @zackbrown for the code snippet 👍)

What's the best way to register multiple textures populating u_textures[]? I passed image materials to options.inputs as a workaround because current compileMaterial() traverses and ensures textures in inputs are registered, but I don't think this is the intended way to do it.

Could you allow us define multiple custom sampler2Ds and provide an API to manipulate them?

Gesture Handler node propagation

I have one node in the background and several other nodes above it. Node in the background needs to receive Gesture events. However I see no possibility of Gesture propagation from nodes above.

How can I set up GestureHandler so it will capture all gesture events on the page (even from nodes above the background node)?

Setting GestureHandler on root level does not work.

In the old version of famous we just piped surfaces together and it work without any problems, how to do it in Famous Engine?

Weird issues with absolute positioning, movement, and DOMElement.setContent on iOS

I'm working on an animation app that moves images and text around the page, and changes the text content over time. I'm noticing weird behaviour on ios. With the example below, using Safari or Chrome on an iphone5 ios8, the node stutters/lags on some setContent calls, moves in the y direction in addition to x, and changes size. This only seems to happen while the phone is tiled in landscape orientation.

I suppose I could work around this by using multiple DOMElements/Nodes and swapping them, rather than using setContent, but it does seem like there is a bug somewhere worth looking at.

var Famous = require('famous');

var DOMElement = Famous.domRenderables.DOMElement;
var FamousEngine = Famous.core.FamousEngine;
FamousEngine.init();
var scene = FamousEngine.createScene();
var node1 = scene.addChild();

var domEl1 = new DOMElement(node1, {
    content: '0'
});

node1.setSizeMode('absolute','absolute');
node1.setAbsoluteSize(600,400);
var num = 0;
var changer = node1.addComponent({
    onUpdate: function(time) {
        node1.setPosition(200-150*Math.cos(time / 1000), 100, 0);
        if (time % 500 > 480){
            domEl1.setContent(num);
            num++;
        }
        node1.requestUpdateOnNextTick(changer);
    }
});
node1.requestUpdateOnNextTick(changer);

Node does not provide API to ".removeUIEvent()"

There is no public API to remove UI events after node.addUIEvent().

We need someting like node.removeUIEvent().

Bad first frame bug

Reported this bug to @zackbrown and @arkadyp on Slack.

Opened this issue so we can track it.

DOMElement lifecycle issues

1. Repurposing a DOMElement leaves existing/previous classes/attributes/properties intact, e.g:

   

   or as a pseudo-test (can I submit PRs just for tests? :))

   var FamousEngine = require('famous/core/FamousEngine');
   var DOMElement = require('famous/dom-renderables/DOMElement');
   
   var scene = FamousEngine.createScene('body');
   var clock = FamousEngine.getClock();
   FamousEngine.init();
   
   var node1 = scene.addChild();
   var domElement1 = new DOMElement(node1);
   domElement1.addClass('myClass');
   
   clock.setTimeout(function() {
       // node1.removeComponent(domElement1);
       scene.removeChild(node1);
   
       var node2 = scene.addChild();
       var domElement2 = new DOMElement(node2);
       clock.setTimeout(function () {
         // fail/false in 0.5.2 -> 0.7, pass with PR#266
         console.log('test pass:', 
           !document.querySelector('[data-fa-path="body/0"]')
             .className.match(/\bmyClass\b/));
       }, 17);
   }, 17);

   Note: unnoticeable without the setTimeout.

2. Fixed in 0.6. In DOMElement.onDismount, we recycle the element by (amongst other things), setting display: none and leaving it attached to the DOM. But the plane is still visible on WebGL animations:

   

   at least in Chrome stable 43 and beta 44. cc: @trusktr. Confirming that display: none is set (you can see the contents and background color all disappear).

3. Should node.removeComponent(domElement) do any of the stuff that DOMElement.onDismount does? i.e. recycle the domElement.

   What is the expected behaviour if we call removeComponent with and/or without removing the node too?

Render size mode does not create and center true sized DOM element

scene.addChild()
  .setAlign(0.5, 0.5)
  .setMountPoint(0.5, 0.5)
  .setSizeMode(1, 1)
  .setAbsoluteSize(100, 70);  // <-- Absolute sizing works as expected

---

scene.addChild()
  .setAlign(0.5, 0.5)
  .setMountPoint(0.5, 0.5)
  .setSizeMode(2, 2);  // <- Render sizing does not center, and
                       //    it splits content into two lines. Why?

source code

[idea] Support QtCanvas3D (API 99.9% the same as WebGL).

If Famous could run in Qt (with QtCanvas3D for Meshes, and with Rectangles in place of DOMElements in QML (Qt's Quick Markup Language) that'd be super sweet. The whole environment is JavaScript.

Support high DPI (retina) displays

Mesh nodes look blurry on my Macbook Pro w/ Retina Display.

Please support high DPI (retina) displays by handling window.devicePixelRatio as explained here.

Unable to get height of window

This is the code I'm using, it's coming back with the width but not the height. Is there something more I need to do? I'm running this on an android 5.1 device.

var scene = FamousEngine.createScene();
var rootNode = scene.addChild();
var size = new Size(rootNode);

size.onSizeChange = function(s) {
    console.log(s);
}

FamousEngine.init();

where is DOMElement ?

I'm trying to get famous engine bundled up to run with meteor using famono
https://github.com/raix/Meteor-famono/issues/112#issuecomment-104847719

however DOMElement doesn't seem to be defined as expected:

DOMElement = require('famous/dom-renderables/DOMElement');

given there's a - in the path hierarchy, is that meant to map onto a class too?

Best practice to load external libraries such Snap.svg

Hello,

For the current project I am working on at the moment I am using Famo.us mixed mode and I need to use Snap.svg. What is the best practice within the new framework to use those libraries?

http://snapsvg.io/

Thanks!

material.setUniform() does not queue invalidations for Mesh

material.setUniform() does not seem to queue invalidations for the Mesh.

I discovered this while playing with GLSL transitions (re: #150), and it required me to manually invalidate mesh to redraw frame during transition when .setRotation() was not called on the node.

'.' is not recognized as an internal or external command

Runing famous dev produces this error:

famous dev

[email protected] dev D:\Web projekti\FAMOUS\test-one
./bin/dev.js

'.' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\iojs\node.exe" "C:\Program Files\iojs\node_modules\npm\bin\npm-cli.js" "run" "dev"
npm ERR! node v1.5.0
npm ERR! npm v2.7.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: ./bin/dev.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script './bin/dev.js'.
npm ERR! This is most likely a problem with the engine-seed package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ./bin/dev.js
npm ERR! You can get their info via:
npm ERR! npm owner ls engine-seed
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\Web projekti\FAMOUS\test-one\npm-debug.log
child process exited with code 1

OS: Win7 Ultimate , 64-bit

glslify out of date

Do we want to update to 2.x?

Undefined node in dispatchUIEvent method

I am trying to catch an event on Dom element's node:
https://gist.github.com/monapasan/a4480bcd2aeca1348157
In makeFooter method.
I also have a node on higher level and a scene. All of nodes have onReceive method but none of those is triggered, if i click on element. And i also have this exceptions. The third object in queue should be node that was clicked, but it's undefined. It's absolutely possible that i doing something wrong. But in this case i don't understand what. I was trying onReceive method,GestureHandler as well as custom component,bun in all cases i get an exception.
Could anyone explain, what is the problem ?

Using Drag on GestureHandler to create a Draggable bug (Browser Chrome)

When I created a Draggable node using GestureHandler and drag my example below has some side effects:

• A little janky in the Browser, but smooth on the mobile device (S3)
• When too close to the edge the drag is lost

Alex commented here when reviewed

Ok seems like the GestureHandler processes _processMouseLeave.
No idea why, since it’s already using mouseout.
Definitely a bug.

Here is a simple example of a draggable I created:
jsBin Example

var DOMElement = famous.domRenderables.DOMElement;
var Position = famous.components.Position;
var FamousEngine = famous.core.FamousEngine;
var GestureHandler = famous.components.GestureHandler;

var rootScene = FamousEngine.createScene('body');
var rootNode = rootScene.addChild();
rootNode.setAlign(0.5, 0.5);

function Draggable(root) {
  this.node = root;
  this.node
    .setProportionalSize(0.5, 0.5)
    .setMountPoint(0.5, 0.5);

  this.position = new Position(this.node);
  console.log(this.position);

  var base = (Math.random() * 360) | 0;

  this.el = new DOMElement(this.node, {
    properties: {
      'textAlign': 'center',
      'color': 'white',
      'fontSize': '30px',
      'lineHeight': '40px',
      'background': 'hsl(' + ((base += 37) % 360) + ',40%,50%)',
      'cursor': 'pointer'
    }
  });

  this.el.setContent('Drag Me<hr>');

  var gestures = new GestureHandler(this.node, [{
    event: 'drag',
    callback: drag.bind(this)
  }]);

  function drag(e) {
    //console.log('drag', e.status, e);
    switch (e.status) {
      case 'start':
        console.log('start drag', this.position.getValue());
        break;
      case 'end':
        console.log('end drag', this.position.getValue());
        break;
      case 'move':
        var d = e.centerDelta;

        console.log('move drag', this.position.getValue(), d);
        var pos = this.position.getValue();
        this.position.set(pos.x + d.x, pos.y + d.y, pos.z);
        break;
    }
  }
}

var dragger = new Draggable(rootNode);
FamousEngine.init();

[bug] Adding camera to a scene causes animation to stop.

Try out this jsbin: http://jsbin.com/loqeyavoni/2/, which shows a rotating sphere, then uncomment the two camera lines and the rotation will stop working (but the update method still fires, as you see the hellos flying by in the console). cc: @talves

There's no way to change UNPACK_FLIP_Y_WEBGL in a texture

In the Texture class, these 2 lines (line 51-52) don't give the ability to pass alternate values in the options array:

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);

I suggest to permit these values to be changed.

This is for example mandatory to create a video texture with gl.UNPACK_FLIP_Y_WEBGL set to true in your 'sphere-inner-texture' demo if you don't want the video to be reverted.

Embed famous library without cloud service

Can you include the famous library into your page directly and declare the JS in there? If not—why not?

Would love to post this question on slack, but the links to slack are broken.

Cheers.

Node.setOpacity() values are not uniformly inherited across renderables

Instances of Mesh seem to only reflect opacity correctly if the value is set directly on the node they are attached to. Instances on child nodes do not properly inherit opacity.

DOMElement doesn't seem to have a problem with this and works as one would expect.

Annotated visual explanation:

Full source to reproduce:
https://gist.github.com/oldschooljarvis/48648e203dfabe911b36#file-famous-engine-issue222-1

Require.js support

The new mixed mode engine don't seem to support loading with require.js anymore. Is there plan to add support (or am I just not using it right)?

Carousel Tutorial (Unexpected end of input / bundle.js error)

Hi,

I have forked the Carousel Tutorial following the steps from the website. Everything worked like a charm. But what I have realised is that sometimes when I start editing the files to understand how it works I get the following error in the console:

Uncaught SyntaxError: Unexpected end of input ----------------------- bundle.js:1

As soon as I refresh the browser everything starts working again. I do not get it all the time just randomly.
Any idea why this could happen?

Thanks!

DOMElement containing 'img' tag kills all descendant DOMElements

If you add a DOMElement containing an 'img' tag to a Node, and that node has descendant nodes which also contain DOMElements, those descendant DOMElements simply disappear.

Note that:

• Image type appears to have no impact (tested: .jpg, .png)
• It doesn't matter if the image src URL resolves or not. Even if it 404s (as in these examples), the behavior is identical to properly linked images.
• Hierarchy depth doesn't matter. Everything beneath dies.
• Mesh renderables and the underlying nodes themselves appear completely unaffected.

Examples + source:

Example 1 (works)

Source: https://gist.github.com/oldschooljarvis/881569559e8964f9f67e

Example 2 (broken)

Source: https://gist.github.com/oldschooljarvis/0e48bbf12f6c72a771cc

Example 3 (broken)

Source: https://gist.github.com/oldschooljarvis/b67d2341d9162630894d

Collision.removeTarget() does not appear to be working

Added a test case here:
https://github.famo.us/morganplant/removetargets/tree/updates

Support webpack, jspm, and other bundlers

browserify is the only bundler that works out of box because of its dependency library, glslify, that uses browserify transforms. Browserify is great and all, but many of us already have our own favorite bundlers.

Please support webpack, jspm, and other popular bundlers by either dropping glslify from dependencies or adding npm prepublish script to pre-run glslify.

(Here's a temporary workaround I'm currently using. The same script should work for all other bundlers too.)

"npm install -g famous-cli && famous init my-first-project" not working

It downloads the project, in the browser it says: "file:///D:/Projects/engine/my-first-project/public/bundle.js Failed to load resource: net::ERR_FILE_NOT_FOUND"

then i figure "maybe i need to do npm i"

well it hangs forever there, both on windows and linux.

Sign up link for famous-community.slack.com broken on famous.org/support/

on the new famous.org/support/ page

re: "The first thing you need to do is visit http://slack.famous.org/signup and enter your email address to create an account."

the link is broken - there is no way to sign up..

Publish to CDN (cdnjs & jsDelivr)

Famous provides pre-built engine bundle at http://code.famo.us, but it's impossible to match low latency and reliability performance offerings at popular CDNs such as cdnjs and jsDelivr.

Please publish Famous/engine to both of these CDNs to provide famous developers true freedom to work with whatever CDN they feel is most suitable for their app.

Reference: CDN performance stats

Testing pivotal

GL textures display checkerboard placeholders of varying duration

I initially reproduced this issue on Slack as follows:

https://gist.github.com/oldschooljarvis/2011f7d9ea0586c1f059
Just famous init a new project and replace src/index.js with the above ^

The sequence of events is:

(0ms) First node is spawned containing a DOMElement utilizing the default logo image.
(4000ms) Second node is spawned with a Mesh instead, using the same default logo image but mapped as a GL texture. There is visible checkerboarding on load.
(8000ms) Third node is spawned, identical to the second, but does not checkerboard. Ditto all subsequent nodes.

The checkerboarding only manifests itself if it's a fresh page load. It will not manifest upon refreshing the page.

Then I created a second reproduction:

https://gist.github.com/oldschooljarvis/031463a0f8cb8fbf3d84
http://i.imgur.com/be3bldF.png/famous_logo_magenta.png (second image)

Similar setup, except we eschew the DOM node and deal purely in GL.

Sequence of events is:

(1000ms) Spawn node w/ default logo. - Bad checkerboxing, lasts nearly a second.
(2000ms) Spawn node w/ default logo again. - Zero checkerboarding.
(5000ms) Spawn node w/ modified logo image. - Slight checkerboarding, maybe a couple of frames. Note: The .gif fails to capture this at all. (.gif limitation)
(6000ms) Spawn node w/ modified logo image. - Zero checkerboarding.

However, if we refresh the page, checkerboarding is eliminated entirely:

The first reproduction demonstrated that the issue isn't related to normal browser image caching.

The second reproduction demonstrated that loading a new GL texture incurs only minor checkerboarding; that subsequent nodes of the same texture don't have the issue, and that the first texture in a scene is always afflicted with the worst checkerboarding. Perhaps the latter behavior is something to do with initialization of the texture system itself? No idea.

These issues were reproduced on Chrome Version 43.0.2357.124 m (64-bit), Windows 8.1. The system I tested on is a 3.8GHz i7 w/ an R9 270. Firefox and IE both exhibit the issue roughly the same. Chrome seems to be the worst for this issue, if only by a small margin.