유니티 WebGL 빌드에서 렌더링 해상도가 너무 크게 나올때

유니티 WebGL로 빌드하는데 게임을 키면 해상도가 3000*6000에 쯤으로 엄청나게 크게 잡혀서

렌더 텍스쳐 용량이 커지고, 메모리 포화가 되는 현상을 경험했다.

몇 주에 걸쳐서 삽질한 결과 아래와 같은 해결책 발견

 

빌드로 출력되는 index.html에서 (정확히는 WeblGlTemplate 설정에서)

 

        const config = {
            dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
            frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
            codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
            streamingAssetsUrl: "StreamingAssets",
            companyName: "{{{ COMPANY_NAME }}}",
            productName: "{{{ PRODUCT_NAME }}}",
            productVersion: "{{{ PRODUCT_VERSION }}}",

            devicePixelRatio: 1,
        };

 

이렇게 config에 devicePixelRatio에 값을 적당히 낮은 값으로 고정해주거나.

 

        script.onload = () => {
            config.devicePixelRatio = 1920 / window.innerHeight;
            createUnityInstance(canvas, config, (progress) => {
                progressBarFull.style.width = `${progress * 100}%`;
            }).then((unityInstance) => {
                loadingCover.style.display = "none";
            }).catch((message) => {
                console.error("Error creating Unity instance: ", message);
            });
        };

이 부분에서 계산을 통해서 세로 길이 1920 에 맞게 나오도록 값을 넣어주면 된다.