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>
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.