Extending Processing.js With a .OBJ Importer February 27, 2011
Posted by Andor Salga in Open Source, Processing, Processing.js, webgl.trackback
The only way to create textured geometry in Processing.js is to place vertex() calls between beginShape() and endShape(). This method also allows constructing geometric meshes in a sketch at run-time.
This feature is great for dynamic meshes, but it isn’t efficient if we want to render a static mesh. The library needs to allocate a typed array, assemble the vertices and finally create a VBO which will be discarded in the very next frame. For static meshes, this should only occur once.
This problem has already been addressed in Processing by use of a .OBJ importer and we already have a corresponding bug filed in our issue tracking system.
I was certain I could get a performance boost if a VBO was only allocated once, but I had no idea how big that boost would be. So this weekend I put a few hours aside and hacked out a quick and dirty .OBJ importer. I created a simple demo which draws 100 cubes per frame. I found that on Minefield my .OBJ importer can render 4-5 times faster than using beginShape/endShape.
The performance gain isn’t bad, but don’t forget the other problem this can solve. This can allow users to import rich 3D assets into their sketches very easily. Creating a complex mesh with vertex() simply isn’t realistic. Even if this were done, editing the mesh would be an incredible ordeal. Using an importer just makes sense.
Questions
The question I’m trying to figure out is should the importer be built into Processing.js or should it be an extension? If we make it an extension it forces the user to deal with multiple js files to include. On the other hand, I can see this being deprecated with another, more relevant file standard such as COLLADA. Thoughts?
Great work Andor! I’ve been hoping for something just like this. To me, it makes the most sense for this to be a separate .js file, since Processing doesn’t have a built-in OBJ loader either. I’m looking forward to seeing this released.
Hey Kyle,
That’s what people are saying at work as well. I’m inclined to keep it in the library because that’s easier for me, but we’ll see when I’m closer to being done.
[...] Salga is looking into adding OBJ file importing to Processing.js, and, to judge from the number of ducks on his demo [...]
Could you explain more about the ‘hacked’ OBJ loader? I’m trying with the original Saito’s .objloader & processing.js…. But it is not working. help me…
[...] blog post is the continuation of a series of blogs [1, 2, 3] related to adding .obj file support to Processing.js. This code I’m working on is [...]