Tweet
Tweet

Slide 1

Slide 1 text

『GRANBLUE FANTASY: Relink』 クオリティと物量の両立に挑戦したフェイシャルアニメーション事例 株式会社Cygames コンシューマーデザイナーチーム / 芝 孝次 コンシューマー / 花田 萌美 〜カットシーンからランタイムまで〜

Slide 2

Slide 2 text

2/129 自己紹介 芝 孝次 コンシューマーデザイナーチーム 2018年にCygamesへ合流。 GRANBLUE FANTASY: Relinkにおいてはフェイシャル アニメーションを担当。 花田 萌美 コンシューマー / ゲームエンジニア 2019年にCygamesへ合流。 GRANBLUE FANTASY: Relinkにおいてはフェイシャル をはじめとしたキャラクターのアニメーションシステムなど を担当。

Slide 3

Slide 3 text

3/129 1. グラブルのフェイシャルについて 2. 事例紹介 3. まとめ アジェンダ  フェイシャルリグ  カットシーン制作  ランタイムのフェイシャル処理

Slide 4

Slide 4 text

4/129 グラブルのフェイシャルについて

Slide 5

Slide 5 text

5/129 Relinkの場合～大勢のキャラクター～

Slide 6

Slide 6 text

6/129 Relinkの場合～大量のボイス～

Slide 7

Slide 7 text

7/129 Relinkの場合～大量のボイス～

Slide 8

Slide 8 text

8/129 Relinkの場合～大勢のキャラクター～ 主要キャラクターだけで キャラクターの組み合わせ数分 専用の掛け合いボイス 20人以上 ナルメア！ お姉さんに 任せて！

Slide 9

Slide 9 text

9/129 Relinkの場合～大量のイベント～

Slide 10

Slide 10 text

10/129 Relinkの場合～大量のイベント～ 映画1本分に相当する尺 カットシーン 大量の会話シーン

Slide 11

Slide 11 text

11/129 どうやって量産する？ アセット制作の効率化、 リップシンクなどの自動化は必須 単に量産・自動化するだけでは キャラクターの魅力を十分に表現できない

Slide 12

Slide 12 text

12/129 量産とクオリティの両立のために  効率的なフェイシャルリグの仕組み  カットシーン制作手法 アセット制作の工夫  アセットを最大限に活用するシステムづくり ランタイム処理の工夫

Slide 13

Slide 13 text

13/129 事例紹介

Slide 14

Slide 14 text

14/129 事例紹介 アセット制作の工夫 ランタイム処理の工夫 フェイシャルリグ カットシーン制作 ランタイムのフェイシャル処理

Slide 15

Slide 15 text

15/129 フェイシャルリグ

Slide 16

Slide 16 text

16/129 フェイシャルリグ 表現力 使いやすさ 軽量性のプライオリティ

Slide 17

Slide 17 text

17/129 フェイシャルリグの仕組み 表現力 使いやすさ 軽量性のプライオリティ

Slide 18

Slide 18 text

18/129 表現力 リリンクのフェイシャル表現での目標は 「グラブル」の2Dイラストを3DCGで再現すること

Slide 19

Slide 19 text

19/129 表現力 カットシーン完成形

Slide 20

Slide 20 text

20/129 表現力 ◆ ベースはおよそ90本 口元が細かく調整出来るほか、 輪郭に沿う形で配置 Joint数

Slide 21

Slide 21 text

21/129 パーツ毎の調整機能 表現力 Trans Rotate Scale これらすべてを駆使

Slide 22

Slide 22 text

22/129 表現力 輪郭線を描くような 調整が可能 パーツ毎の 調整機能

Slide 23

Slide 23 text

23/129 表現力 リグの移動量制限は無し

Slide 24

Slide 24 text

24/129 フェイシャルリグ 表現力 使いやすさ 軽量性のプライオリティ

Slide 25

Slide 25 text

25/129 使いやすさ 表現力のための自由度を保持しつつ、 制作スピードを損なわないためのリグ設計をした

Slide 26

Slide 26 text

