ウェブのグラフィックス

How to use the Web Graphics API.

読み終わるまでの所要時間 8 分

最終更新 1ヶ月前

WebGL は OpenGL ES グラフィックスライブラリの機能を基本とした、ウェブブラウザーでグラフィックスを描画する API です。WebGL 2.0 は OpenGL ES 3.0 の機能とほぼ同じです。

カメラの消去

デフォルトでは、Unity Web はフレームごとに描画バッファを消去します。つまり、フレームバッファのコンテンツは Camera.clearFlags の設定に関係なく消去されます。ただし、この動作はインスタンス化のときに変更できます。これを行うには、ウェブテンプレートの

index.html

ファイルの

webglContextAttributes.preserveDrawingBuffer

を

true

に設定します。

ノート: いずれかの WebGL コンテキスト属性を設定する場合は、Power Preference プレイヤー設定を維持する行を追加する必要もあります。


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) => {

グローバルイルミネーション

Unity Web は Baked GI のみをサポートしています。現在、リアルタイムグローバルイルミネーションはウェブではサポートされていません。さらに、Unity Web はディレクショナルライトマップ以外のみをサポートしています。

リニアレンダリング

一部のウェブブラウザーは sRGB DXT テクスチャ圧縮をサポートしていません。これにより、すべての DXT テクスチャをランタイムに解凍するため、リニアレンダリングを使用するときにレンダリングパフォーマンスの品質が低下します。

ビデオクリップインポーター

VideoClipImporter

を使用して Unity プロジェクトにビデオクリップをインポートすることはできません。そうすると、最初のアセットデータのダウンロードサイズが大きくなり、ネットワークストリーミングができなくなる可能性があるためです。ビデオ再生には、VideoPlayer コンポーネントの URL オプションを使って、StreamingAssets/ ディレクトリにアセットを配置し、ブラウザーのビルトインネットワークワークストリーミングを使用します。

ウェブシェーダーコードの制限

WebGL 2.0 仕様では、GLSLS シェーダーコードにいくつかの制限があります。これは、主に自作シェーダーを記述する場合に関係します。以下は制限の一部です。

精度の修飾子:WebGL 2.0 では、シェーダー内のすべての変数の精度を指定する必要があります。
```
highp
```
、
```
mediump
```
、
```
lowp
```
のいずれかを使用して、変数の精度を指定できます。精度を指定しない場合、シェーダーはデフォルトの精度である
```
mediump
```
を使用します。
```
precision
```
を使用して、変数ブロックの精度を指定することもできます。

注意ウェブで使用できるメモリは限られているため、不要なメモリ使用につながる可能性がある不要なシェーダーバリアントを加えないでください。したがって、シェーダーバリアントとシェーダーストリッピングに慣れ、Graphics Settings の Always-Included Shaders セクションに、バリアントが多すぎるシェーダー (例えば Unity のスタンダードシェーダーなど) を追加しないように特別な注意を払うことをお勧めします。

フォントレンダリング

Unity Web は他の Unity プラットフォームのようなダイナミックフォントレンダリングをサポートしています。ただし、ユーザーのマシンにインストールされているフォントにアクセスすることはできないため、フォントを使用する場合は (多言語フォント、太字や斜体のフォントのフォールバックフォントも含めて) プロジェクトフォルダーに置き、フォールバックフォント名として設定してください。

Anti-aliasing

WebGL は、ブラウザーと GPU のほとんど (ただし、すべてではない) の組み合わせでアンチエイリアスをサポートします。これを使用するには、ウェブプラットフォームのデフォルトの Quality 設定でアンチエイリアスを有効にする必要があります。

リフレクションプローブ

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

WebGL 2.0 のサポート

Unity には WebGL 2.0 API のサポートが含まれており、ウェブに対する OpenGL ES 3.0 レベルのレンダリング機能を提供します。デフォルトでは、Unity Web ビルドは WebGL 2.0 API をサポートしています。

WebGL 2.0 をサポートするブラウザーには、以下の利点があります。

スタンダードシェーダーのコンテンツは高品質です。
GPU インスタンシングとディレクショナルライトマップをサポートします。
シェーダーコードのインデックス作成とループに制限はありません。
パフォーマンスが向上します。

Unity Engine

User Manual

Script Reference