1

私は HTML5 キャンバスの 3D レンダラーを作成しています。SO の助けを借りずにかなり進んだと思いますが、ある種のショーストッパーに遭遇しました。いくつかの法線計算を利用して、立方体に背面カリングを実装しようとしています。また、これを WebGL としてタグ付けしました。これは、私のユース ケースと 3D アクセラレーション ユース ケースの両方に適用できる一般的な質問であるためです。

いずれにせよ、立方体を回転させていると、間違った面が隠されていることがわかりました。例：

立方体の裏面カリングの問題

次の頂点を使用しています: https://developer.mozilla.org/en/WebGL/Creating_3D_objects_using_WebGL#Define_the_positions_of_the_cube%27s_vertices

私が使用している一般的な手順は次のとおりです。

  1. 立方体の頂点を変換するための変換行列を作成します

  2. 各面、および各面の各点について、これらを vec3 に変換し、ステップ 1 で作成した行列を掛けます。

  3. 次に、ニューウェルの方法を使用して顔の表面法線を取得し、その法線と作成された vec3 ([-1, 1, 1] など) から内積を取得します。ここに入れます。これにカメラの位置を使用する人もいますが...

  4. カメラ マトリックスを使用する通常の手順をスキップして、結果のベクトルから x 値と y 値を取得して、ライン レンダラーとフェース レンダラーに送信しますが、内積が 0 より大きい場合のみです。引っ張る、本当に。

私は2つのことを疑問に思っています。ステップ 3 の手順が正しい場合 (そうではない可能性が高い)、面に描画している点の順序が正しくない場合 (可能性が非常に高い)。後者の場合、問題を視覚化する方法がよくわかりません。法線は関係ない、線が描かれている方向だと人々が言うのを見たことがありますが... それについて頭を包むのは難しいです, またはそれが私の問題の原因です.

おそらく問題ではありませんが、私が使用しているマトリックス ライブラリは gl-matrix です。

https://github.com/toji/gl-matrix

また、私が使用しているオープン ソース コードベースの特定のファイルは次のとおりです。

http://code.google.com/p/nanoblok/source/browse/nb11/app/render.js

前もって感謝します！

4

1 に答える 1

1

システム全体を確認したわけではありませんが、「作成された vec3」は恣意的なものであってはなりません。それは「画面外」ベクトルでなければなりません。これは (射影が ⟨<em>x, y , z ⟩ → ⟨<em>x, y ⟩ なので) ⟨0, 0, -1⟩ または ⟨ のいずれかです0, 0, 1⟩ は、座標系の利き手と画面軸によって異なります。明示的な「カメラ マトリックス」(通常はビュー マトリックスと呼ばれます) はありませんが、カメラ (ビューと投影) はステップ 4 の投影によって暗黙的に定義されます。

ただし、このアプローチは正射投影に対してのみ機能し、透視投影に対しては機能しないことに注意してください (画面の左側に面があり、右向きでビュー方向に平行であると考えてください。内積は 0 になりますが、表示されるはずです)。実際の 3D ハードウェアで使用される通常のアプローチは、最初にすべての変換 (射影を含む) を実行し、次に結果の 2D 三角形が反時計回りか時計回りかをチェックし、その条件に基づいて保持または破棄することです。

于 2012-07-29T04:36:33.323 に答える