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)




こちらで見れます → WebGL対応でiPhoneのブラウザでもLive2Dアプリ!

Live2DのWebGL版公開!(2/11)


 <WebGL化によるメリット>

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

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


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


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

Live2DのWebGL版公開!(3/11)



現在はβ版として公開しています。
バグなどを見つけたら教えて下さい。
Live2D Documentに WebGLの簡単なチュートリアル
あるので 興味ある人は見てくださいね

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)


WebGLとLive2Dを組み合わせる
リッチな表現もできます!

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コミュニティ

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



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

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


Live2D公式Twitterアカウントまで

Live2D Euclidプロジェクト!



  2Dイラストから3Dを再現するソフト
  1から開発中です!
  来年のLive2Dにご期待下さいっ!

最後に



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

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


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

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

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

    Live2Dで遊んでみる会







ご静聴ありがとう

ございました!

Made with Slides.com