置入多张Canvas

最終更新： 2024年12月19日

Cubism 5 SDK for Web R2及更高版本可以处理多张Canvas。

置入多张Canvas的优点/缺点

优点

可以在网页（HTML）上进行编排，通过置入多张Canvas，您可以在网页上的各个位置显示模型。

缺点

与在一张Canvas上绘制多个模型相比，在多张Canvas上逐一绘制的开销更大。

限制

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;