# ウェブのグラフィックス

> 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 Web はフレームごとに描画バッファを消去します。つまり、フレームバッファのコンテンツは [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 Web は [Baked GI](/engine/6000.0/manual/lighting-overview/lighting-get-started/lighting-in-unity.md#globalIllumination) のみをサポートしています。現在、リアルタイムグローバルイルミネーションはウェブではサポートされていません。さらに、Unity Web はディレクショナルライトマップ以外のみをサポートしています。

## リニアレンダリング##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 Web は他の Unity プラットフォームのようなダイナミックフォントレンダリングをサポートしています。ただし、ユーザーのマシンにインストールされているフォントにアクセスすることはできないため、フォントを使用する場合は (多言語フォント、太字や斜体のフォントのフォールバックフォントも含めて) プロジェクトフォルダーに置き、[フォールバックフォント名として設定](/engine/6000.0/manual/working-in-unity/uitoolkits/uielements/uie-work-with-text/uie-fallback-font.md) してください。

## Anti-aliasing##anti-aliasing

WebGL は、ブラウザーと GPU のほとんど (ただし、すべてではない) の組み合わせでアンチエイリアスをサポートします。これを使用するには、ウェブプラットフォームのデフォルトの [Quality](/engine/6000.0/manual/unity-editor/editor-features/comp-manager-group/class-quality-settings.md) 設定でアンチエイリアスを有効にする必要があります。

## リフレクションプローブ##reflection-probes

Unity Web はすべてのリフレクションプローブをサポートしています。

## 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 Web ビルドは 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:

* [Reflection Probe](/engine/6000.0/manual/lighting-overview/reflections/class-reflection-probe.md)
* [ウェブアプリケーションをビルドする](/engine/6000.0/manual/platform-specific/webgl/building-distribution/building.md)
* [Web Player 設定](/engine/6000.0/manual/platform-specific/webgl/develop/class-player-settings-web-gl.md)

***