Help us understand the problem. What is going on with this article?

Live2DのWebGL版は今週公開

More than 3 years have passed since last update.

WebGL Advent Calendar 2014の15日目の記事になります。

Live2Dとは?

1枚の2Dイラストからぬるぬる動かす技術です。
2Dと3Dの間にある技術のため、2.5Dとも言われています。
unnamed.gif

WebGL-β版は今週公開予定です

遅くなってすいませんが、今週中には公開されます。
以下の内容は、公開に先行した内容となっていますのでご注意下さい。
Live2DのソフトとSDKは無料で使う事ができます。

実際に触ってみたい方は以下のページにアクセスしてみて下さい。
WebGL対応でiPhoneのブラウザでもLive2Dアプリ!

WebGLでLive2Dモデルを表示

1)まずはLive2DのSDKをダウンロード

Live2Dのサイトにいき、CubismSDK(WebGL)をダウンロードしてきます。

2)Webサーバを準備する

今回は簡単にWebサーバが起動できる無料エディタ Bracketsを使います。
DLしたら解凍したSDKフォルダをエディタにドラッグ&ドロップします。  
2014-12-15_16h55_44.png

3)サンプルを起動してみる

sample/simple/simple.htmlを開き、ライブビューボタン押下します。
2014-12-15_16h58_13.png
ブラウザが自動起動され、Live2Dモデルが表示されます。
2014-12-15_17h06_42.png

モーションを再生するようソース修正してみる

sample/simple/Simple.jsを開きます。ソースの流れと修正箇所は以下の通りです。

  1.Live2Dの初期化
  2.WebGLコンテキストの取得
  3.Live2Dモデル(mocファイル)の読み込み
  4.テクスチャファイルの読み込み
  5.モーションファイルの読み込み(修正)
  6.描画処理ループ
    → モーションの再生(修正)

1)モーションファイルを追加する

Live2Dサンプルモデルから初音ミクのLive2Dモデルをダウンロードしてきます。
モーションファイルは他のモデルにも流用する事ができます。
解凍した中からmiku_idle_01.mtnをsample/simple/assets/haru配下におきます。
2014-12-15_17h34_47.png
  

2)simple.htmlを修正する

モーションを再生するにはLive2DFramework.jsが必要になります。

simple.html
<script src="../../lib/live2d.min.js"></script>
<script src="../../framework/Live2DFramework.js"></script>
<script src="src/Simple.js"></script>

3)Simple.jsを修正する

モデル設定にモーションとモーションマネジャー変数、モーションファイルパスを追加します。

Simple.js・・・38行目辺り
var motion = null;     // モーション
var motionMgr = null;  // モーションマネジャー

/**
* Live2D モデル設定。
*/
this.modelDef = {
    "type":"Live2D Model Setting",
    "name":"haru",
    "model":"assets/haru/haru.moc",
    "textures":[
        "assets/haru/haru.1024/texture_00.png",
        "assets/haru/haru.1024/texture_01.png",
        "assets/haru/haru.1024/texture_02.png"
    ],
    "motion":"assets/haru/miku_idle_01.mtn"
};

テクスチャ読込後、モーション読込み追加します。

Simple.js・・・136行目辺り
// モーションのロード
Simple.loadBytes(modelDef.motion, function(buf){
    motion = new Live2DMotion.loadMotion(buf);
});
motionMgr = new L2DMotionManager();

モーションの再生処理を追加します。

Simple.js・・・196行目辺り
// モーションが終了していたらモーションの再生
if(motionMgr.isFinished()){
    motionMgr.startMotion(motion);
}
motionMgr.updateParam(live2DModel);

これで実行するとモーションが再生されます!
もっと知りたい方はLive2D DocumentのWebGLチュートリアルをご覧下さい。

WebGLのソースに触れよう

ソースを読んでいただくとわかりますが、WebGLのソースも含まれています(glとか)

Simple.js・・・183行目辺り
// 表示位置を指定するための行列を定義する
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);
Simple.js・・・230行目辺り
/**
* Image型オブジェクトからテクスチャを生成
*/
Simple.createTexture = function(gl/*WebGLコンテキスト*/, image/*WebGL Image*/)
{
    // テクスチャオブジェクトを作成する
    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);

    return texture;
};

ぜひLive2DのソースとともにWebGLにも触れてみて下さい。
行列やテクスチャ読込みは、3Dプログラミングする際にも役に立ちます。
WebGLの勉強をどこから始めてよいかわからない方は、WebGL開発支援サイトがおススメです!
(私自身もWebGLとGLSLを勉強中です)

明日はchanpuさんですね。よろしくお願いします!

2015/01/04追記
興味があれば3DCG MeetUP #05の発表資料 Live2DxWebGLのススメ もご覧下さい。
captcha.png

2015/02/12追記
ADVが簡単に作れるtyranoScriptのLive2Dプラグイン作りました。
使い方などもcodezineに書いたのでご覧下さい。
二次元イラストがぬるぬる動く! Live2DでWebGLアドベンチャーゲームを作ろう

2016/04/05追記
入門スライドも公開しました → Live2D WebGL SDK入門

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away