3DCG Meetup #05





〜 Live2D x WebGLのススメ 〜


自己紹介


名前：池和田　直仁
Twitter：@naotaro0123


　　・Live2Dで働いてるプログラマー(7月にLive2Dへ転職)
　　・HTML5、Blender、Unity、UE4を趣味で触ってます

　　・Live2D勉強会とか布教活動もしています


Live2D勉強会


東京、名古屋、大阪、福岡、仙台と開催してきました〜！

来年は1月あたりにAffter Effect会、夏にLive2D Alive予定です

 

今日のメニュー



　　・Live2DのWebGL版公開！


　　・Live2D→WebGL導入の仕方


　　・Live2Dのサポートサイト


　　・Live2D Euclidプロジェクト！

Live2DのWebGL版公開！（1/11)




Live2DのWebGL版公開！（2/11)


 ＜WebGL化によるメリット＞

　・誰でも気軽にWeb公開できる！
　

　・よりインタラクティブなサイトが作れる！


　・FlashやUnityの知識不要です。JavaScriptでOKっ！
　　　→　UnityWebPlayerも必要なし


　・iPhoneやAndroid(WebGL対応ブラウザ)でも見れる！

Live2DのWebGL版公開！（3/11)



現在はβ版として公開しています。
バグなどを見つけたら教えて下さい。
あるので 興味ある人は見てくださいね

Live2DのWebGL版公開！（4/11)


ちなみに・・・・
まだInternet Explorerはやめてね！
テクスチャのつなぎ目部分が上手く表示されない...(; >_<)

Live2DのWebGL版公開！（5/11)



　　　FPSも60近く出てます！
　　　サンプルSDKで確認してみて下さい

Live2DのWebGL版公開！（6/11)



　　プログラムには少しWebGLっぽいコードが含まれています。
　　Live2Dのソースを読むとWebGLの勉強にもなります！

　　Live2Dモデル表示位置を行列で指定
　// 表示位置を指定するための行列を定義する
　var s = 2.0 / live2DModel.getCanvasWidth(); 

　// canvasの横幅を-1..1区間に収める
　var matrix4x4 = [ s,  0,  0,  0,                                   0, -s,  0,  0,                                   0,  0,  1,  0,                                  -1, 1,   0,  1 ];　// 行列を渡し位置を決める
　live2DModel.setMatrix(matrix4x4);

Live2DのWebGL版公開！（7/11)


　　表示する所を少し解説すると・・・
　// 表示位置を指定するための行列を定義する
　var s = 2.0 / live2DModel.getCanvasWidth(); 
　　・getCanvasWidth()でLive2Dモデルの幅サイズを取得(この子の場合は2400px)
　　・-1.0〜1.0なので2.0。等倍サイズで表示するための値です
　　 

Live2DのWebGL版公開！（8/11)


行列部分について
 var matrix4x4 = [
     s,  0,  0,  0, 　←　Xのスケールを指定
     0, -s,  0,  0,　 ←　Yのスケールを指定(-でないと逆さに表示される)      0,  0,  1,  0,　←　Zのスケールを指定     -1,  1,  0,  1  ];
　　Live2Dの座標系は左上を(0, 0)を原点とし、右下が(幅, 高さ)です。
　　　　　　

Live2DのWebGL版公開！（9/11)


　行列部分について
 var matrix4x4 = [
     s,  0,  0,  0, 　　
     0, -s,  0,  0,　　      0,  0,  1,  0,　　     -1,  1,  0,  1 　←　位置の再調整
 ];
　　

Live2DのWebGL版公開！（10/11)


　　テクスチャを表示する時 
　// テクスチャオブジェクトを作成する
　var texture = gl.createTexture();
　if ( !texture ){
　    mylog("Failed to generate gl texture name.");
　    return -1;
　}
　// imageを上下反転
　gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);

　// テクスチャのユニットを指定する
　gl.activeTexture( gl.TEXTURE0 );

　// テクスチャをバインドする
　gl.bindTexture( gl.TEXTURE_2D , texture );

　// テクスチャに画像データを紐付ける
　gl.texImage2D( gl.TEXTURE_2D , 0 , gl.RGBA , gl.RGBA , gl.UNSIGNED_BYTE , image);

　// テクスチャの品質を指定する(対象ピクセルの中心に最も近い点の値)
　gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

　// ミップマップの品質を指定する
　gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

　// ミップマップの生成
　gl.generateMipmap(gl.TEXTURE_2D);

Live2DのWebGL版公開！（11/11)


リッチな表現もできます！

Live2D→WebGL導入の仕方(1/3)


　Live2Dのソフト構成


Live2D→WebGL導入の仕方(2/3)


　Live2Dのワークフロー

Live2D→WebGL導入の仕方(3/3)






DEMO

Live2Dのサポートサイト♪(1/3)


Live2D作品 アップロードサービス「 Live2D Library」
できました！（モデルの販売、WebGL表示は今後対応）
 

Live2Dのサポートサイト♪(2/3)


Live2Dで困ったらこちら！

Live2Dのサポートサイト♪(3/3)



来年はアドベンチャーゲームなど チュートリアルを
充実させる予定です。

要望などあればコミュニティやTwitterで ご意見下さい！


Live2D Euclidプロジェクト！



　　１から開発中です！
　　来年のLive2Dにご期待下さいっ！

最後に



　WebGLは学習コストが高いっ！
　仕事使うようになった時、きっと時間が足りなくて困ります...。
　だから今からコツコツやりましょう！

　WebGLで覚えた3DスキルはUnityやblenderでも
　きっと役に立つはず。


　私自身も3Dプログラミングを勉強中です。
　一緒に3Dと数学に強いエンジニアを目指しましょう！

　　ちなみに明日ユーザーの方が Live2Dの勉強会を 開催してくれる

　　みたいです！ 興味ある方はぜひ参加してみて下さい！








ご静聴ありがとう

ございました！

Live2DxWebgl

By naotaro

Made with Slides.com

Live2DxWebgl

  • 6,248

More from naotaro