前回はジオメトリをまとめることによって表示の高速化を達成したが、そうするとマテリアルが1種類しか選べず、表示品質が劣化してしまった。これを何とかして、高速化した状態を維持したまま、前々回の表示品質並みの表現ができるように工夫してみた結果が以下のスクリーンショットである。前回同様、そこそこぐりぐり動く。川は公園・森などもテクスチャを貼ってみた。表示を高速化するために建物のジオメトリを統合したが、そのせいでマテリアルが1種類しか指定できない。この制約の中でできそうなことを考えた。結果以下のアイデアが浮かんだ。・1つのテクスチャーマップにいろいろなテクスチャーをまとめ、それをUV座標で出しわける。以下のようなテクスチャーを用意する。四角形のポリゴンに、左上のビルのテクスチャーを貼りたければ、UV座標を(0,0),(0.25,0.0),(0.25,0.25),(0.0,0.25)のように指定すればよい。建物は平面図からTHREE.Shapeを作り、THREE.ExtrudeGeometryで押し出して作り出している。高さデータや階数のデータがあれば引数のamountに設定し、そうでなければランダムに高さをamountに設定して押し出す。よって表現される3D画像はかなりいい加減なものである。このTHREE.ExtrudeGeometryに指定できるオプションでUVGeneratorというのがある。これはジオメトリを押し出したときに同時に面のUVを生成するためのメソッドを持つオブジェクトである。デフォルトではWorldUVGeneratorがセットされる。このWorldUVGeneratorではきちんとテクスチャーマップを貼り付けることができない。(なぜなのかはちゃんと理解できていない。BoundingUVGeneratorというクラスをどこかで見つけて、それを修正して使っている。このメソッド名を見ると、generateTopUV()が上面のUVを返し、generateSideWallUV()が側面のUVを返すメソッドである。そこでこのBoundingUVGeneratorをカスタマイズして、任意のテクスチャーのUVを返すように工夫してみた。上面のテクスチャーインデックス。側面のテクスチャーインデックス。テクスチャは以下のように分割され、インデックスがつけられている。そのインデックスを指定することによってその範囲のUV座標をマップする。}};これによって、1つのマテリアルで疑似的に複数のテクスチャを貼り付けることができるようになった。建物の平面はいびつであることが多いので、きちんとテクスチャーをマッピングするにはもっと工夫が必要だ。ビルの高さに応じてテクスチャーマップのリピート回数を工夫したりとかしないといけないし、まだ影も投影できていない。ゲーム背景として現実のマップ情報から自動生成するのはちょっと敷居が高いような気もしてきた。同じようにOpenStreetMapの情報を使ってBlenderで街シーンを作るチュートリアルって結構あって、それを見ているとある程度のリアルさを求めるのであればある程度モデリングせんといかんのなかなぁ。ブラウザでこんなに多数のポリゴンをぐりぐり動かせるとは、すごい時代になったものだ。