26/129 使いやすさ アニメーション作成の 手順を事前に考え リグの仕組みを決める

Slide 27

Slide 27 text

27/129  ブレンドシェイプをベースにする  品質のブレの低減  手数の削減  アニメーションのコピーができる  連動部位の制御に工夫を入れる  顎の独立制御  歯の追従率による制御 使いやすさ 使いやすさのために決めたこと

Slide 28

Slide 28 text

28/129 ブレンドシェイプ ベースの利点 使いやすさ 作業者による品質の ブレを少なくできる

Slide 29

Slide 29 text

29/129 ブレンドシェイプの形状の工夫 使いやすさ 手数を減らし、特徴的な表情を作れる 筋肉の動きベース 形状優先

Slide 30

Slide 30 text

30/129 使いやすさ リグを介して アニメーションを コピーし 量産に対応できる ブレンドシェイプ ベースの利点

Slide 31

Slide 31 text

31/129 使いやすさ 顎は口とは完全に 独立させ管理を分けた 顎の独立制御 アニメーションの 重複を防ぐため、 口と顎が連動する リグは用意しない

Slide 32

Slide 32 text

32/129 使いやすさ 正面では顎は 動かさず側面では 動くように調整が 可能 顎の独立制御 個別管理できる仕組み で繊細な表現を可能に

Slide 33

Slide 33 text

33/129 使いやすさ 歯の追従率による 制御 Y軸とZ軸の2軸を ウェイト値にまとめた 唇に追従する 制御にし、操作を 簡易化

Slide 34

Slide 34 text

34/129 使いやすさ 3次元的に管理する 必要がなくなるので、 作業スピードが向上 歯の追従率による 制御

Slide 35

Slide 35 text

35/129 フェイシャルリグ 表現力 使いやすさ 軽量性のプライオリティ

Slide 36

Slide 36 text

36/129 軽量性のプライオリティ 複数配置すると重くなるデメリットがあるものの、今回は機能性を優先  作業はLiveLink (リアルタイム編集) を想定

Slide 37

Slide 37 text

37/129 軽量性のプライオリティ 作業画面

Slide 38

Slide 38 text

38/129 フェイシャルリグの仕組み 表現力 使いやすさ 軽量性のプライオリティ 目標を明確にし、そのためのjointと機能を最大限用意した 後工程を考慮し、表現力・効率化を両立させた 機能性を優先し、優先順位を下げた

Slide 39

Slide 39 text

39/129 カットシーン制作

Slide 40

Slide 40 text

40/129 カットシーン制作 フェイシャルキャプチャー 演技と絵作りのレイヤー運用 主人公間のアニメーション移植

Slide 41

Slide 41 text

41/129 カットシーン制作 フェイシャルキャプチャー 演技と絵作りのレイヤー運用 主人公間のアニメーション移植

Slide 42

Slide 42 text

42/129 フェイシャルキャプチャー MocapXを使用  iPhoneで収録可能  リアルタイムでリグの 挙動が確認できる  自席で収録できるので手軽

Slide 43

Slide 43 text

43/129 フェイシャルキャプチャー 各キャラクター毎に繋ぐ セットアップについて 一般的なセットアップ

Slide 44

Slide 44 text

44/129 素体リグからアニメーションを移植 フェイシャルキャプチャー セットアップについて リリンクのセットアップ

Slide 45

Slide 45 text

45/129 フェイシャルキャプチャー 素体リグとは  必要最低限の機能  軽さ重視  演技のタイミングと、 縦横の動きが拾えればよい セットアップについて

Slide 46

Slide 46 text

46/129 カットシーン制作 フェイシャルキャプチャー 演技と絵作りのレイヤー運用 主人公間のアニメーション移植

Slide 47

Slide 47 text

47/129 演技と絵作りのレイヤー運用 演技と絵作りを分けてデータ作成することで、 調整時の競合を防ぐ  下地にキャプチャーの動きを流す  絵作りはレイヤーを使用して、キャプチャー データの上から調整

Slide 48

Slide 48 text

