描画方式の変更に伴うサンプルの修正点について

はじめに

品質向上のためライブラリの描画方式をPremultiplied方式に変更しました。

これに伴い、サンプルコードにも重要な変更を加えました。

ライブラリファイル(live2d.min.js)を差し替えるだけでは正しく動きません。

このページでは、サンプル「simple」を例に、変更箇所をお知らせします。

既にWebGL版SDKをお使いの方は、ライブラリファイルだけでなく、本ページを参考にコードも修正してください。

Step1 「Canvas生成時にPremultipliedをtrueにする」

getContextのパラメータにpremultipliedAlpha:trueを渡す

変更前:201行目~

1

2

3

var param = {

alpha : true,

};

変更後

1

2

3

4

var param = {

alpha : true,

premultipliedAlpha : true

};

Step2 「テクスチャ生成時にUNPACK_PREMULTIPLY_ALPHA_WEBGLをtrueにする」

UNPACK_PREMULTIPLY_ALPHA_WEBGLをtrueにすることでテクスチャをPremultipliedに設定

変更前:227行目~

1

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

変更後:

1

2

gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1); // 追加

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

その他

これまではWebGL版SDKを使用する際、ゴミ取りツールでWebGLに最適化を行う必要がありましたが、

本バージョンからWebGLに最適化は不要となります。