Placement of multiple Canvases

Updated: 12/19/2024

Cubism 5 SDK for Web R2 or later can handle multiple Canvases.

Advantages/Disadvantages of multiple Canvas placement

Advantages

Layout in a webpage (HTML) is possible, and by placing multiple Canvases, models can be displayed at various locations on a webpage.

Disadvantages

Compared to drawing multiple models in one Canvas, drawing one model in multiple Canvases has a larger overhead.

Restrictions

The SDK uses WebGLRenderingContext for the rendering process, but some browsers place a limit on the number of WebGLRenderingContexts.
Therefore, using more Canvases than this limit will result in an error.

This limit includes the number of WebGLRenderingContexts used outside of the SDK.

Modifications due to support for multiple Canvas operations

Framework

In Cubism 5 SDK for Web R1 or earlier, the CubismShader_WebGL class was a singleton and was accessed directly.

In Cubism 5 SDK for Web R2 or later, when there are multiple Canvases (WebGLRenderingContexts), each shader must be identified and managed, so the framework was modified by newly creating the CubismShaderManager_WebGL class to use CubismShader_WebGL according to WebGLRenderingContext.

Sample

In Cubism 5 SDK for Web R1 or earlier, the LAppDelegate class handled drawing and reactions to user operations. In Cubism 5 SDK for Web R2 or later, there are now multiple Canvases, so it is necessary to manage these processes for each canvas.

Therefore, the LAppSubdelegate class was created to handle these operations, and LAppDelegate was modified to manage LAppSubdelegate.

How to use multiple Canvases

Change the value of CanvasNum defined in lappdefine.ts.
If set to two or more, that number of Canvases will be executed side by side on the page.

// Number of canvases
export const CanvasNum = 1;