48/129 演技と絵作りのレイヤー運用 キャプチャーを リグに流した状態 最後まで このデータ状態は保つ

Slide 49

Slide 49 text

49/129 演技と絵作りのレイヤー運用 修正の場合でも、演技 には影響がないので 気兼ねなく調整できる ポイントになる 表情に注力して ポーズ修正

Slide 50

Slide 50 text

50/129 カットシーン制作 フェイシャルキャプチャー 演技と絵作りのレイヤー運用 主人公間のアニメーション移植

Slide 51

Slide 51 text

51/129 主人公の性別はカットシーンに反映されるが、 ブレンドシェイプで形状の共通化を行っているため対応負荷を軽減できた

Slide 52

Slide 52 text

52/129 主人公間のアニメーション移植 OK  グランのカットシーンを作成し、ジータへ移植

Slide 53

Slide 53 text

53/129 主人公間のアニメーション移植 OK  グランのカットシーンを作成し、ジータへ移植

Slide 54

Slide 54 text

54/129 主人公間のアニメーション移植 完成

Slide 55

Slide 55 text

55/129 カットシーン制作手法 フェイシャルキャプチャー 演技と絵作りのレイヤー運用 主人公間のアニメーション移植 MocapXと素体リグで演技を素早く収録出来た レイヤーで分けることで絵作りに集中できた 形状の共通化とレイヤーの運用により、対応が軽微に

Slide 56

Slide 56 text

56/129 ランタイムのフェイシャル処理

Slide 57

Slide 57 text

57/129 ランタイムのフェイシャル処理 会話シーン 自動顔変形システム 奥義・クエスト勝利演出

Slide 58

Slide 58 text

58/129 ランタイムのフェイシャル処理 会話シーン 自動顔変形システム 奥義・クエスト勝利演出

Slide 59

Slide 59 text

59/129 会話シーン

Slide 60

Slide 60 text

60/129 会話シーン 膨大な物量  イベント自体の数も、ボイス量も多い  日本語／英語ボイスの対応が必要 ユーザー操作の影響  ボタンスキップできる  ボタン送りを待つ間がある 特徴

Slide 61

Slide 61 text

61/129 会話シーン ランタイムシステムによる対応が必須 まばたき サッカード リップシンク 特徴

Slide 62

Slide 62 text

62/129 まばたき 通常 驚き 通常 笑顔 再生中の表情に応じたまばたきの モーションをランダム間隔で再生 驚き顔用の まばたきモーション 笑顔用の まばたきモーション 基本の仕組み

Slide 63

Slide 63 text

63/129 まばたき 通常 驚き 通常 笑顔 表情が変わるタイミングで まばたきすると演技を阻害してしまう  眉がピクついてしまう  まばたき中に目閉じ演技が始まってしまう よくある問題

Slide 64

Slide 64 text

64/129 まばたき 通常 驚き 通常 笑顔 目元の演技が変わる少し前になったら、 まばたきしないよう、自動でオンオフ オン オフ ランタイムでの対策

Slide 65

Slide 65 text

65/129 サッカード イラスト調のキャラクターは目や瞳の形状が多様 Relinkの目の特徴

Slide 66

Slide 66 text

66/129 サッカード 特に瞳が大きいキャラクターは 実際の人間で起きる動きをさせても 不自然に見えることがあった ランダム＋制約条件で 自然かつパターン感のない動きを目指す Relinkの目の特徴

Slide 67

Slide 67 text

67/129 サッカード 自然に見せるための制約 横の動きを多くする （縦の動きは減らす） 連続で同じ方向に 動かさない 連続移動するときは 移動量を小さくする 〇 × 〇 × ① ② ① ② 〇 × ② ①

Slide 68

Slide 68 text

68/129 サッカード 横の動きを多くする （縦の動きは減らす） 〇 × 連続移動するときは 移動量を小さくする 連続で同じ方向に 動かさない 〇 × ① ② ① ② ① ② 〇 × ② ① 自然に見せるための制約

Slide 69

Slide 69 text

