SlideShare a Scribd company logo
1 of 53
Live2Dの描画の
裏側の話
2015/03/25 GREE Tech Talk
自己紹介
• 株式会社 Live2D
• 阿曽 直貴
• 広く浅く、ネイティブプラットフォームで書いてます
• Unity、iOS、Android、Flash、3DS、Vita
作ったアプリ
自己紹介 (直近1ヶ月)
• < 勉強会で発表しませんか?
• Unityでゲーム作った経験とかはないしどうしよう
• 「ドローコール」には苦労したし、テーマはドロー
コール削減にしよう
• 開催概要の発表
ドローコール伝説の終わり (20:40 ~)
今日お話する内容
• Live2D for Unity
• ネイティブプラグインによる高速化
• スクリプトから高速にメッシュを描画する
Live2Dの紹介
Live2Dって?
• イラストをそのまま動かす技術
Demo
どんなところで使われてるの?
どうやって使うの?
• Live2D SDK for Unity
• 無料で始められます
• Live2Dスタッフブログにまとめました。
Live2D
モデルデータ
Live2D
ライブラリ
Unityの話に入る前に
技術的には3Dと何が違うのか
• 基本的には3D技術の上に成り立っている
• ポリゴンの描画
• 一般に3Dより描画は速いがメモリ消費は多め
• 高機能なボーンのようなもの > デフォーマ
• 行列ではない頂点変形がメイン
• 半透明が重要
• クリッピングが大変
3Dとの違い1
• 頂点の形状変形が常にある
3Dとの違い2
• 半透明合成が重要
3Dとの違い3
• メッシュでリアルタイムクリッピングが必要
変形する
目からはみ出ないように
マスクしたい
* クリッピングは次期バージョンで対応
3Dとの違い4
• テクスチャのクオリティが必要
適当にPVRTC圧縮すると劣化する。
パーツの境界、半透明の部分で特に著しい
完全透明部分の色情報も必要
それらを踏まえて
• 3D技術の延長ではあるけど、3Dからするとマニ
アックすぎて情報が少ない
• 3D技術で再現できるけど、最適化されてないので
極端に遅かったりする
• 具体的にUnity上で試行錯誤した話
ネイティブプラグインに
よる高速化
注意
• Unity 3.5とかの時代です
• ネイティブプラグインとOpenGLについての話
• 現在とは状況が異なると思います
Live2Dの当時の状況
• 約3年前 (2012年初旬)
• Android,iOSのネイティブなライブラリはある (C++と
Java)
• パフォーマンスについてもすでに作りこんである
• 実際Android2.2やiPhone3GSやPSPくらいでもちゃ
んと動く
Unityへの移植の検討
• C#? 速いの?
• OpenGLもDirectXも使えない? 速いの?
• ネイティブプラグインで今までの資産が動く !
• ネイティブのOpenGLが遅いはずがない !
ネイティブプラグイン + OpenGL
描画終了
描画開始
描画に割り込み
(C++)
C#スクリプト
C#スクリプト
C#スクリプト
必要そうな情報を記憶しておく
//Live2D描画する前に…
//ステンシルテストの状態を記憶して、
last_stencilTest = glIsEnabled(GL_STENCIL_TEST) ;
//デプステストの状態を記憶して、
last_depthTest = glIsEnabled(GL_DEPTH_TEST) ;
//以下長々と同様の処理
元に戻す
//描画をUnityに戻す前に…
//ステンシルテストの状態を復元して、
if(last_stencilTest) glEnable(last_stencilTest)
else glDisable(last_stencilTest) ;
...以下略
状態、バッファ、シェーダプログラム、テクスチャなど
に対して思いつく限り復元する
結果
• 動いた!
• 確かに速いように思える。
• 見かけのドローコールは1 (意味は無い)
でも
• プラットフォームごとに自分で書かないといけない
• デバッグが非常に大変
デバッグが大変
• Unityの管理外なのでプロファイラなどは使えない
• OpenGLの状態を正しく復元しないといけない
• Unityのバージョンアップで動かなくなる
• 内部処理の影響を受けるのでそもそも情報公開さ
れてない可能性有り
ネイティブプラグインは自己責任
エラー! エラー!
え? 自分のせいじゃないし...
描画終了
描画開始
Unityから不可視
C#スクリプト
C#スクリプト
C#スクリプト
まとめ
• 当時としてはチャレンジングなプラグインだった
• 高速だけどメンテナンスが大変
• Android機種依存とかは自力対応しないと…
• ネイティブによりすぎて、Unityの能力を活かしきれ
なかった
スクリプトから高速に
メッシュを描画する
注意
• Unityでゲームを作ったわけではないので、制作の
ほうはわかりません
• GameObjectと関係なく、スクリプトからメッシュを描
画する方法について
C#で書きなおすために調査
Graphics.DrawMesh
公式リファレンスより
Use DrawMesh in situations where you want to draw
large amount of meshes, but don't want the
overhead of creating and managing game objects.
メッシュの数が多くても、ゲームオブジェクトの管理
が楽になる、ということらしい
VisualStudioいわく
Unity5の更新情報
http://japan.unity3d.com/unity/whats-new/unity-5.0
Graphics.DrawMeshNow
• UpdateじゃなくてOnPostRenderで呼ぶ
• MaterialのPassの設定が必要 (普通は0)
public Mesh mesh;
public Material mat;
public void OnPostRender() {
// set first shader pass of the material
mat.SetPass(0);
// draw mesh at the origin
Graphics.DrawMeshNow(mesh, Vector3.zero, Quaternion.identity);
}
結果
テクスチャ1枚
マテリアル一つ
パーツの数だけ
ドローコールが増えてる
ドローコールのための基本事項
• とにかく同じ描画設定で描く
そのために
• マテリアルは最小数にする
• テクスチャもまとめて一枚にする
メッシュは自分でまとめよう
Mesh.CombineMeshes
var combine = new CombineInstance[10];
for (int i = 0; i < combine.Length; i++){
combine[i].mesh =meshes[i];
}
//このメッシュにすべての他のメッシュをまとめる
mesh.CombineMeshes(combine);
結果2
本当に速くなったのか検証
Live2Dキャラクターを11体表示
ドローコール 800超
15FPS以下
ドローコール削減前
本当に速くなったのか検証
キャラクターを同じ数表示
ドローコール 12
30FPS以上
ドローコール削減後
正直思った以上に違う
ただし、純粋な検証ではなく、あくまでLive2D上での比較です。
ドローコール 800以上 ドローコール 12回
パフォーマンスのため
のTips
Tips1. テクスチャアトラス
• テクスチャを一枚にまとめる
• Live2D SDKは次期バージョン(2.1)で対応予定
• Live2Dエディタは対応しないのでアトラス化は別な
ソフトで
Tips2. GCの最適化
1キャラクター描画するときに毎フレーム約40KBメモリ確保していた
Tips2. GCの最適化
• 40KB*60フレーム = 毎秒 2.4MB の消費 !
• Mesh.verticiesをやり取りするときにコピーが発生
• 配列はキャッシュしておく
• newしてないつもりでも、どこかでメモリ確保されうる
Tips3. Array.Reverseが遅かった
大量に使うと遅いことがわかったので、素直に自分で書いた
配列を反転するためにArray.Reverseを使っていた
データ読み込み速度が20%くらいアップ
Tips4 プロファイラに頼らない方法
お手軽に計測できるような簡易クラスを作っておくと便利
まとめ
• Live2D for Unityでどんなことをやっているか
• 2Dだけど、レンダリング技術的には3D技術です
• Unityでの開発は苦労したとはいえ、ネイティブ言
語での開発よりはだいぶ効率的でした
ミドルウェアとして
• Live2Dは現在5言語、10以上のプラットフォーム
• 専門部隊がいるわけではない
• 効率的にやらないといけない
• 特定のプラットフォームに依存しないこと
• 自力で多数のプラットフォームに対応すること
• 普遍的な技術であるために
Live2D Cubism 2.1
• クリッピングの対応
• 便利になったPSDインポート
• 編集効率の向上
Live2D Euclid
http://www.live2d.com/news/euclid_development
ありがとうございました

