웹 애플리케이션에서 캔버스 요소는 게임을 렌더링할 때 브라우저가 그래픽스를 그리는 위치입니다. 이 섹션에서는 웹 캔버스 요소가 표시되는 크기와 게임이 렌더링되는 해상도를 설정하는 방법에 대해 설명합니다.
웹 캔버스 크기를 설정하려면 다음 캔버스 크기 유형을 고려해야 합니다.
| 캔버스 크기 요소 | 설명 |
|---|---|
| 캔버스 요소 CSS 크기 | 이 DOM(문서 오브젝트 모델)은 캔버스가 차지하는 웹 페이지에서 표시되는 영역을 지정합니다. HTML이나 JavaScript를 사용하여 캔버스 크기를 설정할 수 있습니다. |
| WebGL 렌더 타겟 크기 | 이 크기는 GPU가 게임을 렌더링하는 픽셀 해상도를 지정합니다. 이 크기를 CSS 크기와 동기화하여 픽셀 퍼펙트 렌더링을 제공하거나 CSS 크기와 분리하여 관리할 수 있습니다. |
위의 두 캔버스 크기 요소가 일치하지 않으면 브라우저는 렌더링된__ WebGL__웹 브라우저에서 2D 및 3D 그래픽스를 렌더링하는 JavaScript API입니다. Unity 웹 빌드 옵션을 사용하면 콘텐츠를 JavaScript 프로그램으로 퍼블리시할 수 있습니다. 이 프로그램은 HTML5 기술과 WebGL 렌더링 API를 사용하여 Unity 콘텐츠를 웹 브라우저에서 실행합니다. 자세한 정보
See in Glossary 출력을 늘려 웹 페이지에 표시되는 캔버스 영역을 채웁니다.
렌더 해상도 분리는 높은 DPI(인치당 점 개수) 디스플레이에서 낮은 DPI로 다운스케일된 렌더링을 구현할 때 유용합니다. 이렇게 하면 GPU 필 레이트 성능을 절약할 뿐만 아니라 애플리케이션이 렌더링 해상도에 민감한 경우에도 도움이 됩니다. 예를 들어 애플리케이션 로직이 스크린 공간 픽셀 단위를 사용하지만 애플리케이션 자체가 제대로 작동하려면 특정 해상도가 필요합니다.
Unity는 기본적으로 캔버스 요소 CSS 크기와 WebGL 렌더 타겟 크기를 동기화하여 1:1 픽셀의 완벽한 렌더링을 제공합니다. JavaScript 웹 페이지가 캔버스 CSS 크기를 수정하면 Unity는 WebGL 렌더 타겟 크기를 자동으로 조정하여 해당 크기에 맞춥니다. 기본적으로 이러한 맞춤은 높은 DPI 렌더링을 구현하기 위해 수행됩니다.
DPI 스케일을 오버라이드하려면 index.html 파일을 열고 Unity 인스턴스 설정 변수 devicePixelRatio=<double>을 추가합니다. 예를 들어 웹 사이트 템플릿 페이지에서 devicePixelRatio=1로 설정하면 항상 낮은 DPI 렌더링을 적용하게 됩니다. 예시는 웹 템플릿 빌드 설정 및 상호 작용을 참조하십시오.
캔버스 크기를 수동으로 설정하려면 먼저 자동 크기 동기화를 비활성화해야 합니다. 이렇게 하려면 웹 템플릿의 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>