69/129 サッカード 横の動きを多くする （縦の動きは減らす） 連続移動するときは 移動量を小さくする 連続で同じ方向に 動かさない 〇 × 〇 × ① ② ① ② 〇 × ② ① 自然に見せるための制約

Slide 70

Slide 70 text

70/129 サッカード 横の動きを多くする （縦の動きは減らす） 連続移動するときは 移動量を小さくする 連続で同じ方向に 動かさない 〇 × 〇 × ① ② ① ② 〇 × ② ① 自然に見せるための制約

Slide 71

Slide 71 text

71/129

Slide 72

Slide 72 text

72/129 リップシンク カットシーン以外はすべて 自動リップシンク CRIWARE ADX LipSyncによる 音声解析データを利用 解析で得たデータをランタイムで駆使

Slide 73

Slide 73 text

73/129 リップシンク 事前処理 音声データ解析 母音＋閉じ口の 各ウェイトを取得 ランタイム処理 モーションブレンド再生 各母音の 口形状モーション作成 基本の仕組み

Slide 74

Slide 74 text

74/129 リップシンク ボイスデータは前後に無音の部分を含む ボイス再生 無音 実際の発声部分 無音 前後のモーションとの接続処理

Slide 75

Slide 75 text

75/129 リップシンク そのままリップシンクさせると、 話し始め、終わりで真顔の閉じ口が発生 無音 実際の発声部分 無音 驚き 閉じ口 口パク 閉じ口 笑顔 前後のモーションとの接続処理 驚き 笑顔

Slide 76

Slide 76 text

76/129 リップシンク リップシンクの解析データから無音部分 を検出し、前後のモーションと接続 驚き 口パク 笑顔 前後のモーションとの接続処理 驚き 笑顔 無音 実際の発声部分 無音

Slide 77

Slide 77 text

77/129 リップシンク 無音 実際の発声部分 無音 驚き 口パク 笑顔 ボイスの発声部分に差し掛かったら リップシンクによる口パクを開始 話し始め部分の接続処理

Slide 78

Slide 78 text

78/129 リップシンク ボイス終わりの無音部分に入る0.2秒前になったら タイムライン指定のモーションを補間ありで再生 驚き 口パク 笑顔 無音 実際の発声部分 無音 話し終わり部分の接続処理

Slide 79

Slide 79 text

79/129

Slide 80

Slide 80 text

80/129 会話シーンまとめ タイムラインの情報や、 リップシンク解析データを活用し、 未来を予測した自然な演技を実現 ユーザー操作による変化、物量を ランタイムシステムでカバー

Slide 81

Slide 81 text

81/129 ランタイムのフェイシャル処理 会話シーン 自動顔変形システム 奥義・クエスト勝利演出

Slide 82

Slide 82 text

82/129

Slide 83

Slide 83 text

83/129 ３Dモデルの宿命

Slide 84

Slide 84 text

84/129

Slide 85

Slide 85 text

85/129

Slide 86

Slide 86 text

86/129 自動顔変形

Slide 87

Slide 87 text

87/129 自動顔変形 リアルタイムで自由に動くカメラに対し、 常に最適な顔になるよう加算 変形がユーザーにわからないようにする ランタイム処理の要件

Slide 88

Slide 88 text

88/129 自動顔変形 常に最適な顔になるよう加算 変形がユーザーにわからないようにする カメラ角度に対し、 常に最適なモーションとウェイトを設定 ウェイトが必ず連続変化する ランタイム処理の要件

Slide 89

Slide 89 text

89/129 自動顔変形 90° −90° 0° 0° 90° 180° −180° −90° 𝜶𝜶 𝜷𝜷 𝜶𝜶[deg] 𝜷𝜷[deg] 90 −90 180 -180 0 水平方向 鉛直方向 顔に対するカメラの角度の定義 カメラ角度を 二次元平面で表現

Slide 90

Slide 90 text

