In a WebGL app, 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 WebGL canvas element, and the resolution that the game renders to.
WebGL 캔버스 크기를 설정하려면 반드시 아래에 나온 캔버스 크기 타입을 고려해야 합니다.
| 캔버스 크기 요소 | 설명 |
|---|---|
| 캔버스 요소 CSS 크기 | 이 문서 오브젝트 모델(DOM)은 캔버스가 차지하는 웹 페이지에서 보이는 영역을 지정합니다. HTML이나 JavaScript를 사용하여 캔버스 크기를 설정할 수 있습니다. |
| WebGL 렌더 타겟 크기 | This size specifies the pixel resolution that the GPU renders your game to. You can manage this size in sync with the CSS size to provide pixel-perfect rendering, or decouple it from the CSS size. |
If the above two canvas size elements don’t match, the browser will stretch the rendered WebGL output to fill the visible canvas area on the web page.
렌더 해상도 분리는 높은 DPI 디스플레이에서 하향 조정된 낮은 DPI(인치 당 도트 수) 렌더링을 구현할 때 유용합니다. 이는 GPU 필레이트 파워를 보존하는 데 도움이 될 뿐 아니라 애플리케이션이 렌더링 해상도에 민감한 경우에도 도움이 됩니다. 예를 들어 애플리케이션 로직이 화면 공간 픽셀 단위를 사용하는 경우 애플리케이션 자체를 적절히 작동하게 하려면 특정 해상도가 필요합니다.
By default, Unity keeps the canvas element CSS size and the WebGL render target size in sync and provides 1:1 pixel perfect rendering. If the web page in JavaScript modifies the canvas CSS size, Unity will automatically adjust the WebGL render target size to match it. By default, this match is done to implement high DPI rendering.
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>