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

WebGL SDK 2.0→2.1の変更点

2.1からクリッピングマスク機能がサポートされました。
2.0から2.1の変更点は以下の通りです。


変更点1: 「Live2DModel.setGLからLive2D.setGLに変更する」

変更前:
176
177
178
// OpenGLのコンテキストをセット
Live2DModel.setGL(gl);


変更後:
107
108
109
// OpenGLのコンテキストをセット
Live2D.setGL(gl);

 変更前の場合、以下のエラーがでますので上記を修正して下さい。
 「Cannot read property 'createProgram' of undefined

複数Canvasを使用する場合は、mocファイルロード処理部分でsetGL処理を入れて下さい。
 また、loadModelの第2引数にCanvasのインデックス番号も指定して下さい。
 (インデックス番号は1つ目のCanvasが0、2つ目のCanvasが1となり、第2引数が0, 1...となります)
 詳しい実装は、SimpleMultiCanvasプロジェクトを参照して下さい。

複数Canvasの場合:
114
115
116
117
118
119
// mocファイルからLive2Dモデルのインスタンスを生成
this.loadBytes(this.modelDef.model, function(buf){
// OpenGLのコンテキストをセット(MultiCanvasの場合はここでglをセットする)
Live2D.setGL(gl);
thisRef.live2DModel = Live2DModelWebGL.loadModel(buf, thisRef.glno);
});


変更点2: 「createTexture処理に乗算済アルファチェックを追加する」
以下の3行をcreateTexture処理に追加します

追加:
233
234
235
236
if(live2DModel.isPremultipliedAlpha() == false){
    // 乗算済アルファテクスチャ以外の場合
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
}

クリッピングマスクのサイズについて

 クリッピングマスクのサイズはデフォルトは256 x 256サイズです。
 クリッピングマスクのジャギりなど気になる場合は、大きいサイズを指定して下さい。
 指定できるサイズは2の累乗である必要があります(128, 256, 512, 1024, 2048...)
 以下のコードでクリッピングマスクサイズを変更する事ができます。


1
2
3
 // クリッピングマスクサイズを1024x1024にする
 Live2D.setClippingMaskBufferSize(1024);



Comments