〜 Live2D&GLSLエフェクト表現 〜
◆はじめにちょっと一言。
元々は30人規模の「軽い感じ」のGLSL勉強会
予定のはずだった・・・。
◆はじめにちょっと一言。
しかも参加者に登壇者レベルのガチ勢ばかりじゃんwww
少しビビってるのでどうか温かい目で聞いて下さいね
◆自己紹介
・Twitter : @naotaro0123（なおたろーとお呼び下さい）
・GLSLスクール1期生（きっと2期もあるはず）
・Live2Dのプログラマー（UnityやWebGL担当、PS4 SDKも少々）
・Live2Dの布教活動してます（Qiitaに技術ブログ）
・blenderなど3DCGも好きで趣味で触ってます！
（シェーダー歴は1年ぐらいです）
◆初めて作ったシェーダー
どらえもんシェーダー
（1年前にここを見てノリで作った）
◆今日話すこと
・Live2Dの概要
・Live2D WebGLの描画
・Live2D＆GLSLでエフェクト
◆Live2Dの概要
Live2Dとは、1枚の原画さえあればキャラクターを
ぬるぬると動かせる技術です！
◆Live2Dの概要
最近はfaceRig&Live2Dが「おっさんが美少女になれるぞー！」と大人気です♪
◆Live2Dの概要
スマートフォンゲームだとコロプラさんのバトルガールでもLive2Dが使われてます！
会場を貸して頂き
ありがとうございます！
◆Live2Dの概要
・色々なプラットフォーム対応してます → WebGL版Demo
WebGL、Unity、OpenGL[Cocos2d-x]、DirectX、PS4、3DSなど
・全てのプラットフォームで同じ形式ファイルが使える
.mocファイル（Live2Dモデル）、.pngファイル（テクスチャファイル）、
.mtnファイル（モーションファイル）、.json（表情ファイルなど）
というのが必要なファイル構成
・全てのプラットフォームでほぼ同じLive2D APIが使える
環境が変わっても同じスキルが使える
◆Live2Dの概要
Live2Dのワークフロー
◆Live2Dの概要
Live2Dの利用規約について
・個人開発の人や売上1000万円未満の事業者も無料で
使えます（このアプリで使いましたという申請も不要）
・Live2Dコア部分(live2d.min.js)はgithubなどで再配布
は禁止してます。
・デモやゲーム公開用には自分が管理するサーバーに
live2dコア部分は置いてOKです！
◆Live2D WebGLの描画
WebGL InspectorでLive2Dの描画順が見えます。
Live2Dはパーツ数分ドローコールが発生します
◆Live2D WebGLの描画
これはLive2Dがパーツごとに透明度のフェードインアウトできるため、パーツごとに描画されています
◆Live2D WebGLの描画
モデリングソフトで見るとこのようになってます。
パーツごとに不透明度が指定できます。
◆Live2D WebGLの描画
パーツごとに不透明度が指定できるAPIはあります。
live2DModel.setPartsOpacity("パーツID", 1.0);
パーツごとの不透明度なので透過するとこのようになる
→ Live2D APIリファレンスはこちら
◆Live2D WebGLの描画
全身を透過したい場合は、フレームバッファを使いましょう。
ただ、少し手間なのでCSS Opacityでやるのもありかと。
ティラノスクリプトの
プラグインはCSS Opacity
でフェードさせてます
→ ティラノスクリプトのLive2Dプラグインはこちら
◆Live2D WebGLの描画
Live2Dの描画モデル数について
WebGLの場合、6体ぐらいまでがベストっぽい
（スマホだとFPSが落ちるので3体ぐらいが良い）
Live2D社のわんころもちサイト
では6体動かしてます。
（スペック低いスマホだと1匹消えたり...）
ちなみに背景の金色はシェーダーで動いてますっ！
フレームバッファ知らなかったので
CANVAS２枚重ね方式です。
◆Live2D＆GLSLでエフェクト
WebGLアドカレでGLSL炎エフェクトネタを書きました。
簡単なので、GLSL初心者はぜひトライしてみて下さい。
◆Live2D＆GLSLでエフェクト
軽く解説するとメタボールを重ねると綺麗な玉ができたり、
p.x += sin(time*2.0)とすると移動できたりします。
以下のリンクからGLSL Editorが開きます
◆Live2D＆GLSLでエフェクト
つまり、p.xやp.yをいじれば好きな位置に描画できる。
コンパイルとか必要なくすぐ確認できるのがWebGLの利点！
void main(){
vec2 drawPos[2];
drawPos[0] = vec2(-0.4, 0.0);
drawPos[1] = vec2( 0.4, 0.0);
vec2 p = (gl_FragCoord.xy * 2.0 - resolution) /
min(resolution.x, resolution.y);
// デフォルト値を保持
vec2 center = p;
// 1つ目の玉
p += drawPos[0];
float l = 0.1 / length(p);
// 2つ目の玉は1度センターにしてから計算
p = center;
p += drawPos[1];
l += 0.1 / length(p);
gl_FragColor = vec4(vec3(l*0.25+l*0.1, l*0.45+l*0.1, l), 1.0);
}◆Live2D＆GLSLでエフェクト
ちなみにLive2D APIで頂点情報が取得できます。
（インデックスバッファも取得できます）
// 描画オブジェクトIDからインデックス取得
var drawIndex = live2DModel.getDrawDataIndex("描画オブジェクトID");
// 頂点位置を取得
var points = live2DModel.getTransformedPoints(drawIndex);
1つ1つの頂点情報X, Yが取得できる。
全ての頂点の最小XY、最大XYからこの
描画オブジェクトの中心座標が求まる
◆Live2D＆GLSLでエフェクト
この炎エフェクトとLive2Dを組み合わせてみました！
◆Live2D＆GLSLでエフェクト
このリンクからDemoが見れます
目パチ時には炎を消してます。
Live2Dでは各パラメータ値を取得できるのでそれで判定してます。
// 左目の開閉値を取得するAPI
live2DModel.getParamFloat("PARAM_EYE_L_OPEN");◆Live2D＆GLSLでエフェクト
実装的なところ
フレームバッファは2枚使っています。
1枚目はLive2Dの描画、2枚目で炎エフェクトを描画しています。
最後にその2枚を加算合成しています。
◆Live2D＆GLSLでエフェクト
実装的なところ
firefoxのシェーダーエディタでみると分かりやすいかと思います。
（firefoxのシェーダーエディタならソースが編集可能）
// smpColor0がLive2D、smpColor1が炎
void main(void){
if(multi_tex){
vec4 smpColor0 = texture2D(texture0, vTextureCoord);
vec4 smpColor1 = texture2D(texture1, vTextureCoord);
gl_FragColor = smpColor0 + smpColor1;
}else{
vec4 smpColor0 = texture2D(texture0, vTextureCoord);
gl_FragColor = vColor * smpColor0;
}
}
プログラム０のフラグメントシェーダー（加算部分）
◆Live2D＆GLSLでエフェクト
ステンシルバッファで部分的モザイク
こちらの記事を参考に
Live2D APIで頂点情報が取れるので、クリッピングマスクした部分に
モザイクかけたりもできます。こちらはフレームバッファ4枚使ってます。
◆Live2D＆GLSLでエフェクト
上手くできてないですが、パーツごとに透明度がかけらるので前髪と後髪だけ
描画しシェーダーかけたりもできます！フレームバッファは5枚使ってます。
ブラー＆加算でパーツを光らせる
ガウシアンブラーで上手く太らなかったので、川瀬式MGF使ってます。
でも上手くできてなくて髪が溶けちゃいました (; >_<)/
◆最後に
・今回の実装は、Live2D内部コアライブラリはいじってません
・フレームバッファとシェーダーを覚えると可能性が広がります！
・Live2Dとシェーダーを使うとよりインタラクティブな物が作れます！
◆告知
3/20に渋谷でモデリング会をやります！
内容はLive2Dやblenderなどのもくもく会です。
毎月定期的に開催していく
予定です。
Live2Dやblender入門教えてほしい人はご参加下さい