【CEDEC2018】ステージ試作の敷居を下げる「丁度いい3Dモデリング機能」の内製ゲームエンジンへの導入

ステージ試作の敷居を下げる 「丁度いい3Dモデリング機能」の 内製ゲームエンジンへの導入 株式会社カプコン 清水 智広

講演者紹介 • 清水 智広(しみず ともひろ) • 静岡県 掛川市 出身 • 2015年に京都大学 大学院 情報学研究科を卒業 • 同年、株式会社カプコンに入社 • 社内製エンジン「RE ENGINE」のレベルデザイン機能 の開発担当エンジニア page.2

前提 ◼ 受講スキル： 3Dモデリングについての実務経験や基本原理への理解 ◼ 難易度： ２. 辛口(ある程度の経験がある人へ) page.3

そのほか注意事項 ⚫ 写真撮影OK 周囲の方へのご配慮をお願いいたします ⚫ SNS発信OK twitter では ハッシュタグ「#cedec2018」をご利用いただければ幸いです ⚫ 資料は後日 CEDiL にて公開予定 page.4

本講演の内容 ステージ試作の敷居を下げる 「丁度いい3Dモデリング機能」の 内製ゲームエンジンへの導入 page.5

ステージ試作 ◼ ゲームステージのアイディア構想作業 ◼ グレーボックス/プロトタイプと呼称することもある page.6

ステージ試作 ◼ 試作、確認、修正のイテレーションで、本制作に向けた ステージの概形を定める グレーボックス 試作 ステージ 概形決定 修正 確認 ＜本製作＞ 装飾品の追加 イベントの配置 作業量見積り etc... page.7

3Dモデリング ◼ プリミティブ形状を編集して3D形状を作成 ◼ ソフトとしては Maya(Autodesk社) が特に有名 page.8

社内製エンジン「RE ENGINE」の概要 ◼ 2017年1月に「BIOHAZARD 7」をリリース、その後 「DEVIL MAY CRY 5」や「BIOHAZARD RE:2」の開 発にも利用 page.9

導入したモデリング機能紹介 page.10

アジェンダ 1. 機能の方針設定 1. 導入の経緯 2. スコープを絞る 2. 実装機能詳細とデータ構造/アルゴリズム紹介 1. 2. 3. 4. 頂点移動による変形 構造が変化する操作（分割 / 押し出し） 3D集合演算（ブーリアン演算） 大量の壁の効率的な配置 page.11

1. 機能の方針設定 どのような機能を目指すか page.12

1-1. 導入の経緯 解決したかった問題点 page.13

解決したかった問題点 弊社での一般的なゲームステージ製作フロー アイディア 構想 ゲームプレイ で確認 アーティストに 試作依頼 アーティスト に正式依頼 正式に モデリング *.fbx エンジン用に データ出力 モデリング page.14

解決したかった問題点 人やソフトを跨ぐコストがイテレーションを阻害 アイディア 構想 ゲームプレイ で確認 アーティストに 試作依頼 アーティスト に正式依頼 正式に モデリング *.fbx エンジン用に データ出力 モデリング page.15

解決したかった問題点 ゲームエンジン内にモデリング機能を導入 アイディア 構想 アーティスト に正式依頼 ゲームプレイ で確認 エンジン内で モデリング 正式に モデリング ステージ概形 メッシュデータ *.fbx page.16

1-2. スコープを絞る 要望への優先づけ page.17

ゲームデザイナー/アーティストからの要望 ◼ アイディアをゲームプレイで直ぐに確認可能 ◼ Mayaのような機能と操作性 ◼ 学習コストが低くどの職種でも扱える ◼ どんなタイトルにも汎用的に利用可能 ◼ 編集時の早いレスポンス page.18

ゲームデザイナー/アーティストからの要望 ◼ アイディアをゲームプレイで直ぐに確認可能 ◼ Mayaのような機能と操作性 ◼ 学習コストが低くどの職種でも扱える ◼ どんなタイトルにも汎用的に利用可能 ◼ 編集時の早いレスポンス ➢ 二律背反とも思える要望も出てくる ➢ 愚直に実現しようとすると開発コストも重い page.19

