# 웹 그래픽스

> How to use the Web Graphics API.

[WebGL](https://www.khronos.org/webgl/)은 OpenGL ES 그래픽스 라이브러리의 기능을 기반으로 하는 웹 브라우저에서 그래픽스를 렌더링하기 위한 API입니다. WebGL 2.0은 OpenGL ES 3.0 기능과 대체로 일치합니다.

## 카메라 지우기##camera-clear

기본적으로 Unity 웹은 각 프레임 후에 그리기 버퍼를 지웁니다. 즉, [Camera.clearFlags](https://docs.unity3d.com/ScriptReference/Camera-clearFlags.html) 설정에 관계없이 프레임 버퍼의 내용이 지워집니다. 하지만 인스턴스화 시 이 동작을 변경할 수 있습니다. 이렇게 하려면 웹 템플릿의 `index.html` 파일에서 `webglContextAttributes.preserveDrawingBuffer`를 `true`로 설정합니다.

**참고**: [WebGL 컨텍스트 속성](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getContextAttributes)을 설정하는 경우 **Power Preference** [플레이어 설정](/engine/6000.0/manual/platform-specific/webgl/develop/class-player-settings-web-gl.md#Publishing)을 유지하기 위해 줄을 추가해야 합니다.

```
script.onload = () => {
  config['webglContextAttributes'] = {
    preserveDrawingBuffer: true, //Add this line to preserve the Camera.clearFlags setting
    powerPreference: {{{ WEBGL_POWER_PREFERENCE }}} //Add this line to preserve the Power Preference Player setting
  };
  createUnityInstance(canvas, config, (progress) => {
```

## 전역 조명##global-illumination

Unity 웹은 [베이크된 GI](/engine/6000.0/manual/lighting-overview/lighting-get-started/lighting-in-unity.md#globalIllumination)만 지원합니다. 실시간 전역 조명은 현재 웹에서 지원되지 않습니다. 또한 Unity 웹은 비방향성 라이트맵만 지원합니다.

## 리니어 렌더링##linear-rendering

일부 웹 브라우저는 [sRGB DXT 텍스처 압축](/engine/6000.0/manual/class-texture-importer-override.md)을 지원하지 않습니다. 모든 DXT 텍스처의 런타임 압축 해제로 인해 리니어 렌더링을 사용할 때 렌더링 성능의 품질이 저하될 수 있기 때문입니다.

## 동영상 클립 임포터##video-clip-importer

초기 에셋 데이터 다운로드 크기가 증가하고 네트워크 스트리밍을 방해할 수 있으므로 `VideoClipImporter`를 사용하여 동영상 클립을 Unity 프로젝트로 임포트할 수 없습니다. 동영상 재생 시 VideoPlayer 컴포넌트의 URL 옵션을 사용하고 에셋을 StreamingAssets/ 디렉토리에 배치하여 브라우저의 빌트인 네트워크 스트리밍을 사용할 수 있습니다.

## 웹 셰이더 코드 제한##web-shader-code-restrictions

[WebGL 2.0 사양](https://www.khronos.org/registry/webgl/specs/2.0/)은 GLSLS 셰이더 코드에 몇 가지 제약을 가합니다. 이는 주로 직접 셰이더를 작성할 때 관련이 있습니다. 다음은 몇 가지 제한 사항입니다.

* **정밀도 기준**: WebGL 2.0에서는 셰이더에 모든 변수의 정밀도를 지정해야 합니다. `highp`, `mediump`, `lowp`를 사용하여 변수의 정밀도를 지정할 수 있습니다. 정밀도를 지정하지 않으면 셰이더가 기본 정밀도인 `mediump`를 사용합니다. `precision`을 사용하여 변수 블록의 정밀도를 지정할 수도 있습니다.

**참고:** 웹에서 사용 가능한 메모리가 제한되어 있기 때문에 불필요하게 메모리를 사용할 수 있는 원치 않는 셰이더 배리언트를 포함하지 마십시오. 따라서 [셰이더 배리언트](/engine/6000.0/manual/materials-and-shaders/shaders/shader-troubleshooting/shader-reducing/shader-variants/shader-variants.md) 및 [셰이더 스트리핑](/engine/6000.0/manual/materials-and-shaders/shaders/shader-troubleshooting/shader-reducing/shader-variants/shader-variant-stripping.md)에 익숙해지면 [Graphics Settings](/engine/6000.0/manual/unity-editor/editor-features/comp-manager-group/class-graphics-settings.md)의 [Always-included Shaders](/engine/6000.0/manual/unity-editor/editor-features/comp-manager-group/class-graphics-settings.md#Always) 섹션에 배리언트가 너무 많은 셰이더(예: Unity의 [스탠다드 셰이더](/engine/6000.0/manual/materials-and-shaders/shaders/shader-built-in-birp/birp/shader-standard-shader/shader.md))를 추가하지 않는 것이 좋습니다.

## 폰트 렌더링##font-rendering

Unity 웹은 다른 Unity 플랫폼과 유사하게 동적 폰트 렌더링을 지원합니다. 하지만 사용자 컴퓨터에 설치된 폰트에 액세스할 수 없으므로 사용하려는 폰트(국제 문자의 폴백 폰트나 폰트의 굵게/이탤릭체 버전 등)를 프로젝트 폴더에 포함시키고 [폴백 폰트 이름으로 설정](/engine/6000.0/manual/working-in-unity/uitoolkits/uielements/uie-work-with-text/uie-fallback-font.md)해야 합니다.

## 안티앨리어싱##anti-aliasing

WebGL은 브라우저와 GPU 조합 대부분에 안티앨리어싱을 지원합니다. 이를 사용하려면 웹 플랫폼의 기본 [품질](/engine/6000.0/manual/unity-editor/editor-features/comp-manager-group/class-quality-settings.md) 설정에서 안티앨리어싱을 활성화해야 합니다.

## 반사 프로브##reflection-probes

Unity 웹은 모든 반사 프로브를 지원합니다.

## WebGL 2.0 지원##webgl-2.0-support

Unity에는 [WebGL 2.0 API](https://www.khronos.org/registry/webgl/specs/latest/2.0/)에 대한 지원이 포함되어 있어 OpenGL ES 3.0 수준의 렌더링 성능을 웹에서 사용할 수 있습니다. Unity 웹 빌드는 기본적으로 WebGL 2.0 API를 지원합니다.

WebGL 2.0이 지원되는 브라우저는 다음과 같은 장점이 있습니다.

* 스탠다드 셰이더의 콘텐츠가 고품질입니다.
* [GPU 인스턴싱](/engine/6000.0/manual/rendering-and-post-processing/graphics-performance-profiling/reduce-draw-calls/gpuinstancing/gpuinstancing.md)과 방향 라이트맵을 지원합니다.
* 셰이더 코드의 인덱싱과 루프에 대한 제한이 없습니다.
* 성능이 향상되었습니다.

### 추가 리소스:##additional-resources:

* [반사 프로브](/engine/6000.0/manual/lighting-overview/reflections/class-reflection-probe.md)
* [웹 애플리케이션 빌드](/engine/6000.0/manual/platform-specific/webgl/building-distribution/building.md)
* [웹 플레이어 설정](/engine/6000.0/manual/platform-specific/webgl/develop/class-player-settings-web-gl.md)

***