Version: 2022.3
言語: 日本語
WebGL テンプレート
WebGL アプリケーションのデプロイ

WebGL のキャンバスサイズの設定

WebGL アプリケーションにおけるキャンバス要素は、ゲームのレンダリング時にブラウザーがグラフィックスを描画する場所です。このセクションでは、WebGL のキャンバス要素の可視サイズと、ゲームがレンダリングする解像度の、設定方法を説明します。

WebGL のキャンバスサイズを設定するには、以下の各タイプのキャンバスサイズを考慮する必要があります。

キャンバスサイズ要素 説明
キャンバス要素 CSS サイズ この DOM (Document Object Model) は、ウェブページ上の、キャンバスが占める可視領域を指定します。キャンバスサイズは HTML や JavaScript を使用して設定できます。
WebGL のレンダーターゲットサイズ このサイズは、GPU がゲームをレンダリングするピクセル解像度を指定します。このサイズを CSS サイズと同期させて管理してピクセルパーフェクトなレンダリングを提供することも、CSS サイズから切り離すことも可能です。

上記の 2 つのキャンバスサイズ要素が一致しない場合、ブラウザーは、レンダリングされたWebGL 出力を、ウェブページ上の可視キャンバス領域いっぱいに引き伸ばします。

レンダリング解像度の切り離し

レンダリング解像度の切り離しは、ダウンスケールされた低 DPI (Dots Per Inch) レンダリングを高 DPI ディスプレイに実装する場合に役立ちます。これは、GPU フィルレートのパワーを節約するだけでなく、レンダリング解像度に繊細なアプリケーションにも役に立ちます。例えば、“ロジックはスクリーンスペースのピクセル単位を使用しているが、特定の解像度でないと正常に機能しない” アプリケーションなどです。

Unity はデフォルトでは、キャンバス要素の CSS サイズと WebGL のレンダーターゲットサイズの同期を保ち、1:1 のピクセルパーフェクトなレンダリングを提供します。JavaScript のウェブページがキャンバスの CSS サイズを変更した場合、Unity は自動的に WebGL のレンダーターゲットサイズをそれに合わせて調整します。この調整は、デフォルトで、高 DPI レンダリングを実装するために行われます。

DPI スケールのオーバーライド

DPI スケールをオーバーライドしたい場合は、index.html ファイルを開き、Unity Instance 構成変数 devicePixelRatio=<double> を追加します。例えば、WebGL サイトテンプレートページに devicePixelRatio=1 を設定すると、Unity は常に低 DPI レンダリングを適用するよう強制されます。WebGL テンプレートの使用 で、この例を参照してください。

WebGL キャンバスのレンダーサイズの手動変更

キャンバスサイズを手動で調整するには、まず自動サイズ同期を無効にする必要があります。これを行うには、WebGL テンプレートの index.html ファイル内で Unity Instance 構成変数を false に設定します (matchWebGLToCanvasSize=false)。 この設定を行うと、Unity はキャンバスのレンダーターゲットサイズをそのままにしますが、必要であればいつでもサイズ調整が可能です。

例えば、キャンバスの CSS サイズを変更するには、index.html ファイル内で以下のテキストを編集します。

<div id="unity-container" style="position: absolute; width: 100%; height: 100%">
  <canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}} style="width: 100%; height: 100%"></canvas>
</div>
WebGL テンプレート
WebGL アプリケーションのデプロイ