描画方式の変更に伴うサンプルの修正点について
はじめに
品質向上のためライブラリの描画方式を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に最適化は不要となります。