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

In a WebGL app, the canvas element is where the browser draws the graphics when rendering a game. This section describes how to configure the visible size of the WebGL canvas element, and the resolution that the game renders to.

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

If the above two canvas size elements do not match, the browser will stretch the rendered WebGL output to fill the visible canvas area on the web page.

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

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

By default, Unity keeps the canvas element CSS size and the WebGL render target size in sync and provides 1:1 pixel perfect rendering. If the canvas CSS size is modified by the web page in JavaScript, Unity will automatically adjust the WebGL render target size to match it. By default, this match is done to implement high DPI rendering.

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>