html5キャンバスでポリゴンをオーバーラップする

Question

html5キャンバスにシンプルな3Dシェイプ（この場合はキューブ）をレンダリングしようとしています。 3次元点を2次元平面に変換するのは簡単なので、先に進んでポリゴンの色付けを開始しました。それらは間違った順序でオーバーラップします。だから私はちょうど各ポリゴンの距離を計算し（4つのコーナーのavarageに基づいて）、それに基づいてソートします。

それ以外は実際には機能しません。どのように最初に描画するポリゴンをどのように決めるのですか？

P.S.私はこれを作る方法を学ぼうとしているので、既存のライブラリや何かを使って実際にはうまくいきません。

Answer 1

しばらく検索したところ、これを確認する方法が見つかりました。これは「バックフェールのカリング」によって行われ、私が理解していることから、最初にポリゴンの2次元位置を計算し、3ポイントを取ってそれらを比較してポリゴンがどのように向き合うかを判断します。以下のように

Iを用いる検査である：

P1、P2およびP3は、点のx及びy位置を含むアレイである

ifVisible = function(p1, p2, p3) 
{ 
    return ((p2[0]-p1[0])*(p3[1]-p1[1])>(p3[0]-p1[0])*(p2[1]-p1[1])); 
} 

。

これは、ポリゴンの点の注文がある場合にのみ機能します（私の場合、カメラの方を向いたときの位置は時計回りです）