javascript - webgl オブジェクトを自分のオブジェクトに解析できません

Question

私は3dObjectとそれに関連するすべてのものを含むようにjavascriptでオブジェクトを作成しようとしています:頂点位置、法線、テクスチャ座標など+それを処理するために必要なメソッド:オブジェクトの読み込み、描画など.

問題は、WebGL コンテキスト オブジェクト (私の場合はグローバルに宣言されている gl) を解析しようとすると、createBuffer()、bindBuffer()、javascript などの特定のメソッドを使用するために、次のエラーが表示されることです:「Uncaught TypeError:未定義のメソッド 'createBuffer' を呼び出せません"

これはオブジェクトコードです:

function object3D(gl){

this.vertexPositionBuffer = gl.createBuffer();

this.textureCoordBuffer = gl.createBuffer();

this.normalDirectionBuffer = gl.createBuffer();
this.indexBuffer = gl.createBuffer();

this.loadVertices = function (vertices, itemSize, numItems){
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    this.vertexPositionBuffer.numItems = numItems;
    this.vertexPositionBuffer.itemSize = itemSize;
}

this.loadNormals = function (normals, itemSize, numItems){
    gl.bindBuffer(gl.ARRAY_BUFFER, this.normalDirectionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
    this.normalDirectionBuffer.numItems = numItems;
    this.normalDirectionBuffer.itemSize = itemSize;
}

this.loadIndex = function (indexArray, itemSize, numItems){
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array, gl.STATIC_DRAW);
    this.indexBuffer.numItems = numItems;
    this.indexBuffer.itemSize = itemSize;
}

this.loadTexture = function (textureCoord, itemSize, numItems){
    gl.bindBuffer(gl.ARRAY_BUFFER, this.textureCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoord),    gl.STATIC_DRAW);
    this.textureCoordBuffer.numItems = numItems;
    this.textureCoordBuffer.itemSize = itemSize;
}

}

これは、このオブジェクトのインスタンスを作成しようとする方法です:

var cube1 = new object3D(gl);

WebGL コンテキストの割り当て:

var gl;
function initGL(canvas){
try{
    gl = canvas.getContext("experimental-webgl");
    gl.viewportWidth = canvas.width;
    gl.viewportHeight = canvas.height;
}catch(e){
}
if(!gl){
    alert("Could not initialise WebGL");
}
}

関数の外側とオブジェクト定義の内側で console.log(gl) は未定義と言っていますが、他の場所では正常に動作しますが、グローバルに宣言されています。

私はC ++の確かなバックグラウンドを持っていることに言及する必要がありますが、私はjavascriptとその中のオブジェクトの処理にはかなり慣れていません。