90/129 自動顔変形 𝛼𝛼[deg] 𝛽𝛽[deg] 90 −90 180 -180 フカン アオリ 左アオリ 右アオリ 右 左 正面 各モーションに応じた 点をプロット カメラ角度との紐づけ を行う モーションマップの作製

Slide 91

Slide 91 text

91/129 自動顔変形 三角形要素を構築 どの要素内にいるかを 見て、要素を構成する 3点のモーションを再生 𝛼𝛼 𝛽𝛽 90 −90 180 -180 左 左アオリ アオリ 右アオリ 正面 右 フカン 再生モーションの決定方法

Slide 92

Slide 92 text

92/129 自動顔変形 𝛼𝛼 𝛽𝛽 90 −90 180 -180 左 左アオリ アオリ 右アオリ 正面 右 フカン 正面 フカン 左 正面 左 左アオリ 再生モーションの決定方法

Slide 93

Slide 93 text

93/129 自動顔変形 𝛼𝛼 𝛽𝛽 90 −90 180 -180 左 左アオリ アオリ 右アオリ 正面 右 フカン 要素の外側は、 中心と外周の点を 結んだ線で分割 領域を挟む2点の モーションを再生 再生モーションの決定方法

Slide 94

Slide 94 text

94/129 𝛽𝛽 90 −90 180 -180 左 左アオリ アオリ 右アオリ 正面 右 フカン 自動顔変形 再生モーションの決定方法 左 左アオリ フカン 左

Slide 95

Slide 95 text

95/129 自動顔変形 フカン 正面 左 フカンを強く フカンを弱く 対応するモーションの 加算ウェイトは なる ・点に近づくほど大きく ・点から遠ざかるほど小さく ウェイトの条件①

Slide 96

Slide 96 text

96/129 自動顔変形 加算ウェイトの総和が常に1 𝑛𝑛: モーション総数 𝑤𝑤: 加算ウェイト � 𝑖𝑖=0 𝑛𝑛 𝑤𝑤𝑖𝑖 = 1 左図の要素内ならどこでも 𝑤𝑤正面 + 𝑤𝑤フカン + 𝑤𝑤左 = 1 他のモーションのウェイトは０ ウェイトの条件② フカン 正面 左

Slide 97

Slide 97 text

97/129 𝛼𝛼 𝛽𝛽 90 −90 180 -180 左 左アオリ アオリ 右アオリ 正面 右 フカン 自動顔変形 全域ですべてのウェイトが 必ず連続な値を取る カメラがどう動いても、 ウェイトが滑らかに変化する ウェイトの条件③

Slide 98

Slide 98 text

98/129 自動顔変形 対応する点で1、ほかの2点で 0になるように線形補間するのが一番簡単 要素外も線形補間でOK 𝒑𝒑1 0 𝒑𝒑0 𝑤𝑤0 1 𝒑𝒑2 𝒑𝒑0 (𝛼𝛼0 , 𝛽𝛽0 ) 𝒑𝒑1 (𝛼𝛼1 , 𝛽𝛽1 ) 𝒑𝒑2 (𝛼𝛼2 , 𝛽𝛽2 ) 𝒑𝒑1 𝒑𝒑0 1 0 𝑤𝑤1 𝒑𝒑2 𝒑𝒑1 𝒑𝒑2 𝑤𝑤2 𝒑𝒑0 0 1 条件を満たすウェイト分布

Slide 99

Slide 99 text

99/129 自動顔変形 カメラ固定の演出以外すべて 主要キャラクターのほとんどで使用 通常操作（街でも戦闘中でも） 会話シーン フォトモード etc 使用箇所

Slide 100

Slide 100 text

100/129 自動顔変形 実例 ～通常戦闘中の様子～ イラスト特有の口の奥側が 見える表現などを常時実現

Slide 101

Slide 101 text

101/129 自動顔変形

Slide 102

Slide 102 text

102/129 自動顔変形システムまとめ 変形モーションを カメラ角度に応じて常に加算再生 いつどこから見ても映える キャラクターフェイシャルを実現

Slide 103

Slide 103 text

103/129 ランタイムのフェイシャル処理 会話シーン 自動顔変形システム 奥義・クエスト勝利演出

