게임을 렌더링할 때 WebGL 앱의 캔버스 요소에서 브라우저가 그래픽스를 드로우합니다. 이 섹션에서는 WebGL 캔버스 요소의 가시적 크기를 설정하는 방법과 게임을 렌더링할 해상도에 대해 설명합니다.
WebGL 캔버스 크기를 설정하려면 반드시 아래에 나온 캔버스 크기 타입을 고려해야 합니다.
| 캔버스 크기 요소 | 설명 |
|---|---|
| 캔버스 요소 CSS 크기 | 이 문서 오브젝트 모델(DOM)은 캔버스가 차지하는 웹 페이지에서 보이는 영역을 지정합니다. HTML이나 JavaScript를 사용하여 캔버스 크기를 설정할 수 있습니다. |
| WebGL 렌더 타겟 크기 | 이 크기는 GPU가 게임을 렌더링할 픽셀 해상도를 지정합니다. 이 크기는 픽셀 퍼펙트 렌더링을 제공하는 CSS 크기와 동기화되어 1:1로 관리되거나 CSS 크기에서 분리될 수 있습니다. |
위의 두 캔버스 크기 요소가 일치하지 않은 경우 브라우저는 렌더링한 WebGL 출력을 스트레치하여 웹 페이지에 보이는 캔버스 영역을 채웁니다.
렌더 해상도 분리는 높은 DPI 디스플레이에서 하향 조정된 낮은 DPI(인치 당 도트 수) 렌더링을 구현할 때 유용합니다. 이는 GPU 필레이트 파워를 보존하는 데 도움이 될 뿐 아니라 애플리케이션이 렌더링 해상도에 민감한 경우에도 도움이 됩니다. 예를 들어 애플리케이션 로직이 화면 공간 픽셀 단위를 사용하는 경우 애플리케이션 자체를 적절히 작동하게 하려면 특정 해상도가 필요합니다.
기본적으로 Unity는 캔버스 요소 CSS 크기와 WebGL 렌더 타겟 크기를 동기화하여 유지하며 1:1 픽셀 퍼펙트 렌더링을 제공합니다. 캔버스 CSS 크기가 JavaScript로 작성된 웹 페이지에서 수정되는 경우 Unity는 자동으로 WegGL 렌더 타겟 크기를 조절하여 해당 웹 페이지에 맞춥니다. 기본적으로 높은 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>