В WebGLJavaScript API, который отображает 2D- и 3D-графику в веб-браузере. Вариант сборки Unity WebGL позволяет Unity публиковать контент в виде программ JavaScript, использующих технологии HTML5 и API рендеринга WebGL для запуска контента Unity в веб-браузере. Подробнее
В приложении Словарь элемент холста — это место, где браузер рисует графику, когда рендеринг игры. В этом разделе описывается, как настроить видимый размер элемента холста WebGL и разрешение, в котором отображается игра.
Чтобы настроить размер холста WebGL, необходимо учитывать следующие типы размеров холста:
| Элементы размера холста | Описание |
|---|---|
| Canvas element CSS size | Эта объектная модель документа (DOM) определяет видимую область на веб-странице, которую занимает холст. Вы можете настроить размер холста с помощью HTML или JavaScript.. |
| WebGL render target size | Этот размер определяет пиксельнаименьшую единицу компьютерного изображения. Размер пикселя зависит от разрешения вашего экрана. Пиксельное освещение рассчитывается для каждого пикселя экрана. Подробнее Посмотрите в разрешении Словарь, в котором GPU обрабатывает вашу игру. Этим размером можно управлять в соотношении 1:1 синхронно с размером CSS, чтобы обеспечить пиксельную визуализацию, или его можно отделить от размера CSS. |
Если указанные выше два элемента размера холста не совпадают, браузер растянет визуализированный вывод WebGL, чтобы заполнить видимую область холста на веб-странице.
Разделение разрешения рендеринга
Развязка разрешения рендеринга полезна при реализации рендеринга с уменьшенным разрешением с низким DPI (количество точек на дюйм) на дисплее с высоким DPI. Это помогает не только сохранить мощность скорости заполнения графического процессора, но также помогает, если ваше приложение чувствительно к разрешению рендеринга. Например, если логика вашего приложения использует пиксели экранного пространства, но для правильной работы самого приложения требуется определенное разрешение.
По умолчанию Unity синхронизирует размер CSS-элемента холста и целевой размер рендеринга WebGL и обеспечивает идеальный рендеринг с точностью до пикселя 1:1. Если размер CSS холста изменен веб-страницей в JavaScript, Unity автоматически изменит целевой размер рендеринга WebGL, чтобы он соответствовал ему. По умолчанию это совпадение выполняется для реализации рендеринга с высоким разрешением.
Переопределить масштаб DPI
Если вы хотите переопределить масштаб DPI, откройте файл index и добавьте переменную конфигурации экземпляра Unity devicePixelRatio=. Например, установка devicePixelRatio=1 на странице шаблона сайта WebGL заставит Unity всегда применять рендеринг с низким DPI. Пример см. в разделе Использование шаблонов WebGL.
Вручную изменить размер рендеринга холста WebGL
Чтобы вручную настроить размер холста, необходимо сначала отключить автоматическую синхронизацию размеров. Для этого в файле index шаблона WebGL установите для переменной конфигурации экземпляра Unity значение false: matchWebGLToCanvasSize=false.
Когда это установлено, Unity оставляет целевой размер рендеринга холста как есть, но при необходимости вы всегда можете настроить размер.
Например, чтобы изменить размер холста css, отредактируйте следующий текст в файле index:
<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>