WebGL 앱에서 캔버스 요소는 브라우저가 게임을 렌더링할 때 그래픽스를 그리는 위치입니다.이 섹션에서는 WebGL 캔버스 요소의 표시 크기와 게임이 렌더링되는 해상도를 설정하는 방법에 대해 설명합니다.
WebGL 캔버스 크기를 설정하려면 반드시 아래에 나온 캔버스 크기 타입을 고려해야 합니다.
| 캔버스 크기 요소 | 설명 |
|---|---|
| 캔버스 요소 CSS 크기 | 이 문서 오브젝트 모델(DOM)은 캔버스가 차지하는 웹 페이지에서 보이는 영역을 지정합니다. HTML이나 JavaScript를 사용하여 캔버스 크기를 설정할 수 있습니다. |
| WebGL 렌더 타겟 크기 | 이 크기는 GPU가 게임을 렌더링하는 픽셀 해상도를 지정합니다.이 크기를 CSS 크기와 동기화해 관리하여 픽셀 퍼펙트 렌더링을 제공하거나 CSS 크기와 분리하여 관리할 수 있습니다. |
위의 두 캔버스 크기 요소가 일치하지 않으면 브라우저는 렌더링된 WebGL 출력을 늘려 웹 페이지에 표시되는 캔버스 영역을 채웁니다.
렌더 해상도 분리는 높은 DPI 디스플레이에서 하향 조정된 낮은 DPI(인치 당 도트 수) 렌더링을 구현할 때 유용합니다. 이는 GPU 필레이트 파워를 보존하는 데 도움이 될 뿐 아니라 애플리케이션이 렌더링 해상도에 민감한 경우에도 도움이 됩니다. 예를 들어 애플리케이션 로직이 화면 공간 픽셀 단위를 사용하는 경우 애플리케이션 자체를 적절히 작동하게 하려면 특정 해상도가 필요합니다.
기본적으로 Unity는 캔버스 요소 CSS 크기와 WebGL 렌더 타겟 크기를 동기화하여 유지하며 1:1 픽셀 퍼펙트 렌더링을 제공합니다.JavaScript의 웹 페이지에서 캔버스 CSS 크기를 수정하면 Unity는 이에 맞게 WebGL 렌더 타겟 크기를 자동으로 조정합니다.기본적으로 이러한 조정은 높은 DPI 렌더링을 구현하기 위해 수행됩니다.
DPI 스케일을 오버라이드하려면 index.html 파일을 열어 Unity 인스턴스 설정 변수인 devicePixelRatio=<double>를 추가합니다. 예를 들어 WebGL 사이트 템플릿 페이지에서 devicePixelRatio=1을 설정하면 Unity는 항상 강제로 낮은 DPI 렌더링을 적용합니다. WebGL 템플릿 사용에서 예시를 확인할 수 있습니다.
수동으로 캔버스 크기를 설정하려면 먼저 자동 크기 동기화를 비활성화해야 합니다. 이렇게 하려면 WebGL 템플릿의 index.html 파일에서 Unity 인스턴스 설정 변수를 false로 지정하여 matchWebGLToCanvasSize=false와 같이 작성합니다.
이렇게 설정되면 Unity는 캔버스의 렌더 타겟 크기를 그대로 남기지만 필요한 경우 언제든 크기를 지정할 수 있습니다.
예를 들어 캔버스의 css 크기를 변경하려면 index.html 파일에서 다음의 텍스트를 편집합니다.
<div id="unity-container" style="position: absolute; width: 100%; height: 100%">
<canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}} style="width: 100%; height: 100%"></canvas>
</div>