More Related Content

What's hot

RenderTextureの正しいα値は?
RenderTextureの正しいα値は?RenderTextureの正しいα値は?
RenderTextureの正しいα値は?KLab Inc. / Tech
 
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~エピック・ゲームズ・ジャパン Epic Games Japan
 
C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!TATSUYA HAYAMIZU
 
UniTask入門
UniTask入門UniTask入門
UniTask入門torisoup
 
UE4プログラマー勉強会 in 大阪 -エンジンの内部挙動について
UE4プログラマー勉強会 in 大阪 -エンジンの内部挙動についてUE4プログラマー勉強会 in 大阪 -エンジンの内部挙動について
UE4プログラマー勉強会 in 大阪 -エンジンの内部挙動についてcom044
 
なぜなにリアルタイムレンダリング
なぜなにリアルタイムレンダリングなぜなにリアルタイムレンダリング
なぜなにリアルタイムレンダリングSatoshi Kodaira
 
マテリアルとマテリアルインスタンスの仕組みと問題点の共有 (Epic Games Japan: 篠山範明) #UE4DD
マテリアルとマテリアルインスタンスの仕組みと問題点の共有 (Epic Games Japan: 篠山範明) #UE4DDマテリアルとマテリアルインスタンスの仕組みと問題点の共有 (Epic Games Japan: 篠山範明) #UE4DD
マテリアルとマテリアルインスタンスの仕組みと問題点の共有 (Epic Games Japan: 篠山範明) #UE4DDエピック・ゲームズ・ジャパン Epic Games Japan
 
