main.js

// Live2Dモデルのインスタンス

live2DModel = null; /* Live2DModel型オブジェクト */

// モデルの初期化が完了したら true

var initLive2DCompleted = false;

// モデルのロードが完了したら true

var loadLive2DCompleted = false;

// テクスチャ用イメージオブジェクト

var loadedImages = []; /* Image型の配列 */

// Live2D モデル設定

var 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"

]

};

// アニメーション停止用ID

var requestID;

window.onload = function() {

main();

};

/**

* 最初に実行される関数

*/

function main() {

"use strict";

// Canvas要素の取得・初期化

var canvas = initCanvas("glcanvas");

// WebGLの取得・初期化

var gl = initWebGL(canvas);

// Live2Dの初期化

initLive2D(canvas, gl);

}

/**

* Live2Dの初期化とテクスチャの準備

*/

function initLive2D(canvas, gl) {

"use strict";

// Live2Dの初期化

Live2D.init();

// mocファイルからLive2Dモデルのインスタンスを生成

loadBytes(modelDef.model, function(buf){

live2DModel = Live2DModelWebGL.loadModel(buf);

});

// テクスチャの読み込み

var loadCount = 0;

for(var i = 0; i < modelDef.textures.length; i++){

// 即時関数で i の値を tno に固定する（onerror用）

(function (tno){

loadedImages[tno] = new Image();

loadedImages[tno].src = modelDef.textures[tno];

loadedImages[tno].onload = function(){

if((++loadCount) == modelDef.textures.length) {

loadLive2DCompleted = true; //全て読み終わった

}

}

loadedImages[tno].onerror = function() {

console.error("Failed to load image : " +

modelDef.textures[tno]);

}

})(i);

}

//------------ 描画ループ ------------

(function tick() {

draw(gl); // 1回分描画

var requestAnimationFrame =

window.requestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.msRequestAnimationFrame;

// 一定時間後に自身を呼び出す

requestID = requestAnimationFrame(tick ,canvas);

})();

}

/**

* Canvas要素を取得してイベントを登録

*/

function initCanvas(id/*string*/) {

"use strict";

// canvasオブジェクトを取得

var canvas = document.getElementById(id);

// コンテキストを失ったとき

// https://www.khronos.org/webgl/wiki/HandlingContextLost

canvas.addEventListener("webglcontextlost", function(e) {

console.error("webglcontext lost");

loadLive2DCompleted = false;

initLive2DCompleted = false;

var cancelAnimationFrame =

window.cancelAnimationFrame ||

window.mozCancelAnimationFrame;

cancelAnimationFrame(requestID); //アニメーションを停止

e.preventDefault();

}, false);

// コンテキストが復元されたとき

canvas.addEventListener("webglcontextrestored", function(e){

console.error("webglcontext restored");

var gl = initWebGL(canvas);

initLive2D(canvas, gl);

}, false);

return canvas;

}

/**

* WebGLオブジェクトを取得・初期化

*/

function initWebGL(canvas/*Canvas Object*/) {

"use strict";

// WebGLのコンテキストを取得する

var gl = getWebGLContext(canvas);

if(!gl) {

console.error("Failed to create WebGL context.");

return;

}

// 描画エリアを白でクリア

gl.clearColor( 0.0, 0.0, 0.0, 0.0 );

return gl;

}

/**

* モデルにテクスチャ、マトリクスを割り当てて更新・描画

*/

function draw(gl)

{

"use strict";

// Canvasをクリアする

gl.clear(gl.COLOR_BUFFER_BIT);

if(!live2DModel || !loadLive2DCompleted) {

return; //ロードが完了していないので何もしないで返る

}

// ロード完了後に初回のみ初期化する

if(!initLive2DCompleted) {

initLive2DCompleted = true;

// 画像からWebGLテクスチャを生成し、モデルに登録

for(var i = 0; i < loadedImages.length; i++){

// Image型オブジェクトからテクスチャを生成

var texName = createTexture(gl, loadedImages[i]);

//モデルにテクスチャをセット

live2DModel.setTexture(i, texName);

}

// テクスチャの元画像の参照をクリア

loadedImages = null;

// WebGLのコンテキストをセット

live2DModel.setGL(gl);

// 表示位置を指定するための行列を定義する

// canvasの横幅を-1..1区間に収める

var s = 2.0 / live2DModel.getCanvasWidth();

var matrix4x4 = [s, 0, 0, 0,

0, -s, 0, 0,

0, 0, 1, 0,

-1, 1, 0, 1];

live2DModel.setMatrix(matrix4x4);

}

// Live2Dモデルを更新して描画

live2DModel.update(); // 現在のパラメータに合わせて頂点等を計算

live2DModel.draw(); // 描画

};

/**

* WebGLのコンテキストを取得する

*/

function getWebGLContext(canvas) {

"use strict";

var NAMES = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];

for( var i = 0; i < NAMES.length; i++ ){

try{

var ctx = canvas.getContext(NAMES[i]);

if( ctx ) return ctx;

}

catch(e){

console.error(e);

}

}

return null;

};

/**

* Image型オブジェクトからテクスチャを生成

*/

function createTexture(gl/*WebGL*/, image/*Image*/) {

"use strict";

//テクスチャオブジェクトを作成する

var texture = gl.createTexture();

if(!texture) {

console.error("Failed to generate gl texture name.");

return -1;

}

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); //imageを上下反転

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;

};

/**

* ファイルをバイト配列としてロードする

*/

function loadBytes(path, callback) {

"use strict";

var request = new XMLHttpRequest();

request.open("GET", path, true);

request.responseType = "arraybuffer";

request.onload = function() {

switch(request.status) {

case 200:

callback(request.response);

break;

default:

console.error("Failed to load (" +

request.status + ") : " + path);

break;

}

}

request.send(null);

return request;

};