Version: 2020.1
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 は Baked GI のみをサポートしています。 Realtime GI は WebGL では現在サポートされていません。なお、非指向性ライトマップのみがサポートされています。

リニアレンダリング

Unity WebGL は WebGL 2.0 で リニア色空間レンダリング のみをサポートします。リニア色空間レンダリングで WebGL 1.0 のフォールバックサポートはありません。リニア色空間レンダリングを使用して WebGL プレイヤーをビルドするには、Player 設定で WebGL 1.0 API を削除し、Other Settings パネルを開き、Automatic Graphics API 設定を無効にします。

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

MovieTexture

WebGL は MovieTexture クラスを用いた動画再生をサポートしていません。ただし、HTML5 video 要素を用いて WebGL コンテンツの動画を効率よく再生することはできます。実践例については、こちらの Asset Store パッケージ をダウンロードしてください。

WebGL シェーダーコードの制限

WebGL 1.0 仕様 は GLSLS シェーダーコードにいくつかの制限を課しています。これらの制限は多くの OpenGL ES 2.0 実装よりもより厳しいものです。これは多くの場合、独自のシェーダーを作成する場合に関わってきます。

特に WebGL には配列や行列のインデックス化に使用できる値に関して制限があります。具体的には、WebGL が動的インデックスを使用可能なのは、定数式、ループインデックス、または、それらの組み合わせのみです。頂点シェーダーの Uniform アクセスだけは例外で、どんな式を用いてもインデックスを使えます。

管理構造にも制限が課されます。使用できるループのタイプは、数えるための for ループのみです。このループでは、イニシャライザーが変数を初期化して定数にしたり、更新によって定数を変数に加算/変数から定数を減算したり、継続テストで変数を定数と比較することなどを行います。この条件と合致しない for ループと while ループは使用できません。

フォントレンダリング

Unity WebGL は他すべての Unity プラットフォームのようにダイナミックフォントレンダリングをサポートしています。ただし、ユーザーのマシンにインストールされているフォントにアクセスすることはできないため、使用されるすべてのフォントは (多言語フォントに対応するフォントや、太字やイタリックのフォントの代替フォントも含めて) プロジェクトフォルダーに置き、代替として使うため、Font Names にリストする 必要があります。

アンチエイリアス

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

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 Page amended

  • WebGL 2.0 のリニアレンダリングは2017.2 で追加 NewIn20172

WebGL のブラウザー間での互換性
WebGL でオーディオの使用