はじめてのAI~ 愛のあるAIを作ろう
はじめてのAI~ 愛のあるAIを作ろうはじめてのAI~ 愛のあるAIを作ろう
はじめてのAI~ 愛のあるAIを作ろうMasahiko Nakamura
 

What's hot (20)

UE4を用いた人間から狼男への変身表現法の解説
UE4を用いた人間から狼男への変身表現法の解説UE4を用いた人間から狼男への変身表現法の解説
UE4を用いた人間から狼男への変身表現法の解説
 
UE4におけるエフェクトの基本戦略事例 後半
UE4におけるエフェクトの基本戦略事例  後半UE4におけるエフェクトの基本戦略事例  後半
UE4におけるエフェクトの基本戦略事例 後半
 
日本一詳しい人が教えるUE4
日本一詳しい人が教えるUE4日本一詳しい人が教えるUE4
日本一詳しい人が教えるUE4
 
RenderTextureの正しいα値は?
RenderTextureの正しいα値は?RenderTextureの正しいα値は?
RenderTextureの正しいα値は?
 
なぜなにFProperty - 対応方法と改善点 -
なぜなにFProperty - 対応方法と改善点 -なぜなにFProperty - 対応方法と改善点 -
なぜなにFProperty - 対応方法と改善点 -
 
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
 
UE4における大規模背景制作事例 描画特殊表現編
UE4における大規模背景制作事例 描画特殊表現編UE4における大規模背景制作事例 描画特殊表現編
UE4における大規模背景制作事例 描画特殊表現編
 
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
 
C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!
 
猫でも分かるUMG
猫でも分かるUMG猫でも分かるUMG
猫でも分かるUMG
 
UniTask入門
UniTask入門UniTask入門
UniTask入門
 
UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -
UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -
UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -
 
UE4プログラマー勉強会 in 大阪 -エンジンの内部挙動について
UE4プログラマー勉強会 in 大阪 -エンジンの内部挙動についてUE4プログラマー勉強会 in 大阪 -エンジンの内部挙動について
UE4プログラマー勉強会 in 大阪 -エンジンの内部挙動について
 
なぜなにリアルタイムレンダリング
なぜなにリアルタイムレンダリングなぜなにリアルタイムレンダリング
なぜなにリアルタイムレンダリング
 
Fortniteを支える技術
Fortniteを支える技術Fortniteを支える技術
Fortniteを支える技術
 
UE4 Performance and Profiling | Unreal Dev Day Montreal 2017 (日本語訳)
UE4 Performance and Profiling | Unreal Dev Day Montreal 2017 (日本語訳)UE4 Performance and Profiling | Unreal Dev Day Montreal 2017 (日本語訳)
UE4 Performance and Profiling | Unreal Dev Day Montreal 2017 (日本語訳)
 
