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 のキャンバスサイズを設定するには、以下の各タイプのキャンバスサイズを考慮する必要があります。
キャンバスサイズ要素 | 説明 |
---|---|
キャンバス要素 CSS サイズ | この DOM (Document Object Model) は、ウェブページ上の、キャンバスが占める可視領域を指定します。キャンバスサイズは HTML や JavaScript を使用して設定できます。 |
WebGL のレンダーターゲットサイズ | This size specifies the pixel resolution that the GPU renders your game to. This size can either be managed 1:1 in sync with the CSS size to provide pixel-perfect rendering, or it can be decoupled from the CSS size. |
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 スケールをオーバーライドしたい場合は、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.