3つのファイルに分割されたWebGLコードを1つのブートストラップファイルに「要求する」方法

Question

私はいくつかのWebGLコードを書いていますが、実際にはhereという例があります。とにかく私は3つの別々の擬似クラスを書くことに決めました。私はスペースを保存するためにそれらのうちの1つだけを示し、他のものはその質問に関連しているとは思わないからです。

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; 
})(); 

だから、私はeverythinをブートストラップしようとしている別のファイルに（必要）それらを含めることが可能な最善の方法は何か知っていただきたいと思います。私はCommonJSについて読んだが、これはサーバー側にあり、ここではクライアント側に話している。私は本当に1つのファイルにすべてを保持する必要はありません。なぜなら、私がしようとしているのは最終的にアプリケーションとして非常に大きくなり、本当に1つの場所にすべてが欲しくないからです。前もって感謝します！

Answer 1

私のWebGLプロジェクトでは、Require.jsを使用しています。この構文は、NodeのCommonJS実装と同じくらい良いものではありませんが、クライアントサイドの非同期性にも適しています。クイック例：

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

そして、それのためのモジュールを定義するには、同じように簡単です：

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

あなたはWebGLのプロジェクトhereでこの動作の簡単な例を見ることができます。