Backbone.js and three.js - MVC with canvas

Question

I am in the planning stages of developing a small web-app that does some interactive data visualization in a 3D space.

For widest browser compatibility, three.js looks like the best choice, as I can render the same scene using WebGL, canvas, or SVG.

Ideally, I am wanting to use backbone.js to provide a nice MVC layer and avoid some tediousness of writing the ajax, but before I get to far with it, I was wondering if anyone had any experience/tips/words of advice in trying to make that work.

Assuming canvas or WebGL, It seems like the backbone.view could be pretty easily abstracted to support a three.js model. The render function is meant to be overridden. I could attach a simple listener on the canvas and then us some three.js trickery to pull out the specific model for firing off events (which seems like it would be the most difficult task). Backbone models and collections would work just fine with my API (I think). The Controllers would probably be a bit more difficult, but could possibly even be used by saving the position of the camera or something similar.

With SVG rendering, this is obviously simplified with all the elements being in the DOM, but I question if SVG would even be a good option when there are 1,000+ objects in the scene. Anyone have experience with large scene graphs in SVG?

Is there other libraries, either for rendering or similar to backbone, that would be a better route to take? I am open to suggestion on the matter.

Answer 1

Your estimation of how you would use Backbone is pretty right-on, and there's even an added bonus, I think. You mentioned something about using "three.js trickery to pull out the specific model for firing off events (which seems like it would be the most difficult task)" - not sure if I just am getting confused by the use of model, but when a view render is triggered, the collection/model it is bound to is passed to that render method - there would be no need for a lookup. And through Underscore's _.bindAll(), you can bind a render method (or any method on the view, really) to any event generated by the collection _.bindAll() is executed on. AND you can trigger all your own custom events off said model/collection. The possibilities are pretty limitless due to this. And yes, a render method could be anything, so interaction with three.js in that space should be perfect. That's a lot of "and"s!

What you want to do is definitely possible, sounds really fun, and is definitely a great application for Backbone.