スコープを絞る アイディア 構想 ゲームプレイ で確認 エンジン用に データ出力 アーティストに 試作依頼 アーティスト に正式依頼 正式に モデリング モデリング page.20

スコープを絞る 「試作段階のイテレーション高速化」が大目標 アイディア 構想 アーティスト に正式依頼 ゲームプレイ で確認 エンジン内で モデリング 正式に モデリング ステージ概形 メッシュデータ *.fbx page.21

スコープを絞る 「試作段階のイテレーション高速化」が大目標 – – – – – アイディアをゲームプレイで直ぐに確認可能 Mayaのような機能と操作性 学習コストが低くどの職種でも扱える どんなタイトルにも汎用的に利用可能 編集時の早いレスポンス page.22

スコープを絞る 「試作段階のイテレーション高速化」が大目標 ◎ △ ◎ △ 〇 アイディアをゲームプレイで直ぐに確認可能 Mayaのような機能と操作性 学習コストが低くどの職種でも扱える どんなタイトルにも汎用的に利用可能 編集時の早いレスポンス page.23

スコープを絞る 「試作段階のイテレーション高速化」が大目標 ◎ ◎ 〇 △ △ アイディアをゲームプレイで直ぐに確認可能 学習コストが低くどの職種でも扱える 編集時の早いレスポンス どんなタイトルにも汎用的に利用可能 Mayaのような機能と操作性 page.24

「試作段階のイテレーション高速化」に絞る ◎アイディアをゲームプレイで直ぐに確認可能 ◼ コリジョンも形状の見た目に合わせて自動作成 ◼ ゲーム再生中の編集も許容 page.25

「試作段階のイテレーション高速化」に絞る ◎ 学習コストが低くどの職種でも扱える △ Mayaのような機能と操作性 ◼ 実装機能を絞ることで学習/開発コストをおさえる ◼ 直感的な要素選択操作を採用 page.26

「試作段階のイテレーション高速化」に絞る 〇 編集時の早いレスポンス ◼ シンプルなデータ構造と更新フローを意識 ◼ 最適化の必要性は、ひとまず動かしてから考える page.27

「試作段階のイテレーション高速化」に絞る △ どんなタイトルにも汎用的に利用可能 ◼ 建物のような人工物に特化させる ◼ 有機的な自然地形は別の機能で補完 page.28

導入後のユーザーの反応 ◼ 「人やソフトを跨ぐコストが大きく緩和された」 ◼ 「マニュアルの存在を知らないまま簡単に扱うこ とができた」 ◼ 「アーティストに頼まなくてもステージが作れる のでゲームデザインの可能性が広がった」 page.29

2. 実装機能詳細と データ構造/アルゴリズム紹介 page.30

特に強かった機能要望 ◼ 頂点移動による変形 ◼ 構造が変化する操作（分割 / 押し出し） ◼ 3D集合演算（ブーリアン演算） ◼ 大量の壁の効率的な配置 page.31

2-1. 頂点移動による変形 基本データ構造の紹介 page.32

データ構造 ◼ 保存する情報 vertex -Vertex[] -Face[] 6 2 5 1 4 3 0 face page.33

データ構造 ◼ 保存する情報 -Vertex vertex -position:(1,1,0) Vector3 position //位置 -Face Int[] index // 内包頂点の添字、左回り 6 2 3 5 1 4 0 face -index:{2,3,0,1} page.34

形状の作成 全ての Face について index配列 から内包するVertex の position を取得してポリゴンを作成 6 face {6,2,1,5} 2 3 5 1 face {1,0,4,5} 4 0 face {2,3,0,1} page.35

頂点移動による変形 形状の変形を計算するのは、頂点位置に変更があった次の フレームのみ page.36

2-2. 構造が変化する操作 half-edgeデータ構造の導入 page.37

構造が変化する操作 ◼ 分割/押し出し など構造が変化する操作が必須 ◼ これまでのシンプルなデータ構造では実装が煩雑になる page.38

データ構造 ◼ 編集時のみに保持する情報 保存される情報から編集開始時に再構成 6 -Edge Vertex* start // 始点の頂点 Vertex* end // 終点の頂点 -HalfEdge 5 2 1 4 3 0 edge page.39

