キャンバスに長方形を描画し、一点透視図法に基づいて側面を描画する単純な JavaScript を作成しようとしています。問題は、長方形の量とその配置が任意であるため、真の 3D 遠近法では発生しない方法で面が重なり合う傾向があることです。これが起こらないように、正しい描画順序を決定するにはどうすればよいですか?
ここに私が何を意味するかを説明するためのいくつかのスクリーンショットがあります:
スクリーンショット 1 - 間違った方法。この例では、赤、緑、青のブロックのグループが、描画方法とは逆の順序で描画されています。
スクリーンショット 2 - 正しい方法。これは、それが描かれるべき方法です。
あなたが探しているのは、交差するポリゴンがない限り、 Painter's Algorithmと呼ばれます
スクリーンショットが機能しないので、私は大げさな推測をして、あなたが抱えている問題は、後ろから前に長方形を描くと奇妙な重なりが生じることだと思います。
これを修正するための1つのアプローチは、単純なバイナリ空間分割を使用することです。基本的に、正面を向いているすべての長方形を無限平面に拡張します。次に、それらの平面が交差するすべての辺の長方形を分割します。次に、オーバーラップの問題が発生した場所で側面の長方形が分割されるため、前面から背面への描画で製品がオーバーラップしないようにする必要があります。
編集：ああ、あなたのスクリーンショットが機能するようになったので、それはあなたの問題ではないと思います。ああ、とにかく答えを残しておきます。
