WebGL 빌드 디버깅 및 문제 해결
WebGL 네트워킹

WebGL 그래픽스

WebGL은 웹 브라우저에서 그래픽스를 렌더링하는 API로, OpenGL ES 그래픽스 라이브러리의 기능에 기반을 두고 있습니다. WebGL 1.0은 OpenGL ES 2.0과 기능이 유사하고, WebGL 2.0은 OpenGL ES 3.0과 기능이 유사합니다.

카메라 지우기

기본 WebGL 동작은 매 프레임 후에 드로잉 버퍼를 지우는 것입니다. 즉, Unity WebGL에서 프레임 버퍼의 콘텐츠는 Camera.clearFlags 설정에 관계없이 지워집니다. 하지만 인스턴스화 시점에 이러한 동작을 변경할 수 있습니다. 이렇게 하려면 WebGL 템플릿에서 webglContextAttributes.preserveDrawingBuffertrue로 설정하십시오.

UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%", {
    Module: {
        "webglContextAttributes": {"preserveDrawingBuffer": true},
    }
});

디퍼드 렌더링

WebGL2.0을 사용할 수 있을 때 Unity WebGL은 디퍼드 렌더링 경로만 지원합니다. WebGL1.0에서 Unity WebGL 런타임은 포워드 렌더링을 대신 사용합니다.

전역 조명

Unity WebGL은 베이크된 GI만 지원합니다. 실시간 GI는 WebGL에서 현재 지원되지 않습니다. 또한 비방향 라이트맵만 지원합니다.

리니어 렌더링

Unity WebGL은 WebGL 2.0에서만 리니어 색 공간 렌더링을 지원합니다. 리니어 색 공간 렌더링은 WebGL 1.0에 대한 폴백 지원을 제공하지 않습니다. 리니어 색 공간 렌더링을 사용하여 WebGL 플레이어를 빌드하려면 Player 설정에서 WebGL 1.0 API를 제거하고, Other Settings 패널을 열고, Automatic Graphics API 설정을 비활성화하십시오.

일부 웹 브라우저에서는 sRGB DXT 텍스처 압축이 지원되지 않습니다. 따라서 리니어 렌더링을 사용하는 경우 런타임 시점에 모든 DXT 텍스처의 압축을 풀어야 하므로 렌더링 성능이 저하될 수 있습니다.

MovieTextures

WebGL은 MovieTexture 클래스를 사용한 비디오 재생을 지원하지 않습니다. 하지만 HTML5 비디오 요소를 사용하여 WebGL 콘텐츠의 비디오를 효율적으로 재생할 수 있습니다. 이렇게 하는 방법의 예를 보려면 이 에셋 스토어 패키지를 다운로드하십시오.

WebGL 셰이더 코드 제한

WebGL 1.0 사양은 여러 OpenGL ES 2.0 구현 방식의 제약보다 더 큰 제약을 GLSLS 셰이더 코드에 가합니다. 대부분 직접 셰이더를 작성할 때 크게 작용합니다.

구체적으로 설명하면 WebGL에서는 인덱스 배열 또는 행렬에 사용할 수 있는 값이 제한됩니다. WebGL에서는 상수식, 루프 인덱스, 또는 조합을 사용한 동적 인덱싱만 허용됩니다. 아무 식이나 사용해서 인덱스할 수 있는 버텍스 셰이더의 통합 액세스만 예외입니다.

또한 제어 구조에도 제한이 적용됩니다. 허용되는 유일한 루프 타입은 이니셜라이저가 변수를 상수로 초기화하고, 업데이트에서 상수를 변수에 더하거나 변수에서 빼고, 연속성 테스트에서 변수를 상수에 비교하는 for 카운트 루프입니다. 이런 기준을 충족하지 않는 for 루프와 while 루프는 허용되지 않습니다.

폰트 렌더링

Unity WebGL은 모든 Unity 플랫폼처럼 동적 폰트 렌더링을 지원합니다. 하지만 사용자 기기에 설치된 폰트에 액세스할 수 없으므로 사용되는 폰트(국제 문자의 폴백 폰트나 폰트의 볼드/이탤릭 버전 등)를 프로젝트 폴더에 포함시키고 폴백 폰트 이름으로 설정해야 합니다.

안티앨리어싱

WebGL은 거의 대부분의 브라우저 및 GPU 조합에서 안티앨리어싱을 지원합니다. 안티앨리어싱을 사용하려면 WebGL 플랫폼의 기본 품질 설정에서 안티앨리어싱을 활성화해야 합니다.

WebGL1.0에서는 다음과 같은 몇 가지 제약이 있습니다.

  • Quality 설정을 런타임 시점에 전환하면 안티앨리어싱을 활성화하거나 비활성화할 수 없습니다. 플레이어 시작 시 로드된 기본 *Quality 설정에서 설정하십시오.

  • 각기 다른 멀티 샘플링 수준(2x, 4x 등)은 WebGL에서 켜져 있든 꺼져 있든 영향이 없습니다.

  • 카메라에 포스트 프로세싱 효과를 적용하면 내장 안티앨리어싱이 활성화됩니다.

  • HDR은 안티앨리어싱과 호환되지 않으므로, Allow HDR 카메라 옵션을 비활성화해야 합니다.

WebGL2.0에서는 이런 제약이 없습니다.

반사 프로브

반사 프로브는 WebGL에서 지원되지만, 특정 밉맵으로 렌더링하는 것에 대한 WebGL 사양의 제약으로 인해 매끄러운 실시간 반사 프로브는 지원되지 않습니다. 따라서 실시간 반사 프로브는 항상 선명한 반사를 생성하므로 해상도가 매우 낮은 것처럼 보일 수 있습니다. 매끄러운 실시간 반사 프로브에는 WebGL 2.0이 필요합니다.

WebGL 2.0 지원

Unity에는 WebGL 2.0 API 지원이 포함되어 있어 OpenGL ES 3.0 수준의 렌더링 성능을 웹에서 사용할 수 있습니다.

Unity WebGL 빌드는 기본적으로 WebGL 1.0 및 WebGL 2.0 API를 지원합니다. Other Settings 패널의 WebGL Player 설정에서 Automatic Graphics API 프로퍼티를 비활성화해야 합니다.

브라우저에서 WebGL 2.0이 지원되는 경우 스탠다드 셰이더 품질 개선, GPU 인스턴스화 지원, 방향 라이트맵 지원, 셰이더 코드의 제한 없는 인덱싱 및 루프, 성능 개선을 통해 콘텐츠가 향상됩니다.

런타임 시점에 SystemInfo.graphicsDeviceType을 사용하여 Unity 인스턴스가 OpenGLES3 (WebGL2.0) 또는 OpenGLES2 (WebGL1.0)로 렌더링되는지 확인할 수 있습니다.


  • 2018–10–26 일부 편집 리뷰를 거쳐 페이지 수정됨

  • Unity 2017.2에서 WebGL 2.0용 리니어 렌더링 추가됨 NewIn20172

WebGL 빌드 디버깅 및 문제 해결
WebGL 네트워킹