half-edge データ構造 ◼ 1つの辺に対して、その両側に逆 向きの half-edgeを配置する ◼ 各要素を効率的に参照できるため 広く利用されている [Reference] "Finding the Intersection of Two Convex Polyhedra", Technical Report UIUC, 1977 page.40

half-Edge データ構造 -HalfEdge Vertex* Face* HalfEdge* HalfEdge* start; face; pair; next; page.41

half-Edge データ構造 -HalfEdge Vertex* Face* HalfEdge* HalfEdge* start; face; pair; next; page.42

half-Edge データ構造 ◼ 今回の実装において大きな利点は、隣接面を容易に辿れ ること ◼ 実装の煩雑さを軽減するため、形状におけるすべての辺 は両側に隣接面を持つことが条件 page.43

データ構造 ◼ 編集時に保持する情報を追加 -Face HalfEdge* halfEdge // 含まれている任意のHalfEdge -Edge HalfEdge* left HalfEdge* right // 左側のHalfEdge // 右側のHalfEdge page.44

構造が変化する操作 ◼ 分割: 選択した辺を二等分する垂直な面で、形状全体をスラ イスする (切断平面は任意に設定可能) page.45

分割のアルゴリズム 1, 選択されている辺の left の half-edge を取得 page.46

分割のアルゴリズム 2, next 辿り切断面と交差する half-edge を探索 page.47

分割のアルゴリズム 3, 交点を記録しておく page.48

分割のアルゴリズム 4, pair を取得して同様の操作を続ける page.49

分割のアルゴリズム 4, pairを取得して同様の操作を続ける page.50

分割のアルゴリズム 5, 最初の half-edge に到達したら終了 page.51

分割のアルゴリズム 6, 交点を元に Veretex/Face の追加と index の修正を行う page.52

分割のアルゴリズム 以上で分割の処理が可能 page.53

2-3. 3D集合演算 page.54

3D集合演算（ブーリアン演算） ◼ ある形状で別の形状をくりぬくような処理 (加算形状)-(減算形状) のイメージ page.55

3D集合演算（ブーリアン演算） 2Dでの集合演算のアルゴリズムを3D形状に応用 2D 3D page.56

2D集合演算 0, 「青」で「赤」に穴をあける（A not B） B A [2D Boolean Algorithm Reference] http://www7b.biglobe.ne.jp/~garaku/index.html page.57

• http://www7b.biglobe.ne.jp/~garaku/index.html

2D集合演算 0, 「青」で「赤」に穴をあける（A not B） 赤：加算形状 青：減算形状 B A page.58

2D集合演算 1, 頂点/交点を通るような走査線を引く 走査線 page.59

2D集合演算 2, 区切られた各領域において次の操作を行う a, 線分に方向をつける 加算：時計回り 減算：反時計回り page.60

2D集合演算 2, 区切られた各領域において次の操作を行う b, 左から順番に線分を探索 page.61

2D集合演算 2, 区切られた各領域において次の操作を行う b, 左から順番に線分を探索 上向き線分の直後が 下向き線分だった場合 囲まれた部分を記録 上 下 page.62

2D集合演算 2, 区切られた各領域において次の操作を行う b, 左から順番に線分を探索 上向き線分の直後が 下向き線分だった場合 囲まれた部分を記録 page.63

2D集合演算 2, 区切られた各領域において次の操作を行う b, 左から順番に線分を探索 上向き線分の直後が 下向き線分だった場合 囲まれた部分を記録 上 page.64 下

2D集合演算 2, 区切られた各領域において次の操作を行う b, 左から順番に線分を探索 上向き線分の直後が 下向き線分だった場合 囲まれた部分を記録 page.65

2D集合演算 2, 区切られた各領域において次の操作を行う b, 左から順番に線分を探索 上向き線分の直後が 下向き線分だった場合 囲まれた部分を記録 page.66

2D集合演算 3, 切り出されたすべての三角形/四角形を配列に記録 page.67

2D集合演算 3, 切り出されたすべての三角形/四角形を配列に記録 page.68

3D集合演算への応用 ◼ 加算形状のすべての面に上述の2D集合演算を実行 page.69