マテリアルとマテリアルインスタンスの仕組みと問題点の共有 (Epic Games Japan: 篠山範明) #UE4DD
マテリアルとマテリアルインスタンスの仕組みと問題点の共有 (Epic Games Japan: 篠山範明) #UE4DDマテリアルとマテリアルインスタンスの仕組みと問題点の共有 (Epic Games Japan: 篠山範明) #UE4DD
マテリアルとマテリアルインスタンスの仕組みと問題点の共有 (Epic Games Japan: 篠山範明) #UE4DD
 
UE4におけるレベル制作事例
UE4におけるレベル制作事例  UE4におけるレベル制作事例
UE4におけるレベル制作事例
 
はじめてのAI~ 愛のあるAIを作ろう
はじめてのAI~ 愛のあるAIを作ろうはじめてのAI~ 愛のあるAIを作ろう
はじめてのAI~ 愛のあるAIを作ろう
 
Online MultiPlay Game Design
Online MultiPlay Game DesignOnline MultiPlay Game Design
Online MultiPlay Game Design
 

Similar to Live2Dの描画の裏側の話

Unite2014 Live2D x Unity x Kinect 1
Unite2014 Live2D x Unity x Kinect 1Unite2014 Live2D x Unity x Kinect 1
Unite2014 Live2D x Unity x Kinect 1Naoki Aso
 
Live2Dのモデリング~モーションづけ
Live2Dのモデリング~モーションづけLive2Dのモデリング~モーションづけ
Live2Dのモデリング~モーションづけnaotaro0123
 
絵を動かす技術
絵を動かす技術絵を動かす技術
絵を動かす技術MASA_T_O
 
ドメイン駆動設計再入門
ドメイン駆動設計再入門ドメイン駆動設計再入門
ドメイン駆動設計再入門Yukei Wachi
 
Win32 APIをてなずけよう
Win32 APIをてなずけようWin32 APIをてなずけよう
Win32 APIをてなずけようKouji Matsui
 
Live2D Cubism SDK for Unity(ver 3.0)を使った話
Live2D Cubism SDK for Unity(ver 3.0)を使った話Live2D Cubism SDK for Unity(ver 3.0)を使った話
Live2D Cubism SDK for Unity(ver 3.0)を使った話BURAI_VC2008
 
【 #Unity会 】このUnityがすごい2015年版
【 #Unity会 】このUnityがすごい2015年版【 #Unity会 】このUnityがすごい2015年版
【 #Unity会 】このUnityがすごい2015年版ui nyan
 
ソースが書けなくてもAndroidアプリをクリック(GUI)開発したい
ソースが書けなくてもAndroidアプリをクリック(GUI)開発したいソースが書けなくてもAndroidアプリをクリック(GUI)開発したい
ソースが書けなくてもAndroidアプリをクリック(GUI)開発したいYukio Saito
 
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -Kishi Shundo
 
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介Mori Shingo
 
息抜きにUnityであそぼう(3D Game Kit Liteの話)
息抜きにUnityであそぼう(3D Game Kit Liteの話)息抜きにUnityであそぼう(3D Game Kit Liteの話)
息抜きにUnityであそぼう(3D Game Kit Liteの話)Hiromichi Yamada
 
CLT-014_ゲーム開発だけじゃない! Unity で作る UWP アプリ
CLT-014_ゲーム開発だけじゃない! Unity で作る UWP アプリCLT-014_ゲーム開発だけじゃない! Unity で作る UWP アプリ
CLT-014_ゲーム開発だけじゃない! Unity で作る UWP アプリdecode2016
 
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?cfm_art
 
Couchbase x unity
Couchbase x unityCouchbase x unity
Couchbase x unityMakotoItoh
 
Project 15 - Algyan May 2022.pdf
Project 15 - Algyan May 2022.pdfProject 15 - Algyan May 2022.pdf
Project 15 - Algyan May 2022.pdfYasuhiroHanda2
 
東方ゲームAIとその歴史
東方ゲームAIとその歴史東方ゲームAIとその歴史
東方ゲームAIとその歴史ide_an
 
