Question

I have written some WebGL code, actually I am playing with the examples that are found here. Anyway I decided to write three separate pseudo-classes, I’ll show just one of them here to preserve space and because I don’t think the others are relevant to the question.

var Buffer = (function() {

/* PRIVATE MEMBERS */
var currentBuffer;
var itemSize = 3;
var numberItems;
var localWebGLContext;

/* CONSTRUCTOR */
var BufferConstructor = function(webGLWorker, vertices) {
    localWebGLContext = webGLWorker.getWebGLContext();
    currentBuffer = localWebGLContext.createBuffer();
    localWebGLContext.bindBuffer(localWebGLContext.ARRAY_BUFFER, currentBuffer);
    localWebGLContext.bufferData(localWebGLContext.ARRAY_BUFFER, new Float32Array(vertices), localWebGLContext.STATIC_DRAW);
    numberItems = vertices.length / itemSize;
};

return BufferConstructor;
})();

So I would like to know what is the best way in which I can include (require) them in a separate file that is going to bootstrap everythin. I read about CommonJS, but this is on the server-side and here we are talking client-side. I really don’t want to have to keep everything in one file because what I’m trying to do is ultimately going to be quite big as an application and I really don’t want it all in one place. Thanks in advance!

Answer 1

For my WebGL projects I use Require.js. The syntax isn’t quite as nice as Node’s CommonJS implementation but it works well with the asynchronous nature of the client side. Quick example:

require([
    "renderer",
    "util"
], function(Renderer, Util) {
    // Use the code from your required files in here!
});

And defining a module for it is just as easy:

define([
    "matrix" // Dependencies for this module
], function(Matrix) {
    return {
        DrawSuff: function() { /*...*/ }
    }
});

You can see a simple example of this in action with a WebGL project here.