GREE Tech Conference 2022で発表された資料です。 https://techcon.gree.jp/2022/session/TrackC-3
REALITY株式会社 ゲーム事業部 3DCGディレクター/プロダクトアートリーダーライブゲームでの3Dアセット構築アート主導でのアニメーションシーケンス構築佐藤 祐大
View Slide
2021年3月にREALITYに業務委託として参加しテクニカルアート業務を行い、2022年1月にREALITYゲーム事業部設立と共に正式に入社、プロダクトアートリーダーとしてUX・UIから３Dアセットまでゲームで扱うアート素材の仕様構築から管理、実装対応を行っている。 入社前は某ゲームメーカーにてアーケードゲームの制作、直近ではVR/XR系のシステム開発やバーチャルタレント制作・運営を行っていた。 REALITY株式会社 ゲーム事業部 ３ＤＣＧディレクター/ プロダクトアートリーダー 佐藤 祐大 ▼やっていること ３ＤＣＧ / UI・UX / 演出 の制作 ＆ ディレクション ※インゲームに必要なアートアセット全ての制作や実装、管理
はじめに・・・3 なりたい自分が存在できる仮想世界を身近にするためにも一番手軽で世界中に普及しているディバイス＝スマホを重視 するスマホでメタバースを実現している REALITY の中で新しい交流の場である「ライブゲーム」を導入していくためにも２０年前くらいのゲーム機黎明期のテクニックに再注目しまた少人数でも制作可能なワークフローの構築を１から行った「メタバース」は 手軽である方がいい！※世界のスマホ端末の状況を考えるとこの先５～６年は ロースペックでの描画を前提としたアートワークが重要になる
２・ゲームをアプリ内で表現するための３Ｄアセット軽量化REALITYアプリにゲーム制作をする上での問題点頂点カラーシェーダーの活用独自 Post Effect の構築釣りゲームならではの表現構築水面シェーダーの実装 ForwardRenderingでのDepthの対応今日のテーマライブゲームでの3Dアセット構築・アート主導でのアニメーションシーケンス構築REALITYアプリについて ～基本的なおさらい～REALITYの構造＝配信者とコラボ参加者、視聴者の３軸遅延が無いリアルタイムでの配信とライブゲーム１・ＲＥＡＬＩＴＹ ライブゲームとは？３・ワークフローについて出来るだけアートでゲーム実装するためのワークフロー構築 CinemaChine と Timelineでのイベントシーン構築 ※Timeline拡張機能さとう
5 ＲＥＡＬＩＴＹ ライブゲームとは？
6 ライブゲーム 第一弾 ♯REALITY釣り部１・ライブゲームとは？REALITY釣り部 Season32022/10/26 (15:00) ～ 2022/11/09REALITY 釣り部 Season12022/8/24 ～ 9/7REALITY 釣り部 Season22022/9/28 ～ 10/12大幅アップデートして毎月リリース！
7 ライブゲーム ♯REALITY釣り部 (Season1)
…そもそも REALITYとは 何？なりたい自分になってリアルタイムなコミュニケーションを楽しむ場１・ライブゲームとは？色々あるけど、コアな部分は「ライブ配信」を誰にでも、もっと手軽に！
REALITYアプリ ～基本的なおさらい～スマホ１つでなりたい自分になって、世界中の人たちへ配信し交流する！ワーワーキャーキャー世界中の視聴者１・ライブゲームとは？←自分←自分
１・ライブゲームとは？REALITYの構造＝配信者とコラボ参加者、視聴者の３軸視聴者配信者コラボ参加者コラボ参加者コラボ参加者配信者 ＝ メインプレイヤー コラボ参加者 配信者と同じ場に参加し＝共に会話する ※同時に最大３人まで視聴者＝ 配信者とコラボ参加者の配信を視聴 コメントやギフトなどで配信に参加する
１・ライブゲームとは？REALITY は「全てリアルタイム」だから可能性が大リアルタイムでのコミュニケーション に特化した設計配信者、コラボ参加者、視聴者の間に描画遅延がほぼ発生しない！映像配信ではなく各スマホで描画するバーチャルライブ配信アプリ一般的な「映像配信」の形遅延絶妙なタイミングで応援物資（ギフト）投下などリアルタイムを生かした形で参加が可能入力情報同期された入力情報世界中の視聴者遅延なし
１・ライブゲームとは？12 配信する上でユーザー同士の「目的」と 「遊び場」を両立させるものがあるともっと良い！REALITYアプリ内にちょっとリッチなゲームを作ろう！２０２２年１月にREALITY社内にゲーム事業部が立ち上がる
13 背景などの必要なゲームアセットを表現する隙間がほとんどない！REALITYの3Dアバター姿で遊べる配信用ゲーム= ライブゲーム！直面した問題点ＲＥＡＬＩＴＹアプリの根本設計が 割とロースペックなスマホ端末向け「アバター４人分の描画」のみを前提として作られている１・ライブゲームとは？
14 ゲームをアプリ内で表現するための３Ｄアセット軽量化
２・ゲームをアプリ内で表現するための３Ｄアセット軽量化・REALITYアプリは Unity2019 ベースで構築されている Build-in Rendering Pipeline での描画を採用 （2022/10月 時点でも同様） ※URP(Universal Render Pipeline)ではなくシェーダーグラフ等は使えないREALITYアプリ内でライブゲームを構築するためのアート的な課題まずは現状でも表現できる方法を考えよう！・Unity内の Scene切り替えが出来ず LightSetting、Enviromentが使えない ・ライトマップ、影、ノーマルマップ、などなど全て使えない・アバターのテクスチャがメモリ容量の大部分を占めるため ３Ｄ背景等で必要とするテクスチャはほとんど増やせないその他いろいろ問題が沸いて出てくる状態…
２・ゲームをアプリ内で表現するための３Ｄアセット軽量化出来ない事（ LightMap、Enviroment表現、Shadow、LargeTexture）を頂点カラーでカバー頂点カラーシェーダーの活用２０年くらい前のゲーム背景制作テクニックをしっかり活用タイリングテクスチャを多用しつつ頂点カラーで表現する絵作り 背景用のライトがなくても空間を表現小さいテクスチャのみで全体の光の表現を行う
ライトの色情報を与える頂点カラーシェーダーで時間の経過をデータ数を増やさずに表現２・ゲームをアプリ内で表現するための３Ｄアセット軽量化背景用頂点カラーのシェーダーを４種追加 ・custom/VertexColor （ライトの影響あり） ・custom/VertexColor_Cutout （ライトの影響あり 透過PNGに対応） ・custom/VertexColor_Unlit （ライト効果なし） ・custom/VertexColor_Unlit_Cutout （ライト効果なし 透過PNGに対応）頂点カラーシェーダーの実用編17 ・頂点カラーのためポリゴン数は多少増やしても OK・テクスチャは基本タイリング or アトラス化する頂点カラーとタイリングTexture基本的なことをちゃんとやる！
２・ゲームをアプリ内で表現するための３Ｄアセット軽量化Buildin Rendering Pipeline でのポストエフェクトはそのまま使わず軽量化したものを独自開発独自ポストエフェクトの構築ポストエフェクトは、・Mobile Bloom・Mobile Bokeh (ボケ)のみを導入Bokeh に関しては UI上で用いる必要な表現だけを選別し それらを軽量化！当たり前の事をしっかり動かすところから始める
２・ゲームをアプリ内で表現するための３Ｄアセット軽量化水面シェーダー の導入 （作りたいのが 釣りゲーム なので必須）Directional Light １つとReflection Probe １つ海底の頂点カラーとこの水面シェーダーで海面を超軽量表現水の流れをFlowMap として描画が可能頂点カラーにより複数マテリアル表現も可能既存であるBuildIn-RP 用の水面シェーダーを徹底リサーチし１つを選択R.A.Mのシェーダーを導入
２・ゲームをアプリ内で表現するための３Ｄアセット軽量化水面で欠かせない表現 Foam (泡)ForwardRenderingでのDepthTextureの対応Differed -> Forward に変更するとG-Bufferが使えずFoam が表現できない。そのためにcameraに Depth Texture を作成するフラグを立てるスクリプトを書きDifferedと同様にForwardでもFoamの表現を可能にする。DepthTexture を利用した Foam の表現の有無 水際のFoam（泡）の表現にDepthTextureが必要。DifferedではノーペナルティでDepthTextureが作成可能だが、ローエンドのAndroid端末やiOSでの描画不具合回避のため Forward に変える必要がある。既存のアセットを最大限活用必要に応じたカスタマイズ
21 ゲーム事業部が立ち上がったばかりで人員不足アートチームにUnityの知見が乏しいメンバーが多いワークフローの徹底的な効率化で「作れる体制」へ！REALITYアプリ内でゲームの表現が可能な答えが整う直面した問題点
22 ワークフローについて
３・ワークフローについて23 ゲームを形にするために目指したワークフローの概要•UIプレハブ&アンカリング設定までArtが対応 ※更新があってもエンジニアの手が入らない•追加した素材にロジックが必要ならエンジニア作業UI / UXUI / 2Dエフェクト / アニメーション•Spriteベース、uGUI/Imageベースで分けて専門のArtが担当 ※役割を明確化•動的にImageやInformationを変える所はエンジニア作業3D / 演出•ほとんどの演出をUnityのTimelineで構築 ※参考用アニメーションからUnityで作る•演出中のゲームシーケンス制御、TrackのBinding などエンジニア作業アート側がしっかりUnityをラーニングしてエンジニアの工数を軽減させる
３・ワークフローについて出来上がったワークフローシステム / 機能実装エンジニアラフレイアウトのプレハブを元にゲーム遷移、シーケンスを実装UX/UI企画内容の確認とそれに伴う画面構成UIの大ラフをまとめて制作物量を計算するアート / PM仕様決めラフレイアウトUnity上でUIラフをアートが実装プレハブ構築やアンカー設定等を行う アートUnity本デザインアートエンジニアがゲームとしてつなげたラフレイアウトのプレハブを本デザインに作りこむUnity作業Unity実装調整アート/エンジニア最終的なゲームの形になった後、あらためてUI/UXを確認しUnity上で調整する2D/3D/Effect企画内容に伴う２D、３D、演出回りのアートアセット物量を計算。サンプル制作し負荷計算も行うアート / PM仕様決め各種アセット制作制作※内部、外部アートMaya,3DsMaxMotionBuilder PSGAME PROJECT / UNITY制作フローUnity実装２D/3D演出等のアニメーションはUnityに直に作成する。３Dアセットはアートが実装、Animator等も設定するUnityアートTimeline実装カメラ設定各演出のプレハブやオブジェクトのアクティブ制御、カメラモーションなどをTrackで設定するアートUnityシステム / 機能実装実装されたアセットを動的に変更する場合など、エンジニアが対応を行うエンジニア
３・ワークフローについて25 Cinemachine と Timelineでのイベントシーン構築今回の釣りのゲームは特に「シーン」の連続Timelineの構築でイベント回りを対応させるためTimeline拡張にフォーカスする通常の釣果の演出もTimeline制御タイミングなどの細かい調整はすべてアート側で担う。カメラの挙動は Cinemachine のVirtual Cameraで制御 ・トラックごとのBinding は動的に対応するスクリプトを用意 アバター入れ替えやレアリティでの演出表現の切り替えなど・Timeline上のループやジャンプマーカーの拡張も行う
３・ワークフローについて26 ゲーム内の賑やかし演出はすべてアートのみで完結UFO出現ゲーム内の賑やかしはTimelineで構築し、そのTimelineにスクリプトをアタッチしInspector上で必要項目を設定することで演出のシーケンス制御がアート側で対応できるようにしている。Timeline制御スクリプトアートだけで賑やかし演出は完結！※エンジニア対応は一切不要アートが自由に追加OK！カモメのスズキさん (マスコットキャラ)の出現
３・ワークフローについて1. ゲーム開始時に作成した演出(Timeline)のリストを取得2. ゲーム実行中に指定した条件に一致するものをホストが判定3. 一致するものがあったらホスト（配信者）で実行し実行イベントの通知を全員に送る4. 画面上で同じ演出が全員にいく5. 画面遷移などゲーム内の重要なイベント中は賑やかしを止めるゲーム内の賑やかし演出の仕組み：仕様詳細27 演出ゲーム再開
３・ワークフローについて１・そのエリアのどこの場所で発生するのか？２・昼・夕方・夜のどのシーンで発生するのか？３・発生する確率・抽選間隔の秒数は？28 ゲーム内の賑やかし演出の仕組み：条件１
３・ワークフローについてカモメのスズキさん（釣り部マスコットキャラ）は演出として数パターンあるが、画面上には一羽しか出てこないようにする。※メモ欄をつけて実装チェック時に他のアートメンバーが確認できる！29 ゲーム内の賑やかし演出の仕組み：条件２４・同時に発生させたくない演出は何か？アート側の工数だけで演出の組み込みは完了！
30 ＲＥＡＬＩＴＹライブゲームを短いスパンで世に届けることが出来る！アートチームでのワークフローの効率化でゲームがより短期間で形になる！様々な試作を行いユーザーの反応を調査し皆に喜ばれるサービスを提供できる！
31 まとめＲＥＡＬＩＴＹ は メタバースを身近にする！世界中の多くの人々に仮想世界の体験を届けることが何よりも大事ロースペックなスマホでもしっかり表現できるように技術を応用するユーザーが楽しめる遊び場を広げることでもっと仮想世界の価値を高めユーザーが収益化できるように！だからこそ ライブゲーム！絵に描いた餅ではダメ！今後の展開にご期待ください…！
32 余談
33 REALITY ゲーム事業部ではメンバーを募集中です！余談・メンバー募集中・２D UI / UX デザイナー • UX構築の実務経験があり、デザインができる• Unityへの実装 （プレハブ構築の対応が可能）（ SpriteRenderer と uGUI/image を把握し キャンバスを理解しアンカリング設定ができる）▽募集メンバー・３DCG 背景モデラー• Maya or 3DsMAXでの背景モデリング、頂点カラーなどの対応• Unityの実装 （Unity内でのシェーダー、マテリアル、ライティング設定ができる）・３DCG アバター衣装モデラー （アニメーター）• Maya or 3DsMAXでのアバター衣装モデリング、 スケルトン ＆ ウェイト設定• Unityの実装 （Unity内でマテリアル設定、Humanoid、Animator、揺れモノの対応ができる）
34 余談・メンバー募集中1. 仕事、ユーザー、同僚を愛する。2. 事業成長にこだわる。3. 終わりなき挑戦を楽しむ。REALITY Value以上にマッチする！という方はぜひ！※応募は REALITY の HPからどうぞ！ https://reality.inc/jobs/
35 ご清聴ありがとうございました
gree_tech
sinsoku
kumamotone
pkshadeck
rilmayer
karamem0
k1low
minorun365
sekido
taichinakamura
cybozuinsideout
iamshunta
yoshiitaka
mongodb
brettharned
rocio
productmarketing
jrom
scottboms
62gerente
lauravandoore
philhawksworth
akosma
bkeepers
swwweet