コードに語らせるために
コードに語らせるためにコードに語らせるために
コードに語らせるためにYukei Wachi
 
Unity2DとNewGUIについて
Unity2DとNewGUIについてUnity2DとNewGUIについて
Unity2DとNewGUIについてKeigo Ando
 
Kinect for Windows およびDepthセンサーの動向
Kinect for Windows およびDepthセンサーの動向Kinect for Windows およびDepthセンサーの動向
Kinect for Windows およびDepthセンサーの動向Kaoru NAKAMURA
 

Similar to Live2Dの描画の裏側の話 (20)

Unite2014 Live2D x Unity x Kinect 1
Unite2014 Live2D x Unity x Kinect 1Unite2014 Live2D x Unity x Kinect 1
Unite2014 Live2D x Unity x Kinect 1
 
Live2Dのモデリング~モーションづけ
Live2Dのモデリング~モーションづけLive2Dのモデリング~モーションづけ
Live2Dのモデリング~モーションづけ
 
絵を動かす技術
絵を動かす技術絵を動かす技術
絵を動かす技術
 
ドメイン駆動設計再入門
ドメイン駆動設計再入門ドメイン駆動設計再入門
ドメイン駆動設計再入門
 
Win32 APIをてなずけよう
Win32 APIをてなずけようWin32 APIをてなずけよう
Win32 APIをてなずけよう
 
Live2D Cubism SDK for Unity(ver 3.0)を使った話
Live2D Cubism SDK for Unity(ver 3.0)を使った話Live2D Cubism SDK for Unity(ver 3.0)を使った話
Live2D Cubism SDK for Unity(ver 3.0)を使った話
 
【 #Unity会 】このUnityがすごい2015年版
【 #Unity会 】このUnityがすごい2015年版【 #Unity会 】このUnityがすごい2015年版
【 #Unity会 】このUnityがすごい2015年版
 
ソースが書けなくてもAndroidアプリをクリック(GUI)開発したい
ソースが書けなくてもAndroidアプリをクリック(GUI)開発したいソースが書けなくてもAndroidアプリをクリック(GUI)開発したい
ソースが書けなくてもAndroidアプリをクリック(GUI)開発したい
 
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
組み込み向けC++のやり方を探る - mbedで楽しい組み込みプログラミング -
 
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介
 
WebとIoTとMake
WebとIoTとMakeWebとIoTとMake
WebとIoTとMake
 
息抜きにUnityであそぼう(3D Game Kit Liteの話)
息抜きにUnityであそぼう(3D Game Kit Liteの話)息抜きにUnityであそぼう(3D Game Kit Liteの話)
息抜きにUnityであそぼう(3D Game Kit Liteの話)
 
CLT-014_ゲーム開発だけじゃない! Unity で作る UWP アプリ
CLT-014_ゲーム開発だけじゃない! Unity で作る UWP アプリCLT-014_ゲーム開発だけじゃない! Unity で作る UWP アプリ
CLT-014_ゲーム開発だけじゃない! Unity で作る UWP アプリ
 
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
 
Couchbase x unity
Couchbase x unityCouchbase x unity
Couchbase x unity
 
Project 15 - Algyan May 2022.pdf
Project 15 - Algyan May 2022.pdfProject 15 - Algyan May 2022.pdf
Project 15 - Algyan May 2022.pdf
 
東方ゲームAIとその歴史
東方ゲームAIとその歴史東方ゲームAIとその歴史
東方ゲームAIとその歴史
 
コードに語らせるために
コードに語らせるためにコードに語らせるために
コードに語らせるために
 
Unity2DとNewGUIについて
Unity2DとNewGUIについてUnity2DとNewGUIについて
Unity2DとNewGUIについて
 
Kinect for Windows およびDepthセンサーの動向
Kinect for Windows およびDepthセンサーの動向Kinect for Windows およびDepthセンサーの動向
Kinect for Windows およびDepthセンサーの動向
 

Live2Dの描画の裏側の話

Editor's Notes

  1. 発表に至った経緯
  2. デスクトップマスコット!
  3. 再現実験なので画像はUnity5
  4. 実験結果に自信なし!
  5. 宣伝1
  6. 宣伝2