Cubism 3 SDK for Web での複数モデルの表示

yuki

Cubism 3 SDK for Web で2つのキャンバスに別々にモデルを表示する際に、WebGLに関するエラーが発生し、片方のモデルしか表示されません。

・公式のサンプル実装を用いたエラーの再現方法

1. 公式のサンプルを https://github.com/Live2D/CubismWebSamples からダウンロードまたはクローン

3. Sample/TypeScript/Demo/src/lappdelegate.ts の 61〜64行目を以下のように書き換え

public initialize(id: string): boolean
{
// キャンバスの取得
canvas = <HTMLCanvasElement>document.getElementById(id);


3. Sample/TypeScript/Demo/index.html の 11〜18行目を以下のように書き換え

<canvas id="canvas1" width="950" height="500"></canvas>
<canvas id="canvas2" width="950" height="500"></canvas>


4. Sample/TypeScript/Demo/src/main.ts の 13〜18行目を以下のように書き換え

const canvas1 = new LAppDelegate;
const canvas2 = new LAppDelegate;
if(canvas1.initialize('canvas1') == false)
{
return;
}
canvas1.run();
if(canvas2.initialize('canvas2') == false)
{
return;
}
canvas2.run();


5. https://github.com/Live2D/CubismWebSamples の手順に従ってビルドし、サーバーを起動

6. 実行結果を確認すると、片方のモデルしか表示されず、コンソールに以下のようなエラーが出力されます




ご担当者様、もしくは同じような状況に遭遇した方、解決策について教えていただけると大変幸いです。
何卒宜しくお願い致します。

y_a_s_(Dev Staff)

@yuki さん

Cubism 3 SDK for Webは、複数のGLコンテキストに対しての描画は想定されておりません。
シェーダの生成やモデルの描画は、最後に取得したGLコンテキストに対してのみ行っています。

複数のcanvasへの描画は、プロジェクト全体でシェーダの生成やモデルの切り替え、描画を行うGLコンテキストを複数保持、管理するように修正していただけば対応することが可能です。