In a Web application, the canvas element is where the browser draws the graphics when rendering a game. This section describes how to configure the visible size of the Web canvas element, and the resolution that the game renders to.
To configure your Web Canvas size, you must consider the following types of canvas size:
| 캔버스 크기 요소 | 설명 |
|---|---|
| 캔버스 요소 CSS 크기 | 이 문서 오브젝트 모델(DOM)은 캔버스가 차지하는 웹 페이지에서 보이는 영역을 지정합니다. HTML이나 JavaScript를 사용하여 캔버스 크기를 설정할 수 있습니다. |
| WebGL 렌더 타겟 크기 | 이 크기는 GPU가 게임을 렌더링하는 픽셀 해상도를 지정합니다.이 크기를 CSS 크기와 동기화해 관리하여 픽셀 퍼펙트 렌더링을 제공하거나 CSS 크기와 분리하여 관리할 수 있습니다. |
위의 두 캔버스 크기 요소가 일치하지 않으면 브라우저는 렌더링된 WebGL 출력을 늘려 웹 페이지에 표시되는 캔버스 영역을 채웁니다.
렌더 해상도 분리는 높은 DPI 디스플레이에서 하향 조정된 낮은 DPI(인치 당 도트 수) 렌더링을 구현할 때 유용합니다. 이는 GPU 필레이트 파워를 보존하는 데 도움이 될 뿐 아니라 애플리케이션이 렌더링 해상도에 민감한 경우에도 도움이 됩니다. 예를 들어 애플리케이션 로직이 화면 공간 픽셀 단위를 사용하는 경우 애플리케이션 자체를 적절히 작동하게 하려면 특정 해상도가 필요합니다.
기본적으로 Unity는 캔버스 요소 CSS 크기와 WebGL 렌더 타겟 크기를 동기화하여 유지하며 1:1 픽셀 퍼펙트 렌더링을 제공합니다.JavaScript의 웹 페이지에서 캔버스 CSS 크기를 수정하면 Unity는 이에 맞게 WebGL 렌더 타겟 크기를 자동으로 조정합니다.기본적으로 이러한 조정은 높은 DPI 렌더링을 구현하기 위해 수행됩니다.
If you want to override the DPI scale, open the index.html file and add the Unity Instance configuration variable devicePixelRatio=<double>. For example, setting devicePixelRatio=1 on the Web site template page will force Unity to always apply low DPI rendering. Refer to Using Web templates for an example.
To manually configure the canvas size, you must first disable the automatic size synchronization. To do so, in the index.html file of the Web template, set the Unity Instance configuration variable to false: matchWebGLToCanvasSize=false.
When this is set, Unity leaves the render target size of the canvas as-is but you can always configure the size, if required.
For example, to change the CSS size of the canvas, edit the following text in the index.html file:
<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>