なぜWebGL図面はありませんか？

私はこの非常にシンプルで（まだ大きな）コードは動作しません。三角形は表示されません。オルト・マトリックスですでに乗算された3つの頂点を渡すだけです。頂点シェーダでは何もせず、フラグメントシェーダで白をペイントします。なぜWebGL図面はありませんか？

<head> 
    <script type="text/javascript"> 
     var gl; 
     _main_web = function() { 
      gl = document.getElementById("canvas").getContext("experimental-webgl"); 
      gl.clearColor(1,0,0,1); 
      gl.enable(gl.DEPTH_TEST); 
      gl.viewport(0, 0, 640, 480); 
      gl.clearDepth(1); 

      buffer = gl.createBuffer(); 
      gl.bindBuffer(gl.ARRAY_BUFFER,buffer); 
      gl.bufferData(gl.ARRAY_BUFFER, 
new Float32Array([[-1, -1, -0.12000000476837158, 1, 
0, 1, -0.12000000476837158, 1, 
1, -1, -0.12000000476837158, 1]]), 
      gl.STATIC_DRAW); 

      vert_shader = gl.createShader(gl.VERTEX_SHADER); 
      gl.shaderSource(vert_shader,"attribute vec4 vertex;void main(void) {gl_Position = vertex;}\n"); 
      gl.compileShader(vert_shader); 
      if(!gl.getShaderParameter(vert_shader,gl.COMPILE_STATUS)) { 
       throw 0; 
      } 

      frag_shader = gl.createShader(gl.FRAGMENT_SHADER); 
      gl.shaderSource(frag_shader,"void main(void) { gl_FragColor = vec4(1.0,1.0,1.0,1.0); } \n"); 
      gl.compileShader(frag_shader); 
      if(!gl.getShaderParameter(frag_shader,gl.COMPILE_STATUS)) { 
       throw 1; 
      } 

      program = gl.createProgram(); 
      gl.attachShader(program,vert_shader); 
      gl.attachShader(program,frag_shader); 
      gl.linkProgram(program); 
      if(!gl.getProgramParameter(program,gl.LINK_STATUS)) { 
       throw 2; 
      } 

      vertexLocation = gl.getAttribLocation(program,"vertex"); 

      gl.deleteShader(frag_shader); 
      gl.deleteShader(vert_shader); 
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 

      gl.useProgram(program); 
      gl.bindBuffer(gl.ARRAY_BUFFER,buffer); 
      gl.enableVertexAttribArray(vertexLocation); 
      gl.vertexAttribPointer(vertexLocation,4,gl.FLOAT,false,0,0); 

      gl.drawArrays(gl.TRIANGLES,0,3); 
     } 
    </script> 
    <style> 
     body { 
      margin:0px; 
     } 
    </style> 
</head> 
<body onload="_main_web()"> 
    <canvas id="canvas" width=640 height=480> 

    </canvas> 
</body>

午後全体をデバッグしているため、エラーが見つかりませんでした。 getErrorは常に0を返します。欠けているものはありますか？

出典

2012-01-17 André Puel

gl.drawArrays(4,3,0);

これは奇妙に見えます。

gl.drawArrays(
    /* mode */ gl.TRIANGLES, 
    /* first vertex */ 0, 
    /* num vertices */ 3 
);

また（重要でない）：：のようになります

gl.useProgram(program); 
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);

最後bindBufferは、現時点では重要ではありません。 gl.vertexAttribPointerで属性の場所を設定するときに必要ですが、一度設定されるとARRAY_BUFFERのバインディングを変更することができます。

複数の属性が異なるVBOにある場合は、これを行う必要があります。

（注：これは、あなたがdrawElementsまたは何かをする場合に設定する必要がありますELEMENT_ARRAY_BUFFERバインディングのためのケースではありません）

出典

2012-01-17 21:22:45 Kos

こんにちは、4です.TRIANGLES（私はOpenGLの呼び出しを取得する私の元のソフトウェアをトレースし、gl.TRIANGLESで4を置き忘れた）。私はdrawArraysの引数を最初の頂点とnum頂点に切り替えました。私はちょうどそれを修正しましたが、それはまだ動作しません、私はコード変更の主な質問を編集しました。他に何か間違っていますか？ –

私はそれを得ました、ダブル[[バッファーデータ定義上！ –

ああ、あなたは5分で私にそれを打つ:)私は言葉になるために得るものを示しています。 – Toji

変更したコードでは、私は削除することによって、それが白い三角形をレンダリングするために取得することができましたFloat32Arrayコンストラクタ呼び出しの周りの余分な[]セット。私はそれは、単純なタイプミスだったことを想像

new Float32Array([[-1, -1, -0.12000000476837158, 1, 
0, 1, -0.12000000476837158, 1, 
1, -1, -0.12000000476837158, 1]]),

この

new Float32Array([-1, -1, -0.12000000476837158, 1, 
0, 1, -0.12000000476837158, 1, 
1, -1, -0.12000000476837158, 1]),

に、しかし酒または明確にするため：だからこれから行くnew Float32Array()は数字の配列、それは意志を与えられることを期待し32ビットの浮動小数点値に「キャスト」します。あなたは配列でもある単一の項目を含む配列を渡していました。それはキャストが失敗するようにそれを処理する方法を知らないので、1つの値を含むFloat32Arrayが返されました：NaN。

出典

2012-01-17 23:10:44 Toji

ええと... Javascriptには例外がありませんか？ :-)ニースキャッチ – Kos

無効なJavascript！== Nonsensical Javascript。この文は純粋に構文的に「有効」であり、関数自体は単純にfloatに変換できない値をNaNとして扱うように記述されているため、うまく動作します。 Javascriptは厳密に型指定されていましたが、これは私たちが捕まえることができるエラーのタイプですが、そうではありません。言語の現実。（もちろん、JSが厳密に型付けされていれば、最初にこの関数は必要ないでしょう） – Toji

この種の問題を避けるために例外が考案されました。前提条件の失敗を報告する魔法の価値！ Uncool。 – Kos

なぜWebGL図面はありませんか？

答えて

関連する問題