Blog:THREE.ShaderMaterialによる改良版が一応完成に至る。BlogTHREE.ShaderMaterialによる改良版が一応完成に至る。下の動画を見ていただくとわかると思うが、上面のテクスチャマップがうまくいかない問題が発生した。この問題はテクスチャ番号として「3」を指定した時に発生する。テクスチャ番号0-2ではなぜか発生しない。今一度、今回の取り組みを解説しておくとテクスチャマッピングはShaderMaterialを使ってやや特殊な方法で行っている。頂点情報のattributeとして、テクスチャ・インデックス(texIndex)、フロア階数(amount)を持たせ、それをフラグメントシェーダーに渡すことで、フロア階数に応じ、壁面は1フロア分のテクスチャを階数分繰り返すようにマッピングし、上面と底面は普通にテクスチャ・マッピングしているのである。テクスチャ・ビットマップは下のように4×4セルのビットマップとなっている。大きさは2048x2048pixelである。ビルの壁面用としては00-03、上面・底面用のテクスチャとしては08-11を使用する。コードの実装内容は以下の通りである。1.ExtrudeBufferGeometryで作った建物geometryオブジェクトにtexIndex、amountのattributeを追加する。1,false));2.追加したtexIndexに建物のテクスチャ・インデックス00-03をランダムにセット、amountには建物のフロア階数をセットする。}3.頂点シェーダーでは建物のテクスチャ・インデックスと建物のフロア階数をフラグメント・シェーダーに引き渡す。normal;}4.フラグメントシェーダーでは引き渡された建物のテクスチャ・インデックス(texIndex)とフロア階数(amount)をもとにテクスチャを読み出すためのuv座標を求め、テクスチャを読み出す。開始位置からuv量を求める。uv);...}実装したものは以下にアップしてある。テクスチャ・インデックス(texNo)を3に指定すると現象が再現できる。原因は頂点シェーダーからフラグメント・シェーダーに値を渡すときに値が補完されるためであった。1.0ではできないらしい。2.0ではattributeに相当するinにflatかsmoothを指定できるので、これで回避できそうな気もしないでもないが。)とりあえずは補完を打ち消すコードをフラグメント・シェーダーに入れることで解消することができた。具体的には四捨五入するだけである。.5);修正したコードの結果は以下である。以下のコードは00-03以外のテクスチャ・インデックスを指定した場合は普通にテクスチャ・マッピングするように改良している。地図の描画コードに反映させるこれを機に、GeometryからBufferGeometryに変更した。実はここでも問題が発生した。geometryをまとめるのにBufferGeomtry.mergeを使おうとしたが、r85バージョンではこのメソッドには不具合がある。ソースコードは以下のとおりである。},問題点は以下の2点である。indexを統合するコードがない。attributeの統合コードが、TypedArrayを考慮したものになっていない。この問題点はthree.jsのIssueに載っている。https://github.com/mrdoob/three.js/issues/6188具体的に修正するコード例も上のIssueに載っていたが、実はこの修正例にも不具合がある。それをさらに修正したバージョンが以下である。this;};ただこのメソッド、頂点数が多いととてつもなく遅くなる。統合するコードは別に書くことにした。改良後の画像は以下である。フロア階数を反映した壁面となっているのがお分かりいただけるかと思う。一応完成したが、もういくつか別のやり方がありそうで、ちょっとそれを試してみようと思っている。頂点数をカウントしたら5,682,312あった。最終的な成果物は以下である。Mapのデータを使って、大阪の環状線の内側を3D化してみた。建物については高さデータがあるものはそれを使用して、高さデータがないものはランダムに高さを設定して表示している。コードは下記記事のサンプルをベースにしている。http://qiita.com/i09158knct@github/items/f0f4c82fed8aab004737以下の改良を行い、たくさんのメッシュを表示してもパフォーマンスができる限り落ちないようにしている。