WebGLのテクスチャが矩形で表示されない

Question

イメージを持つテクスチャ付きのキャンバスの代わりに黒のキャンバスが表示される、私の四角形のテクスチャに問題があります。

まず、webGLプログラムを作成してシェイダーを付け、webGLプログラムをいつものようにリンクします。

画像は、次のようにロードされたときにその後、私はテクスチャを作成しています：その後

var texture = gl.createTexture(); 
var image = document.createElement("img"); 
image.src = "https://upload.wikimedia.org/wikipedia/commons/3/3a/Saint-Gervais-les-Bains_-_Mt-Blanc_JPG01.jpg"; 
image.onload = function() { 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    // Set the parameters so we can render any size image. 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
    // Upload the image into the texture. 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); 
    } 

私は頂点シェーダに矩形verticiesに関する情報を渡す：

var pos = gl.getAttribLocation(program, "pos"); 
gl.enableVertexAttribArray(pos); 
var pos_Buffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, pos_Buffer); 
var vertices = [-1.0, -1.0, // "left-down" 
    -1.0, 1.0, // "left-top" 
    1.0, -1.0, // "right-down" 
    1.0, 1.0, // "right-top" 
]; 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0); 

そしてエンドIで

var indexBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); 
var indices = [0, 1, 2, 1, 2, 3]; 
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW); 
// draw triangles 
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0); 

0に頂点のインデックスを渡して、私の四角形を描画します。は私の問題のjsfiddleです。
どうか解決する方法はありませんか？

Answer 1

image.onloadは非同期関数であり、関数が実行される前に描画呼び出しを行います（キャンバスに描画すると画像が読み込まれません）。

あなたは内部gl.drawElementsを置く必要があります。

image.onload = function() { // image.onload STARTS 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    // Set the parameters so we can render any size image. 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
    // Upload the image into the texture. 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); 

    // anything you want, blehblahbleh ... 

    // draw on canvas 
    gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0); 

} // image.onload ENDS 

はまたイエスクロスオリジンリソースコールに問題があったが、私はあなたが拡張子とそれを解決すると思います（またはjsfiddleテストのために、あなたはbase64形式を使用する可能性があります）。

少し更新サンプル：http://jsfiddle.net/windkiller/6cLo3890/