Cubism SDK‎ > ‎プラットフォーム‎ > ‎WebGL‎ > ‎

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

はじめに

品質向上のためライブラリの描画方式を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に最適化は不要となります。
Comments