STYLYのマルチプラットフォーム対応を支える仕組み

STYLYのマルチプラットフォーム対応を支える仕組み Psychic VR Lab 2022/09/16 CA.Unity #5

自己紹介 名前：KENTO 所属：Psychic VR Lab Twitter：kento_xr 2022/09/16 CA.Unity #5

アジェンダ • STYLYとは？ • STYLYのプロジェクト構成の工夫 2022/09/16 CA.Unity #5

STYLYとは？ SaaS型クラウドXRコンテンツ制作・配信環境 多様なクリエイティブツールのデータ を取り込み可能 2022/09/16 CA.Unity #5 ソフトウェアのインストール不要 ブラウザ上で動作 クラウド経由で 複数のプラットフォームに配 信可能

どういう仕組みで作っているのか 想像しながらご視聴ください 2022/09/16 CA.Unity #5

データの取り込み / 制作ツール SaaS型クラウドXRコンテンツ制作・配信環境 多様なクリエイティブツールのデータ を取り込み可能 2022/09/16 CA.Unity #5 ソフトウェアのインストール不要 ブラウザ上で動作 クラウド経由で 複数のプラットフォームに配 信可能

STYLY Studio Web ブラウザで XR コンテンツを作成することができるツール 3D MODELS Unity Others 2022/09/16 CA.Unity #5 Scene / Prefab アップロード PlayMaker サポート STYLY Interaction SDK 4DViews PNG JPEG GIF MP3

要望 ただデータを取り込むだけはなく データにロジックを持たせたい！ 2022/09/16 CA.Unity #5

取り込む前にデータにロジックを仕込む仕組みが必要 多様なクリエイティブツールの データを取り込み可能 2022/09/16 CA.Unity #5 ソフトウェアのインストール不要 ブラウザ上で動作 クラウド経由で 複数のプラットフォームに 配信可能

PlayMaker / STYLY Plugin for Unity ノードベースでロジックが組めるアセットに対応 STYLY Plugin for Unityを提供 ＋ 2022/09/16 CA.Unity #5 ＋

要望 簡単な動きや見た目の変化を加えたい！ STYLY Pluginでデータを1から作るのは大変... 2022/09/16 CA.Unity #5

STYLY Studio(ブラウザ上)で効果を付与する SaaS型クラウドXRコンテンツ制作・配信環境 多様なクリエイティブツールのデータ を取り込み可能 2022/09/16 CA.Unity #5 ソフトウェアのインストール不要 ブラウザ上で動作 クラウド経由で 複数のプラットフォームに配 信可能

Modifier (モディファイア) STYLY Studio(ブラウザ上)でオブジェクトに効果を付与する Style change （スタイルチェンジ） 2022/09/16 CA.Unity #5 Animation （アニメーション） Interaction （インタラクション）

配信対象について SaaS型クラウドXRコンテンツ制作・配信環境 多様なクリエイティブツールのデータ を取り込み可能 2022/09/16 CA.Unity #5 ソフトウェアのインストール不要 ブラウザ上で動作 クラウド経由で 複数のプラットフォームに配 信可能

対応プラットフォーム / デバイス 10を超えるプラットフォーム / デバイスをサポート VR AR WEB 2022/09/16 CA.Unity #5 OTHERS 15

STYLYのプロジェクト構成 2022/09/16 CA.Unity #5

シーン UGC 2022/09/16 CA.Unity #5

STYLY XML • シーンを構成する情報を記述 • アセットのIDと配置情報 • パラメータ(画像URLなど) • Modifier(モディファイア)の情報 2022/09/16 CA.Unity #5

STYLY Core • STYLY XMLを解釈し、シーンを再構築する • Unityプロジェクトとして独立 2022/09/16 CA.Unity #5

STYLY VR Input • 入力の抽象化レイヤー • Vive Input Utilityベース • 複数デバイス対応 • Unityプロジェクトとして独立 2022/09/16 CA.Unity #5

STYLY VR Input + Core = STYLY VR Input 2022/09/16 CA.Unity #5 STYLY Core

STYLY VR Input + Core = STYLY VR STYLY VR Input 2022/09/16 CA.Unity #5 STYLY Core

STYLY VR 構成図 STYLY VR UI STYLY Core Multiplayer Lib Analytics Lib 他 Asset STYLY VR Input (抽象化レイヤー) Interface Simulator module Steam module OVR module GVR module NR module Pico module 各デバイスの入力モジュール 2022/09/16 CA.Unity #5 WaveVR module

STYLY VR 構成図 STYLY VR UI Multiplayer Lib STYLY Core VRのView側実装 Analytics Lib 他 Asset STYLY VR Input (抽象化レイヤー) Interface Simulator module Steam module OVR module GVR module NR module Pico module 各デバイスの入力モジュール 2022/09/16 CA.Unity #5 WaveVR module

STYLY VR 構成図 STYLY VR UI STYLY Core Multiplayer Lib Analytics Lib 他 Asset STYLY VR Input (抽象化レイヤー) ライブラリのように振る舞う機能群 Interface Simulator module Steam module OVR module GVR module NR module Pico module 各デバイスの入力モジュール 2022/09/16 CA.Unity #5 WaveVR module

STYLY VR 構成図 STYLY VR UI 各デバイスごとの実装を用意 Analytics Multiplayer Lib STYLY Core Lib 他 Asset STYLY VR Input (抽象化レイヤー) Interface Simulator module Steam module OVR module GVR module NR module Pico module 各デバイスの入力モジュール 2022/09/16 CA.Unity #5 WaveVR module

