$30 off During Our Annual Pro Sale. View Details »

ライブゲームでの3Dアセット構築・アート主導でのアニメーションシーケンス構築

 ライブゲームでの3Dアセット構築・アート主導でのアニメーションシーケンス構築

GREE Tech Conference 2022で発表された資料です。
https://techcon.gree.jp/2022/session/TrackC-3

gree_tech
PRO

October 25, 2022
Tweet

More Decks by gree_tech

Other Decks in Technology

Transcript

  1. REALITY株式会社 ゲーム事業部
     3DCGディレクター/プロダクトアートリーダー
    ライブゲームでの3Dアセット構築
    アート主導でのアニメーションシーケンス構築
    佐藤 祐大

    View Slide

  2. 2021年3月にREALITYに業務委託として参加しテクニカルアート業務を行い、2022
    年1月にREALITYゲーム事業部設立と共に正式に入社、プロダクトアートリーダー
    としてUX・UIから3Dアセットまでゲームで扱うアート素材の仕様構築から管理、実
    装対応を行っている。

    入社前は某ゲームメーカーにてアーケードゲームの制作、直近ではVR/XR系のシ
    ステム開発やバーチャルタレント制作・運営を行っていた。

    REALITY株式会社 ゲーム事業部

    3DCGディレクター/ プロダクトアートリーダー 佐藤 祐大

    ▼やっていること

    3DCG / UI・UX / 演出 の制作 & ディレクション  

    ※インゲームに必要なアートアセット全ての制作や実装、管理


    View Slide

  3. はじめに・・・
    3

    なりたい自分が存在できる仮想世界を身近にするためにも
    一番手軽で世界中に普及しているディバイス=スマホを重視 する
    スマホでメタバースを実現している REALITY の中で
    新しい交流の場である「ライブゲーム」を導入していくためにも
    20年前くらいのゲーム機黎明期のテクニックに再注目し
    また少人数でも制作可能なワークフローの構築を1から行った
    「メタバース」は 手軽である方がいい!
    ※世界のスマホ端末の状況を考えるとこの先5~6年は
     ロースペックでの描画を前提としたアートワークが重要になる

    View Slide

  4. 2・ゲームをアプリ内で表現するための3Dアセット軽量化
    REALITYアプリにゲーム制作をする上での問題点
    頂点カラーシェーダーの活用
    独自 Post Effect の構築
    釣りゲームならではの表現構築
    水面シェーダーの実装 ForwardRenderingでのDepthの対応
    今日のテーマ
    ライブゲームでの3Dアセット構築・
    アート主導でのアニメーションシーケンス構築
    REALITYアプリについて ~基本的なおさらい~
    REALITYの構造=配信者とコラボ参加者、視聴者の3軸
    遅延が無いリアルタイムでの配信とライブゲーム
    1・REALITY ライブゲームとは?
    3・ワークフローについて
    出来るだけアートでゲーム実装するためのワークフロー構築  
    CinemaChine と Timelineでのイベントシーン構築
     ※Timeline拡張機能
    さとう

    View Slide

  5. 5

    REALITY ライブゲームとは?

    View Slide

  6. 6

    ライブゲーム 第一弾  ♯REALITY釣り部
    1・ライブゲームとは?
    REALITY釣り部 Season3
    2022/10/26 (15:00) ~ 2022/11/09
    REALITY 釣り部 Season1
    2022/8/24 ~ 9/7
    REALITY 釣り部 Season2
    2022/9/28 ~ 10/12
    大幅アップデートして毎月リリース!

    View Slide

  7. 7

    ライブゲーム ♯REALITY釣り部 (Season1) 

    View Slide

  8. …そもそも REALITYとは 何?
    なりたい自分になってリアルタイムなコミュニケーションを楽しむ場
    1・ライブゲームとは?
    色々あるけど、コアな部分は
    「ライブ配信」を誰にでも、もっと手軽に!

    View Slide

  9. REALITYアプリ ~基本的なおさらい~
    スマホ1つでなりたい自分になって、
    世界中の人たちへ配信し交流する!





    ャー

    ャー
    世界中の視聴者
    1・ライブゲームとは?
    ←自分
    ←自分

    View Slide

  10. 1・ライブゲームとは?
    REALITYの構造=配信者とコラボ参加者、視聴者の3軸
    視聴者
    配信者
    コラボ参
    加者
    コラボ参
    加者
    コラボ参
    加者
    配信者 = メインプレイヤー 
    コラボ参加者
     配信者と同じ場に参加し=
    共に会話する
     ※同時に最大3人まで
    視聴者
    = 配信者とコラボ参加者の配信を視聴
      コメントやギフトなどで配信に参加する

    View Slide

  11. 1・ライブゲームとは?
    REALITY は「全てリアルタイム」だから可能性が大
    リアルタイムでのコミュニケーション に特化した設計
    配信者、コラボ参加者、視聴者の間に
    描画遅延がほぼ発生しない!
    映像配信ではなく各スマホで描画する
    バーチャルライブ配信アプリ
    一般的な「映像配信」の形
    遅延
    絶妙なタイミングで応援物資(ギフト)投下など
    リアルタイムを生かした形で参加が可能
    入力情報
    同期された
    入力情報
    世界中の視聴者
    遅延なし

    View Slide

  12. 1・ライブゲームとは?
    12

    配信する上でユーザー同士の
    「目的」と  「遊び場」を
    両立させるものがあるともっと良い!
    REALITYアプリ内に
    ちょっとリッチなゲームを作ろう!
    2022年1月にREALITY社内にゲーム事業部が立ち上がる

    View Slide

  13. 13

    背景などの必要なゲームアセットを表現する隙間がほとんどない!
    REALITYの3Dアバター姿で遊べる配信用ゲーム
    = ライブゲーム!
    直面した問題点
    REALITYアプリの根本設計が 割とロースペックなスマホ端末向け
    「アバター4人分の描画」のみを前提として作られている
    1・ライブゲームとは?

    View Slide

  14. 14

    ゲームをアプリ内で表現するための
    3Dアセット軽量化

    View Slide

  15. 2・ゲームをアプリ内で表現するための3Dアセット軽量化
    ・REALITYアプリは Unity2019 ベースで構築されている
      Build-in Rendering Pipeline での描画を採用 (2022/10月 時点でも同様)
     ※URP(Universal Render Pipeline)ではなくシェーダーグラフ等は使えない
    REALITYアプリ内でライブゲームを構築するためのアート的な課題
    まずは現状でも表現できる方法を考えよう!
    ・Unity内の Scene切り替えが出来ず LightSetting、Enviromentが使えない 
    ・ライトマップ、影、ノーマルマップ、などなど全て使えない
    ・アバターのテクスチャがメモリ容量の大部分を占めるため
     3D背景等で必要とするテクスチャはほとんど増やせない
    その他いろいろ問題が沸いて出てくる状態…

    View Slide

  16. 2・ゲームをアプリ内で表現するための3Dアセット軽量化
    出来ない事( LightMap、Enviroment表現、Shadow、LargeTexture)を頂点カラーでカバー
    頂点カラーシェーダーの活用
    20年くらい前のゲーム背景制作テクニックをしっかり活用
    タイリングテクスチャを多用しつつ頂点カラーで表現する絵作り 背景用のライトがなくても空間を表現
    小さいテクスチャのみで
    全体の光の表現を行う

    View Slide

  17. ライトの色情報を与える頂点カラーシェーダーで
    時間の経過をデータ数を増やさずに表現
    2・ゲームをアプリ内で表現するための3Dアセット軽量化
    背景用頂点カラーのシェーダーを4種追加
     ・custom/VertexColor   (ライトの影響あり)
      ・custom/VertexColor_Cutout (ライトの影響あり 透過PNGに対応)
     ・custom/VertexColor_Unlit (ライト効果なし)
      ・custom/VertexColor_Unlit_Cutout  (ライト効果なし 透過PNGに対応)
    頂点カラーシェーダーの実用編
    17

    ・頂点カラーのためポリゴン数は多少増やしても OK
    ・テクスチャは基本タイリング or アトラス化する
    頂点カラーとタイリングTexture
    基本的なことをちゃんとやる!

    View Slide

  18. 2・ゲームをアプリ内で表現するための3Dアセット軽量化
    Buildin Rendering Pipeline でのポストエフェクトは
    そのまま使わず軽量化したものを独自開発
    独自ポストエフェクトの構築
    ポストエフェクトは、
    ・Mobile Bloom
    ・Mobile Bokeh (ボケ)
    のみを導入
    Bokeh に関しては UI上で用いる
    必要な表現だけを選別し それらを軽量化!
    当たり前の事をしっかり動かすところから始める

    View Slide

  19. 2・ゲームをアプリ内で表現するための3Dアセット軽量化
    水面シェーダー の導入 (作りたいのが 釣りゲーム なので必須)
    Directional Light 1つと
    Reflection Probe 1つ
    海底の頂点カラーと
    この水面シェーダーで
    海面を超軽量表現
    水の流れをFlowMap として描画が可能
    頂点カラーにより複数マテリアル表現も可能
    既存であるBuildIn-RP 用の
    水面シェーダーを
    徹底リサーチし1つを選択
    R.A.Mのシェーダーを導入

    View Slide

  20. 2・ゲームをアプリ内で表現するための3Dアセット軽量化
    水面で欠かせない表現 Foam (泡)
    ForwardRenderingでのDepthTextureの対応
    Differed -> Forward に変更するとG-Bufferが使えず
    Foam が表現できない。
    そのためにcameraに Depth Texture を作成するフラグ
    を立てるスクリプトを書きDifferedと同様にForwardでも
    Foamの表現を可能にする。
    DepthTexture を利用した Foam の表現の有無 
    水際のFoam(泡)の表現にDepthTextureが必要。
    DifferedではノーペナルティでDepthTextureが作成可
    能だが、ローエンドのAndroid端末やiOSでの描画不具
    合回避のため Forward に変える必要がある。
    既存のアセットを最大限活用
    必要に応じたカスタマイズ

    View Slide

  21. 21

    ゲーム事業部が立ち上がったばかりで人員不足
    アートチームにUnityの知見が乏しいメンバーが多い
    ワークフローの徹底的な効率化で「作れる体制」へ!
    REALITYアプリ内でゲームの表現が可能な答えが整う
    直面した問題点

    View Slide

  22. 22

    ワークフローについて

    View Slide

  23. 3・ワークフローについて
    23

    ゲームを形にするために目指したワークフローの概要
    •UIプレハブ&アンカリング設定までArtが対応 ※更新があってもエンジニアの手が入らない
    •追加した素材にロジックが必要ならエンジニア作業
    UI / UX
    UI / 2Dエフェクト / アニメーション
    •Spriteベース、uGUI/Imageベースで分けて専門のArtが担当 ※役割を明確化
    •動的にImageやInformationを変える所はエンジニア作業
    3D / 演出
    •ほとんどの演出をUnityのTimelineで構築 ※参考用アニメーションからUnityで作る
    •演出中のゲームシーケンス制御、TrackのBinding などエンジニア作業
    アート側がしっかりUnityをラーニングしてエンジニアの工数を軽減させる

    View Slide

  24. 3・ワークフローについて
    出来上がったワークフロー
    システム / 機能実装
    エンジニア
    ラフレイアウトのプレハブ
    を元にゲーム遷移、シー
    ケンスを実装
    UX/UI
    企画内容の確認と
    それに伴う画面構成
    UIの大ラフをまとめて
    制作物量を計算する
    アート / PM
    仕様決め
    ラフレイアウト
    Unity上でUIラフをアート
    が実装
    プレハブ構築やアンカー
    設定等を行う 
    アート
    Unity
    本デザイン
    アート
    エンジニアがゲームとし
    てつなげたラフレイアウト
    のプレハブを本デザイン
    に作りこむ
    Unity作業
    Unity
    実装調整
    アート/エンジニア
    最終的なゲームの形に
    なった後、あらためて
    UI/UXを確認しUnity上
    で調整する
    2D/3D/Effect
    企画内容に伴う2D、
    3D、演出回りのアートア
    セット物量を計算。サン
    プル制作し負荷計算も行

    アート / PM
    仕様決め
    各種アセット制作
    制作
    ※内部、外部
    アート
    Maya,3DsMax
    MotionBuilder PS
    GAME PROJECT / UNITY
    制作フロー
    Unity実装
    2D/3D演出等のアニメー
    ションはUnityに直に作
    成する。
    3Dアセットはアートが実
    装、Animator等も設定
    する
    Unity
    アート
    Timeline実装
    カメラ設定
    各演出のプレハブやオブ
    ジェクトのアクティブ制
    御、カメラモーションなど
    をTrackで設定する
    アート
    Unity
    システム / 機能実装
    実装されたアセットを動
    的に変更する場合など、
    エンジニアが対応を行う
    エンジニア

    View Slide

  25. 3・ワークフローについて
    25

    Cinemachine と Timelineでのイベントシーン構築
    今回の釣りのゲームは特に「シーン」の連続
    Timelineの構築でイベント回りを対応させるためTimeline拡張にフォーカスする
    通常の釣果の演出もTimeline制御
    タイミングなどの細かい調整は
    すべてアート側で担う。
    カメラの挙動は Cinemachine の
    Virtual Cameraで制御 ・トラックごとのBinding は動的に対応するスクリプトを用意
     アバター入れ替えやレアリティでの演出表現の切り替えなど
    ・Timeline上のループやジャンプマーカーの拡張も行う 

    View Slide

  26. 3・ワークフローについて
    26

    ゲーム内の賑やかし演出はすべてアートのみで完結
    UFO出現
    ゲーム内の賑やかしはTimelineで構
    築し、そのTimelineにスクリプトをア
    タッチしInspector上で必要項目を設
    定することで演出のシーケンス制御が
    アート側で対応できるようにしている。
    Timeline制御スクリプト
    アートだけで
    賑やかし演出は完結!
    ※エンジニア対応は一切不要
    アートが自由に追加OK!
    カモメのスズキさん (マスコットキャラ)の出現

    View Slide

  27. 3・ワークフローについて
    1. ゲーム開始時に作成した演出(Timeline)のリストを取得
    2. ゲーム実行中に指定した条件に一致するものを
    ホストが判定
    3. 一致するものがあったらホスト(配信者)で実行し
    実行イベントの通知を全員に送る
    4. 画面上で同じ演出が全員にいく
    5. 画面遷移などゲーム内の重要なイベント中は
    賑やかしを止める
    ゲーム内の賑やかし演出の仕組み:仕様詳細
    27

    演出
    ゲーム
    再開

    View Slide

  28. 3・ワークフローについて
    1・そのエリアのどこの場所で発生するのか?
    2・昼・夕方・夜のどのシーンで発生するのか?
    3・発生する確率・抽選間隔の秒数は?
    28

    ゲーム内の賑やかし演出の仕組み:条件1

    View Slide

  29. 3・ワークフローについて
    カモメのスズキさん(釣り部マスコットキャラ)は
    演出として数パターンあるが、
    画面上には一羽しか出てこないようにする。
    ※メモ欄をつけて実装チェック時に他のアートメンバーが確認できる!
    29

    ゲーム内の賑やかし演出の仕組み:条件2
    4・同時に発生させたくない演出は何か?
    アート側の工数だけで演出の組み込みは完了!

    View Slide

  30. 30

    REALITYライブゲームを
    短いスパンで世に届けることが出来る!
    アートチームでのワークフローの効率化で
    ゲームがより短期間で形になる!
    様々な試作を行いユーザーの反応を調査し
    皆に喜ばれるサービスを提供できる!

    View Slide

  31. 31

    まとめ
    REALITY は メタバースを身近にする!
    世界中の多くの人々に仮想世界の体験を届けることが何よりも大事
    ロースペックなスマホでもしっかり表現できるように技術を応用する
    ユーザーが楽しめる遊び場を広げることで
    もっと仮想世界の価値を高めユーザーが収益化できるように!
    だからこそ  ライブゲーム!
    絵に描いた餅ではダメ!
    今後の展開にご期待ください…!

    View Slide

  32. 32

    余談

    View Slide

  33. 33

    REALITY ゲーム事業部ではメンバーを募集中です!
    余談・メンバー募集中
    ・2D UI / UX デザイナー 
    • UX構築の実務経験があり、デザインができる
    • Unityへの実装 (プレハブ構築の対応が可能)
    ( SpriteRenderer と uGUI/image を把握し キャンバスを理解しアンカリング設定ができる)
    ▽募集メンバー
    ・3DCG 背景モデラー
    • Maya or 3DsMAXでの背景モデリング、頂点カラーなどの対応
    • Unityの実装 (Unity内でのシェーダー、マテリアル、ライティング設定ができる)
    ・3DCG アバター衣装モデラー (アニメーター)
    • Maya or 3DsMAXでのアバター衣装モデリング、 スケルトン & ウェイト設定
    • Unityの実装 (Unity内でマテリアル設定、Humanoid、Animator、揺れモノの対応ができる)

    View Slide

  34. 34

    余談・メンバー募集中
    1. 仕事、ユーザー、同僚を愛する。
    2. 事業成長にこだわる。
    3. 終わりなき挑戦を楽しむ。
    REALITY Value
    以上にマッチする!という方はぜひ!
    ※応募は REALITY の HPからどうぞ!
     https://reality.inc/jobs/

    View Slide

  35. 35

    ご清聴ありがとうございました

    View Slide