Three.js r149 で Buffer Geometry つかってみるテストその３

その２からのつづきです。　ひきつづきBuffer Geometryと物理演算の連携を保ちつつ、Buffer Geometryでどこまでできるかを実験しています。　

最初のはほうはテクスチャ画像をうまく配置して、一枚絵の大きなテクスチャにできないか実験していますが、最終的にはあきらめています。　Buffer Geometryで作る面の数が増えると貼り付けるテクスチャの方向を制御できなくなってしまいました。

その後はBuffer Geometryで作成する面の数を増やしてなめらかになった地面に、どれだけテクスチャを貼り付けても大丈夫か実験してます。　どれぐらいの数で処理落ちするか見てみるつもりでしたが、自分のPCでの自分の実験範囲でははわりと普通に動いてくれました。　どんな見た目になるかも確認してみましたが、細かすぎるとイマイチ意図した見た目になってくれないとわかりましたｗ。

Three.js r149 Buffer Geometry Test20 Textured Heightfield Test10

Three.js r149 Buffer Geometry Test20 Textured Heightfield Test10

Three.js r149 Buffer Geometry Test21 Textured Heightfield Test11

Three.js r149 Buffer Geometry Test21 Textured Heightfield Test11

Three.js r149 Buffer Geometry Test22 Textured Heightfield Test12

Three.js r149 Buffer Geometry Test22 Textured Heightfield Test12

Three.js r149 Buffer Geometry Test23 Textured Heightfield Test13

Three.js r149 Buffer Geometry Test23 Textured Heightfield Test13

Three.js r149 Buffer Geometry Test24 Textured Heightfield Test14

Three.js r149 Buffer Geometry Test24 Textured Heightfield Test14

Three.js r149 Buffer Geometry Test25 Textured Heightfield Test15

Three.js r149 Buffer Geometry Test25 Textured Heightfield Test15

Three.js r149 Buffer Geometry Test26 Textured Heightfield Test16

Three.js r149 Buffer Geometry Test26 Textured Heightfield Test16

初期ファミコンRPGのドット絵風の砂漠画像を貼り付けてみました。　細かすぎて黄色のテクスチャ貼り付けたようにしか見えなくなりましたｗ。　自分の中ではドット絵風の大砂漠できる予定でしたｗ。

Three.js r149 Buffer Geometry Test27 Textured Heightfield Test17

Three.js r149 Buffer Geometry Test27 Textured Heightfield Test17

初期ファミコンRPGのドット絵風の草原、フィールドのつもりの画像を貼り付けてみました。　細かすぎて緑色のテクスチャ貼り付けたようにしか見えなくなりましたｗ。　自分の中ではドット絵風の大草原できる予定でしたｗ。

Three.js r149 Buffer Geometry Test28 Textured Heightfield Test18

Three.js r149 Buffer Geometry Test28 Textured Heightfield Test18

初期ファミコンRPGのドット絵風の海、水辺のつもりの画像を貼り付けてみました。　細かすぎて青色のテクスチャ貼り付けたようにしか見えなくなりましたｗ。　自分の中ではドット絵風の大海原できる予定でしたｗ。

Three.js r149 Buffer Geometry Test29 Textured Heightfield Test19

Three.js r149 Buffer Geometry Test29 Textured Heightfield Test19

テクスチャをスライム風画像に変更してみました。

Three.js r149 Buffer Geometry Test30 Textured Heightfield Test20

Three.js r149 Buffer Geometry Test30 Textured Heightfield Test20

テクスチャをザク風画像に変更してみました。

次回