STYLY VR 構成図 STYLY VR UI STYLY Core Multiplayer Lib Analytics Lib 他 Asset STYLY VR Input (抽象化レイヤー) Interface Simulator module Steam module OVR module GVR module NR module Pico module 各デバイスの入力モジュール 2022/09/16 CA.Unity #5 WaveVR module

要望例 • VRのテレポート機能の挙動がおかしいので検証してほしい • 新しいデバイスの操作に対応してほしい 2022/09/16 CA.Unity #5

STYLY VR UI 独立しているので問題の切り分けや 新機能追加がスムーズに！ STYLY Core Multiplayer Lib Analytics Lib 他 Asset STYLY VR Input (抽象化レイヤー) Interface Simulator module Steam module OVR module GVR module NR module Pico module 各デバイスの入力モジュール 2022/09/16 CA.Unity #5 WaveVR module

各ライブラリの導入 / 参照方法 • バッチファイルによる自動化 (移行中) • UPM • submodule 2022/09/16 CA.Unity #5

今説明した部分 Backend サーバー/API 2022/09/16 CA.Unity #5

XXX + 基盤機能 = Mobile UI AR Foundation Web UI 2022/09/16 CA.Unity #5 Multiplayer Lib STYLY Core Analytics Lib

XXX + 基盤機能 = STYLY XXX Mobile UI AR Foundation Web UI 2022/09/16 CA.Unity #5 Multiplayer Lib STYLY Core Analytics Lib

Pluginについて 2022/09/16 CA.Unity #5

STYLY Plugin for Unity • UnityEditorにインポートして使用 • 各PlatformのAsset Bundleへビルド • Prefab / Sceneをアップロード • インタラクションを容易に実現できるスクリプト群 2022/09/16 CA.Unity #5

submoduleとして開発 2022/09/16 CA.Unity #5

submodule 外部のリポジトリを自身のサブディレクトリとして登録し 特定の commit を参照する仕組み 2022/09/16 CA.Unity #5

submodule Origin Origin 特定のコミットを参照 Local Local submodule 2022/09/16 CA.Unity #5

submodule STYLY XXX 開発用リポジトリ Origin Origin STYLY Plugin 開発用リポジトリ Origin Origin 特定のコミットを参照 Local Local Local Local submodule 2022/09/16 CA.Unity #5 submodule submodule

STYLY Plugin for Unity 構成図 STYLY Plugin for Unity STYLY Service (抽象化レイヤー) Interface Mobile Module MR Module VR Module WebEditor Module STYLY XXXのモジュール 2022/09/16 CA.Unity #5 WebPlayer Module Plugin側 (submodule) アプリ側

STYLY Plugin for Unity 構成図 STYLY Plugin for Unity STYLY Service (抽象化レイヤー) Interface Mobile Module MR Module VR Module WebEditor Module WebPlayer Module Plugin側 (submodule) 抽象化レイヤーは具体的な処理は持たない アプリ側 STYLY XXXのモジュール 2022/09/16 CA.Unity #5

STYLY Plugin for Unity 構成図 STYLY Plugin for Unity STYLY Service (抽象化レイヤー) モジュールは具体的な処理を持つ Interface Mobile Module MR Module VR Module WebEditor Module STYLY XXXのモジュール 2022/09/16 CA.Unity #5 WebPlayer Module Plugin側 (submodule) アプリ側

STYLY VR 構成図 STYLY VR UI STYLY Core Multiplayer Lib Analytics Lib 他 Asset STYLY VR Input (抽象化レイヤー) STYLY Service (抽象化レイヤー ) Interface Interface Simulator module Steam module OVR module GVR module NR module 各デバイスの入力モジュール 2022/09/16 CA.Unity #5 STYLY Plugin for Unity (submodule) Pico module WaveVR module VR Module STYLY VRのモジュール

要望例 Pluginの新機能を追加してほしい ただし、Mobile / VR / Web版STYLYにおいて それぞれ異なる振る舞いをしてほしい あと、できるだけ簡単に使えるようにしたい 2022/09/16 CA.Unity #5

STYLY VR 構成図 STYLY VR UI 同じ機能に対して 他 Analytics Mobile / VR / Webそれぞれに向けた Multiplayer Lib STYLY Core Lib 異なる振る舞いを実装可能 Asset STYLY VR Input (抽象化レイヤー) submodule側とアプリ側を STYLY Service (抽象化レイヤー ) 分業することも可能に！ Interface Interface 難しい処理はアプリ側が担うので、 ユーザーの負担が減る！ Simulator module Steam module OVR module GVR module NR module 各デバイスの入力モジュール 2022/09/16 CA.Unity #5 Pico module STYLY Plugin for Unity (submodule) WaveVR module VR Module STYLY VRのモジュール (具体的な処理を持つ )

STYLY VR 構成図 STYLY VR UI STYLY Core Multiplayer Lib Analytics Lib 他 Asset STYLY VR Input (抽象化レイヤー) STYLY Service (抽象化レイヤー ) Interface Interface Simulator module Steam module OVR module GVR module NR module 各デバイスの入力モジュール 2022/09/16 CA.Unity #5 STYLY Plugin for Unity (submodule) Pico module WaveVR module VR Module STYLY VRのモジュール

課題 対応しすぎ問題 【対策】 • CI / CD • テストを書く • 機能のオミット • 採用 2022/09/16 CA.Unity #5

一緒に働いてくれる方募集してます 2022/09/16 CA.Unity #5