Testing performance comparisons between OF and Three.js

[brannondorsey]

I’m currently testing the pros and cons of using Three.js for a project where I would normally use openFrameworks, paying particularly close to performance and reliability over time (how long the app will run w/out crashing). I am using NW.js (Node-Webkit) to bundle the HTML/CSS/JavaScript into a desktop application. My initial results are surprising, as it seems that my openFrameworks version seems to be running at about half of the frame rate of the JavaScript version.

OpenFrameworks

JavaScript

The openFrameworks version maintains a steady 16 fps while the JavaScript version fluctuates between about 40-60 fps. The openFrameworks version looks perhaps a bit more crisp and the consistently of the slow frame rate keeps the sketch looking smooth (the JavaScript version is a bit jumpy). Below are links to both sets of code, if anyone would like to review what is actually going on. I’m not an efficiency expert, but the openFrameworks code is fairly optimized to my knowledge (I am purposefully avoiding the use of shaders).

• openFrameworks Code
• Three.js Code

I am less concerned with actual optimizations in these code versions as I am interested in discussing the validity of using web technologies in place of openFrameworks for select projects. Those familiar with Three.js and WebGL, are we nearing a point where the speed and efficiency of JavaScript w/ the V8 engine as it is applied to contexts like HTML5 Canvas and WebGL is “good enough”, especially for writing code that runs on a desktop (with something like NW.js)? I’m well aware that the abstraction that takes place w/ JavaScript makes it impossible to be as optimized as well written C++, but for many creative coding related projects is it a viable option for writing apps that need to perform consistently and for long periods of time w/out a restart? Are there any immediate red flags that are thrown when considering using Three.js + Node.js to execute a project normally fit for openFrameworks?

I’ve implemented the above project as a performance example that yielded somewhat cloudy results (OF runs smoother, but much slower). Are there any other testing metrics or processes that someone could recommend?

[arturo]

three.js has a scene graph that optimizes things under the hood. in OF you have to take care of some lower level details that can make things slower if you are not careful.

in your example, in the three.js version you are setting the material color which three internally will take care of setting for every geometry in the most optimized way while in OF you are calling ofSetColor twice per object draw which is changing the global state twice as many butterflies as you have which could be slow depending on what you are doing. also each butterfly has 3 nodes, two for each wing and one for the butterfly which are uploaded one by one to the graphics card when you draw each plane.

for something like this using instanced drawing with a buffer for the colors of each butterfly, and another buffer for each butterfly transformation would reduce the total drawing calls to 1 which i’m pretty sure will allow you to draw way more objects than in three.js since as far as i know you can’t do instanced drawing in webgl. there’s a couple of examples on instanced drawing in the examples/gl folder, on of them vboMeshInstancedExample shows how to use instanced drawing with a vbo mesh, the other one (only in the nightlies or latest master) textureBufferInstancedExample shows somthing pretty similar to what you are trying to do by uploading a color per particle instead of per vertex and a set of transformation matrices in a texture buffer.