Unity WebGL 캔버스 크기 설정 가이드

이 문서는 Unity를 사용하여 WebGL 애플리케이션의 캔버스 크기를 설정하는 방법에 대해 설명합니다. WebGL 캔버스는 브라우저가 게임을 렌더링할 때 그래픽스를 그리는 위치입니다. 이 가이드를 통해 캔버스 요소를 설정하고 관리하는 방법을 배울 수 있습니다.

웹GL 캔버스 크기 설정

WebGL 캔버스 크기를 설정하려면 다음 두 가지 캔버스 크기 요소를 고려해야 합니다.

위의 두 캔버스 크기 요소가 일치하지 않으면 브라우저는 WebGL 출력을 늘려 웹 페이지에 표시되는 캔버스 영역을 채웁니다.

렌더 해상도 분리

렌더 해상도 분리는 고해상도 또는 DPI(인치 당 도트 수) 디스플레이에서 렌더링 해상도를 적절히 조정하는 데 유용합니다. 이를 통해 GPU의 필레이트 파워를 보존하고, 애플리케이션이 렌더링 해상도에 민감한 경우 적절한 화면 크기를 유지할 수 있습니다.

기본 설정

기본적으로 Unity는 캔버스 요소 CSS 크기와 WebGL 렌더 타겟 크기를 동기화하여 1:1 픽셀 퍼펙트 렌더링을 제공합니다. JavaScript를 통해 캔버스 CSS 크기를 수정하면 Unity는 자동으로 WebGL 렌더 타겟 크기를 조정합니다.

DPI 스케일 오버라이드

DPI 스케일을 오버라이드하려면 index.html 파일에서 Unity 인스턴스 설정 변수를 추가합니다.

devicePixelRatio=<double>

예를 들어, devicePixelRatio=1로 설정하면 Unity는 항상 낮은 DPI 렌더링을 적용합니다.

WebGL 캔버스 렌더 크기 수동 변경

캔버스 크기를 수동으로 설정하려면 자동 크기 동기화를 비활성화해야 합니다. index.html 파일에서 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>

결론

이 문서는 Unity WebGL 애플리케이션에서 캔버스 크기를 설정하고 관리하는 방법을 다루었습니다. 적절한 캔버스 설정을 통해 최적의 그래픽스 렌더링을 경험할 수 있습니다. 추가적인 질문이나 예제가 필요하다면 Unity 커뮤니티를 통해 도움을 받을 수 있습니다.