Canvasの複数配置

最終更新： 2024年12月19日

Cubism 5 SDK for Web R2 以降では複数のCanvasを扱うことが出来るようになりました。

Canvasの複数配置によるメリット/デメリット

メリット

Web ページ (HTML) におけるレイアウトが可能でCanvasを複数配置することでWebページ上の各所にモデルを表示することができます。

デメリット

1つのCanvasに複数モデルを描画するのに比べると複数のCanvasに1つずつ描画を行う方がオーバーヘッドが大きくなります。

制限

SDKでは描画処理に WebGLRenderingContext を使用していますが、一部のブラウザは WebGLRenderingContext の数に上限を設けています。
その為、この上限を超えた数のCanvasを利用するとエラーとなってしまいます。

この制限にはSDK以外で使用される WebGLRenderingContext の数も含まれます。

複数のCanvas操作対応による変更箇所

Framework

Cubism 5 SDK for Web R1 以前では CubismShader_WebGL クラスはシングルトンであり、直接アクセスしていました。

Cubism 5 SDK for Web R2 以降では、Canvas(WebGLRenderingContext)が複数存在する場合にそれぞれのシェーダーを識別して管理しなければならないため、
新たに CubismShaderManager_WebGL クラスを設け、WebGLRenderingContext に応じた CubismShader_WebGL を利用できるように変更しました。

Sample

Cubism 5 SDK for Web R1 以前では LAppDelegate クラスで描画やユーザー操作による反応処理を行っていましたが、
Cubism 5 SDK for Web R2 以降では Canvasが複数になった事でCanvas毎にこれらの処理を管理する必要があります。

そこで LAppSubdelegate クラスを設けてこれらの動作を任せ、 LAppDelegate では LAppSubdelegate の管理を行うように変更しました。

複数Canvasの使用方法

lappdefine.ts に定義されている  CanvasNum の値を変更します。
2以上に設定するとその数だけ Canvas をページに並べて実行します。

// キャンバスの数
export const CanvasNum = 1;