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;