LoginSignup
10
4

More than 5 years have passed since last update.

スマホで草を生やすために必要なことの考察

Posted at

はじめに

この記事はAkatsuki Advent Calendar 2017の3日目の記事です。
2日目: timecop 実装解説

スマホでオープンワールドを作りたくなりました。
広大な大地、大量の木や草などのオブジェクト。
これらをスマホで表現してみることに挑戦します。
今回はその一環で、まずは草を大量に表示することに挑戦し、処理速度の面で必要なことを考えてみます。

用意したもの

こんな感じのマップを使用します。
4km * 4kmのマップです。
map01.png
map02.png
スマホで起動してみます。
2017-12-03 20.03.29.png
初期マップのfpsは60fpsでした。
今回はこの草をスケーリングして使います。
grass00.jpg

インスタンス化

1つのメッシュを複数配置する際にインスタンス化をしておくと1回のDrawCallで描画が可能です。
草や木などに最適です。
(インスタンス化メッシュの作り方は、使うゲームエンジンによって違うと思うので、ここでは書きません)
これを使ってマップ全体に草を生やします。
PCで見ると、こんな感じになります。ちなみに1fpsも出ませんでした。今にも落ちそう・・・。
instance01.png
これをスマホで起動すると・・・落ちました、まあそうなりますね・・・。

LOD

LODとは、カメラの近くにあるオブジェクトはクオリティ高く表示し、遠くにあるオブジェクトはクオリティ低く表示するLevel of Details(略してLOD)の事です。遠くのオブジェクトは画面上でわずかなピクセルしか使わず、プレイヤーからほとんど見えないので、複雑で詳細なメッシュを持つ意味は薄いです。
以下のように、遠くにあるモデルほど、モデルのクオリティを落とすよう設定します。
triangles: 765
vertices: 621
grass00.jpg
triangles: 278
vertices: 342
grass01.jpg
triangles: 18
vertices: 36
grass02.jpg
実際に使う際は、最終的に張りぼてにするのがいいと思います。
PCで見ると、こんな感じになります。
before
lod01.jpg
after
lod02.jpg
LODを使うと、このように見た目はほぼ変わらずに処理速度を上げることができます。

しかし、スマホで起動すると・・・落ちました、もう一段階なにかやってみましょう。

距離によるカリング

LODで遠くのオブジェクトはクオリティを低くしましたが、今度は遠くにあるオブジェクトはそもそも描画しないようにしてみます。
カメラから半径10mの範囲にしか草を描画しない設定にします。
cull01.jpg
cull02.jpg

以下はスマホのスクショです。
cull03.png
結果は35fps ~ 45fpsとなりました。

草と地面の配色

しかし、どうも草が生えているところと生えていないところの境界がきになります。
そこで、地面の色と草の色を似せて、その境界を目立たなくしてみます。
ちなみにこの手法は、最近だとゼルダBotWでも使われてます。
before
cull03.png
after
cull04.png

まだ調整の余地はありますが、無調整の草よりかは目立たなくなりました。

まとめ

  • 同じメッシュを大量に描画する際はインスタンス化メッシュを使おう
  • そしてLODを使おう
  • 距離によるカリングをして、処理速度を稼ぎましょう
    • その際は、境目を目立たなくするような工夫をしましょう
    • 今回は触れませんでしたが、草の密度についても検討しましょう

何だかんだでPCとスマホ共通の最適化になってしまいましたが、一旦ここまでにします。

おまけ

今回の開発、検証は全てWindowsでやりました。
全てBlueprintで構成されていて、プラグインをなにもいじっていなければ、itunes connectにアップロードする以外はすべてwindowsで完結できます。
※プラグインを何かしらオフにするだけでもwindowsでビルドできなくなります。
今回私はVRのプラグインをオフにしたことでちょっとハマりました・・・。

10
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
4