-2

これが適切なプロトコルかどうかはわかりませんが、次の場所にプロジェクトがあります。

https://github.com/mkarbowski/angry-bears

これは、WebGLゲームでの私の試みです。私はAndroidでOpenGLES2.0を使用したことがあるので、WebGLは大きく飛躍することはできないと考えました。しかし、スクリプトをデバッグできないことは、私を殺してしまいます。意味のあるエラーの欠如は言うまでもありません。

4

1 に答える 1

7

まず、GLエラーが発生しています。その理由を考えてみるといいかもしれません。

「デバッグコンテキスト」を使用してそれらを見つけることができます。WebGL Wiki のこのエントリを参照してください

そこで参照されているファイルをインクルードし、この行を engine.js のコードの 26 行目に追加しました。

gl = WebGLDebugUtils.makeDebugContext(gl, function(err, funcName, args) {
  throw WebGLDebugUtils.glEnumToString(err) + ": " + funcName;
});

gltexture.js には、次のようなコードがあります

texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.texture);

this.texture は定義されていません。たぶん、このように前に行で定義するつもりでしたか？

this.texture = gl.createTexture();

次に、画像をロードするための onload コールバックは「this」を使用していますが、コールバックのコンテキストには「this」はありません。これを修正する最も簡単な方法は、別の変数「それ」を宣言するか、プロパティを作成してbindを使用することです。

that = this;  // define that
image = new Image();
image.onload = function() {
  loaded = true;
  gl.bindTexture(gl.TEXTURE_2D, that.texture);  // using that
  return gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
};

それはエラーを取り除きました

コードに従ってください。次に追加した GLUtils.useTexture にテクスチャがロードされているかどうかを確認するのではなく、

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, 
                  gl.RGBA, gl.UNSIGNED_BYTE, 
                  new Uint8Array([255,0,0,255]));

GLTexture に対して、実際のテクスチャがロードされたときに置き換えられる 1 ピクセルのテクスチャで常に開始されます。

次に、TriangleTest.draw はフレームごとにバッファを作成しています。おそらくあなたが意図したものではありません。

次に、コードの周りに console.log のものを追加し始めました。クリアカラーをランダムに変更しました

 gl.clearColor(0, 0, Math.random(), 1);

そうすれば、プログラムが実行されていることがわかります。

useCamera で渡している行列に射影行列がないことがわかりました。私はそれをIDに設定し、頂点を変更して、画面の前に何かを表示するためだけにクリップスペースに入るようにしました. それは黒い三角形を手に入れました。

だから私はあなたの GLUtils.useTexture を見ました。その中で、存在しない関数である texture.getTexture() を呼び出します。それをに変更する

gl.bindTexture(gl.TEXTURE_2D, texture.texture)

そして今、それは何かをレンダリングします。

その他ランダムコメント

  • 開発ツールを使用します (Chrome または Safari)。Ctrl-Shift-J または Cmd-Shift-J または Firefox の同様のツール
  • WebGL インスペクターが役立つ場合があります。
  • console.log と console.error はあなたの友達です。console.error は、少なくとも Chrome ではスタック トレースを提供します。
  • setTimeout の使用を停止します。代わりにrequestAnimationFrameを使用してください。利点の 1 つは、コードが停止した場合に停止することです。setTimeout を使用すると、ブラウザーは呼び出しと呼び出しを繰り返し、デバッグが困難になります。もう 1 つの利点は、ページがフロント タブではない場合にシステムを DoSing しないことで、ユーザーを気にかけていることを示します。
  • すべての WebGL 呼び出しを印刷して確認すると役立つ場合があります。上記のデバッグ コンテキストの例に従って、(a) すべての呼び出しを出力し、(b) 未定義のパラメーターがないことを確認するラッパーを簡単に作成できます。(たとえば、WebGL Wikiを参照してください)
  • Chrome を使用している場合は、Chrome 20 (Chrome Canary) を試してください。WebGL エラーのエラー メッセージがいくつか表示されます。Firefoxも同様です。

あなたのプロジェクトで頑張ってください

于 2012-05-09T03:17:41.637 に答える