Slide 104

Slide 104 text

104/129

Slide 105

Slide 105 text

105/129 奥義、クエスト勝利演出 始動技ヒット カットイン演出

Slide 106

Slide 106 text

106/129 奥義、クエスト勝利演出 固定カメラ １キャラ60を超えるボイスパターン セリフのランダムタイミング

Slide 107

Slide 107 text

107/129 奥義、クエスト勝利演出 ベース リップシンク 余韻口 データ構成

Slide 108

Slide 108 text

108/129 奥義、クエスト勝利演出 ベースアニメーション

Slide 109

Slide 109 text

109/129 奥義、クエスト勝利演出 リップシンク

Slide 110

Slide 110 text

110/129 奥義、クエスト勝利演出 ベースアニメーション＋リップシンク

Slide 111

Slide 111 text

111/129 奥義、クエスト勝利演出 余韻口

Slide 112

Slide 112 text

112/129 完成形

Slide 113

Slide 113 text

113/129 奥義、クエスト勝利演出 クエスト勝利演出のデータ構成 ベース リップシンク 余韻口

Slide 114

Slide 114 text

114/129

Slide 115

Slide 115 text

115/129 奥義、クエスト勝利演出 左右非対称の口

Slide 116

Slide 116 text

116/129 奥義、クエスト勝利演出 左右非対称の口

Slide 117

Slide 117 text

117/129 奥義、クエスト勝利演出 左右非対称の口

Slide 118

Slide 118 text

118/129

Slide 119

Slide 119 text

119/129 奥義、クエスト勝利演出 メインとなるフェイシャルモーションと 同時にウェイト０で加算再生を開始 メインモーション 余韻口モーション ボイス 余韻口の仕組み

Slide 120

Slide 120 text

120/129 余韻口モーション メインモーション 奥義、クエスト勝利演出 リップシンクの解析データから 喋り終わるタイミングを取得する ボイス 無音 実際の発声部分 無音 余韻口の仕組み

Slide 121

Slide 121 text

121/129 ボイス 無音 実際の発声部分 無音 余韻口モーション メインモーション 奥義、クエスト勝利演出 喋り終わる0.2秒前にさかのぼって待機 余韻口の仕組み

Slide 122

Slide 122 text

122/129 ボイス 無音 実際の発声部分 無音 余韻口モーション メインモーション 奥義、クエスト勝利演出 ウェイトの増加を開始 ここからウェイトを 徐々に増加させていく 余韻口の仕組み

Slide 123

Slide 123 text

123/129 ボイス 無音 実際の発声部分 無音 余韻口モーション メインモーション 奥義、クエスト勝利演出 ここで ウェイト1に なる 余韻口の仕組み 指定秒数かけて加算ウェイトを1にする

Slide 124

Slide 124 text

124/129

Slide 125

Slide 125 text

125/129 奥義、クエスト勝利演出まとめ 組み合わせ可能なアセットを作成し、 ランタイムで状況に合わせて再生 膨大なボイスパターンに対応しつつ、 迫力あるカットインを実現

Slide 126

Slide 126 text

126/129 まとめ

Slide 127

Slide 127 text

127/129 まとめ 絵のクオリティを維持したまま、 膨大な物量とユーザーインタラクトに対応 アセット制作 ランタイム処理  作業フローを考慮したリグ設計  カットシーン制作フローの効率化  ランタイム処理を見こしたアセットづくり  会話シーンのリップシンクやサッカード  フェイシャル表現を向上させる自動顔変形  状況に応じて最適なアセットを組み合わせ

Slide 128

Slide 128 text

128/129 今後の課題 自動顔変形システムの高度化  カメラ角度だけではなく画角も考慮したい  髪型などにも転用していきたい  データ作成が試行錯誤頼りなのを効率化したい インタラクトをより重視した表現  キャラクターが何気ないユーザー操作に いつでも自然に反応してくれる仕組みづくり  より活き活きとした印象になるような表現

Slide 129

Slide 129 text

129/129