★お知らせ(2023/12/27)
いつもLive2D公式コミュニティをご利用いただき誠にありがとうございます。
本コミュニティは2023年12月27日 11:00をもって閉鎖いたしました。
今後の運営はすべて新Live2D公式クリエイターズフォーラムに移行します。
閉鎖に伴い、以下機能は利用不可となります。
・アカウントの新規作成
・トピック投稿、返信
たくさんのご利用誠にありがとうございました。

新Live2D公式クリエイターズフォーラムは以下バナーよりご利用いただけます。
Live2D公式クリエイターズフォーラム

なお、本コミュニティに投稿されたトピックはすべて残りますが、今後削除する可能性がございますので予めご了承ください。
閉鎖に関するお問い合わせにつきましてはLive2D公式クリエイターズフォーラムへご連絡ください。

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

編集済: 7月 2019 Cubism 3 SDK
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. 実行結果を確認すると、片方のモデルしか表示されず、コンソールに以下のようなエラーが出力されます




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

コメント

  • @yuki さん

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

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