3D集合演算への応用 ◼ 3Dの減算形状が加算形状の面とどのように交わってい るのかを計算する必要 page.70

3D集合演算への応用 ◼ 3Dの減算形状が加算形状の面とどのように交わってい るのかを計算する必要 ◼ 3D情報を2Dに落とし込むにはどうする？ B A page.71

3D集合演算への応用 前述した分割のアルゴリズムを利用 page.72

3D集合演算への応用 分割のアルゴリズムを利用 A page.73

3D集合演算への応用 分割のアルゴリズムを利用 A page.74

3D集合演算への応用 ◼ 分割のアルゴリズムを利用 B A page.75

3D集合演算への応用 ◼ 加算形状のすべての面に上述の2D集合演算を実行 page.76

3D集合演算への応用 ◼ ひとまず穴はあけることができた ◼ しかし壁ができていない ◼ 減算形状の各平面でも集合演算を考える必要 page.77

2D集合演算 0, 青が赤に含まれる領域（A and B） B A page.78

2D集合演算 1, 頂点/交点を通る走査線を引く 走査線 page.79

2D集合演算 2, 区切られた各領域において次の操作を行う a, 線分に方向をつける 加算：時計回り 減算：時計回り page.80

2D集合演算 2, 区切られた各領域において次の操作を行う b, 左から順番に線分を探索 上向き線分を+1 下向き線分を-1 として加算していく +2 +1 +1 +2から+1になった区間を 記録する page.81

2D集合演算 2, 区切られた各領域において次の操作を行う b, 左から順番に線分を探索 上向き線分を+1 下向き線分を-1 として加算していく +2 +1 +1 +2から+1になった区間を 記録する page.82

2D集合演算 2, 区切られた各領域において次の操作を行う b, 左から順番に線分を探索 上向き線分を+1 下向き線分を-1 として加算していく +2から+1になった区間を 記録する page.83

2D集合演算 3, 切り出されたすべての三角形/四角形を配列に記録 page.84

2D集合演算 3, 切り出されたすべての三角形/四角形を配列に記録 page.85

3D集合演算 ◼ 同様に上述の操作を全ての面で行う ◼ 減算形状側に壁ができる B page.86

3D集合演算（ブーリアン演算） 以上を組み合わせることで3Dでの集合演算が可能 page.87

3D集合演算（ブーリアン演算） 総当たりで無駄な計算が発生しないように、各形状は AABBでの接触判定でカリングを行う page.88

2-4. 大量の壁の効率的な配置 応用ツール page.89

大量の壁の効率的な配置 ◼ 上面図を基に大量の壁を素早く作成したという要望 壁のレイアウト機能 ブーリアン演算 モデリング機能 page.90

大量の壁の効率的な配置 page.91

おわりに page.92

おわりに ◼ グレーボックスのように高速なイテレーションが必要な 場面では、ツールを跨ぐコストを取り払う効果は大きい ◼ 職種に限らず使用できるモデリング機能は、ゲームデザ インの視野を広げる ◼ スコープを適切に絞ると、エンジニアの開発コスト/ユ ーザーの学習コストの両方を下げることができる page.93

おわりに ◼ シンプルなデータ構造と適切な制約条件の選定が開発コ ストを大きく抑える ◼ half-edgeデータ構造はシンプルで扱いやすく、応用幅 もある page.94

課題と展望 ◼ 利用者からの要望を吸い上げてフィードバック ◼ 大量に配置された際に形状の選択方法で工夫が必要 ◼ プレハブ化やヒエラルキーで管理など、既存の機能を用いて解 決できるものは利用方法をアドバイス ◼ プロシージャルモデリングを併用し表現力強化 ◼ 変更に強いため高速なイテレーションが必要な場面で強い ◼ Houdini(SideFX社)を活かせる場面があるかのリサーチ page.95

質疑応答 page.96

質疑応答 1. 機能の方針設定 1. 導入の経緯 2. スコープを絞る 2. 実装機能詳細とデータ構造/アルゴリズム紹介 1. 2. 3. 4. 頂点移動による変形 構造が変化する操作（分割 / 押し出し） 3D集合演算（ブーリアン演算） 大量の壁の効率的な配置 page.97