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 をページに並べて実行します。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// キャンバスの数
export const CanvasNum = 1;
// キャンバスの数 export const CanvasNum = 1;
// キャンバスの数
export const CanvasNum = 1;

この記事はお役に立ちましたか?
はいいいえ
この記事に関するご意見・
ご要望をお聞かせください。