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