Slide 1

Slide 1 text

C Y B E R T E N N I S で 使 わ れ て い る 技 術 エ ン ジ ニ ア 総 選 挙 i n ド リ コ ム 2 0 1 9 - 2 - 2 1 ソ フ ト ウ エ ア 研 究 会 i n 秋 葉 原 テ ク ニ カ ル ア ー ツ h . g o d a i

Slide 2

Slide 2 text

自己紹介 • 池田公平(ペンネーム 五代響)29歳と323ヶ月 • 有限会社テクニカルアーツ 代表 • ソフトウエア研究会in秋葉原 主宰 (2003年〜) • 1983年 株式会社ゲームアーツ創立 • 1989年 有限会社テクニカルアーツ創立 • 趣味はバイクレースとワインとソフトテニス • 2018年 Oculus Go 向けのVRテニスゲームを開発 Oculus Storeにて絶賛発売中!

Slide 3

Slide 3 text

発表について Oculus Go 用の VRテニスゲーム 「 CYBER TENNIS」 で使われている技術テクニックの紹介をシリーズで 行なっています。 CYBER TENNISは Unity (クライアント ) Elixir (サーバー) で開発しました。

Slide 4

Slide 4 text

MENU • Episode-I ボールをラケットで打つということ • Episode-II 計算の最適化 • Episode-III P2P通信、NAT超え • Episode-IV コントローラー入力の分析 • Episode-V VR酔い • Episode-VI ゲームシステム • Episode-VII レンダリングの最適化 いまココ!

Slide 5

Slide 5 text

VRゲームにスピードが必要 •Oculus Goの中身はミドルレンジのスマホ •VRは「酔い」を軽減するため、高フレームレート が必須  Oculus Goでは72Hzを推奨 • Oculus Goのハードウエアで72Hz維持は結構きつい 色々と工夫が必要です

Slide 6

Slide 6 text

レンダリングの速度を上げるには ポストエフェクトを使わない リアルタイムに影の計算を行わない フィル領域の削減 • 2度塗りをしない ドローコールの削減 • 目標100以下 • などなど…

Slide 7

Slide 7 text

テニスコートの描画例 + = ベースとコートを単純に合わせると、コートの部分が2度塗りになって遅くなる コートの部分をくりぬいたメッシュを使えば、コートの部分が2度塗りにならない + =

Slide 8

Slide 8 text

こんなメッシュを作るには コートの外側 テニスのネット(中央が低い) ボールのバウンド跡 コートのライン

Slide 9

Slide 9 text

デザイナーに頼んで作ってもらう しょうもないものオーダーするなと怒られる

Slide 10

Slide 10 text

UNITYのプリミティブを組み合わせて作る ちまちまめんどくさい サイズ固定のためスケールする必要がある コライダーと合わせると辛い 長方形以外の形が作れない

Slide 11

Slide 11 text

フリーのモデリングソフトで作る プログラマなので何がよいのかわからない どれも、「帯に短し襷に長し」な感じ プログラマ向けのモデル作成ツールはなかなかない 選ぶのが面倒なので3DStudioMaxの体験版を入れた エクスポート時の設定が多すぎて困惑! 他の仕事していたら期限が切れていた!

Slide 12

Slide 12 text

テキストエディタで、 モデルデータを手打ちする Wave Font OBJ形式で入力する 正確な数値を指定するのが楽! テキストエディタはプログラマにとっては楽チン! これだ!

Slide 13

Slide 13 text

プログラマには、 使い慣れた テキストエディタという 最強のツールがあるではないか!

Slide 14

Slide 14 text

手軽にメッシュを作る方法 • 昔からよく使われているOBJ形式でモデルデータを作成 • 左のテキストをテキストエディタで入力するだけで、□の 字のメッシュが作成可能! • テニスコートのような値が正確に決まっているものは、数 値入力のためGUIで入れるより楽 つまり… • OBJ形式を手書きすれば、テキストエディタが3Dモデル作 成ツールになる! でも… • 円や多角形の座標はちょっと面倒 • UVの計算が面倒 v 10 0 15 v 10 0 11.885 v -10 0 11.885 v -10 0 15 v 10 0 -11.885 v 10 0 -15 v -10 0 -15 v -10 0 -11.885 v 10 0 11.885 v 10 0 -11.885 v 5.485 0 -11.885 v 5.485 0 11.885 v -5.485 0 11.885 v -5.485 0 -11.885 v -10 0 -11.885 v -10 0 11.885 g TennisFloor f 1 2 3 4 f 5 6 7 8 f 9 10 11 12 f 13 14 15 16 TennisFloor.obj =

Slide 15

Slide 15 text

う〜ん

Slide 16

Slide 16 text

モデルデータ生成ツールを UNITYで作っちゃいました インスペクタで、頂点データを 入力すると、メッシュを生成す るツールを作成しました。 UV座標や法線の生成も行えます。 プリミティブは、三角形、四角 形、円、多角形(ポリゴン)です。 平面メッシュの場合、X-Y平面 とX-Z平面を選択できるため、 回転する必要がなくなります。 ボールの影など、Staticにできな いメッシュは回転が無いと速度 的に有利です。 OBJ形式で出力するため、Unity がインポートする際にメッシュ をよしなに最適化してくれます。

Slide 17

Slide 17 text

テニスネットの例です • テニスネットも作成しました • テクスチャも貼れています • テニスネットは中央が低いた め、台形を2つ合わせた形を しています。そのため、 UnityのQuadを組み合わせて も作成できません • このネットのドローコールは 1です!

Slide 18

Slide 18 text

まとめ • 高速化のためには、ちょっとしたメッシュの加工や生成が有効 • 単純なメッシュを作成するのに高機能なモデリングソフトを使うのは もったいない • 四角形ぐらいならOBJ形式を手書きでもいける • 今回作成したようなOBJ形式生成ツールは簡単なプログラムだけど有効 に使えた • 車輪の再発明は楽しい! ありがとうございました!

Slide 19

Slide 19 text

CYBER TENNIS Oculus Goにて絶賛発売中! 公式サポートページ: https://www.facebook.com/cybertennis.team/ 御連絡先: 有限会社テクニカルアーツ 池田 (godai@techarts.cojp) ご静聴ありがとうございました