3つのjsでポリゴンに複数のテクスチャをクリップする方法

Question

グリッドにそれぞれ独自のテクスチャを持つプレーンがたくさんあります。現在、私は、複数の面を持つ単一の平面を使用することができますが、それぞれ別々のテクスチャを持つ別々のプレーンとしてレンダリングしています。

各色はテクスチャです。この形状は、完全に平面の1つ、またはそれ以上の範囲内に含まれることができる

：

Iは、これらの面に平行な任意形状のポリゴンメッシュを有します。

私は飛行機のオーバーラップのテクスチャとポリゴンにテクスチャしたいと思います：

私は3つのJSでのテクスチャのこのクリッピングを達成するにはどうすればよいですか？

私は他のWebGLソリューションにもオープンしています。

私が持っていたいくつかのアイデア：

1. は、重複プレーンに対応顔にポリゴンを分割。 UVコイードを使用してこれらの面をテクスチャ加工します。私はこれを動作させることができますが、それは解決策が複雑すぎるようです。
2. ポリゴンに複数のテクスチャを適用し、UV座標を使用してそれらを分散します。 - 細分化せずにこれが可能であるかどうかわからないのですか？

他のアイデア？ブレンドモードでこれを達成できますか？

Answer 1

いくつかのアイデア：texture atlasに

---

焼く小さなテクスチャは、あなたが1個のUVセット（つ以上のアトラスが必要な場合は、1つのWebGLのプログラムで複数のテクスチャサンプラを使用することができます）を持つ単一の平面上にタイルを持っています。これらの紫外線を形状の頂点とサンプルテクスチャアトラスの世界のPOSに対応する

計算面のUV。これはおそらく、形状マテリアル平面のmodelMatrixに渡す必要があります（または、向きがわかっている場合はスケール/オフセット、平面が固定されている場合は何も表示されません）。

あなたは小さなタイルの上に、高解像度のテクスチャを必要としないことに注意してください。また、アトラスは、タイルをテクスチャ（正投影から頂上まで） にレンダリングするか、テクスチャを別々のサンプラに渡すことで置き換えることができます。最後のケースについて：どのテクスチャを渡すかを決定するには、形状とマップタイルの境界ボックスをテストできます。

---

テクスチャに簡単な材料を使用して形状をレンダリングし、あなたが飛行機を描くメインパスでマスクとしてこのテクスチャを使用します。その上で詳細な

：

場所の形状は、あなたの通常のカメラで非常に単純な材料（どこでも白書き込み）を別の容器とrender it to a fixed size textureでマスクします。レンダリングパスを通過した後は、画面上に黒い色と白い形のテクスチャが表示されます（四角形のテクスチャにスケールされます）。

その後、シーンの残りの部分をタイルの素材のマスクテクスチャに渡してレンダリングします。フラグメントシェーダでは、screenPosをuvとしてマスクテクスチャをサンプリングし、白くなった場合にのみフラグメントを描画します（それ以外の場合は破棄します）。おそらく最良のアイデアではないでしょう（廃棄は高価です）。

---

深度マスクアプローチの改良版：マスクに無効色書き込み（renderer.context.colorMask(false, false, false, false);）を渡します。その後、深さのバッファにあなたの形を持っている必要があります。次に、カラーマスクをすべてtrueにリセットし、renderer.autoClearDepth = falseと設定し、tileMaterial.depthFunc = THREE.GreaterDepth（more about depthFunc）と設定します。あなたのタイルをレンダリングします。これは仕事をするはずです。

また、マスクの深さをdepthTextureに書き込んで、メインパスのテクスチャとして使用することもできます。をマスクする

---

使用ステンシルバッファ：私はまだそれを試していないが、それはあなたのケースのために適切でなければなりません。例：1,2。アイデアは上記のマスキングと似ています。