Pixel ratio и retina-экраны

PlayCanvas — это мощная платформа для создания 3D-приложений, игр и визуализаций, использующая WebGL. Один из аспектов, с которым разработчики сталкиваются при разработке графики для разных устройств, — это адаптация к различным типам дисплеев, особенно к retina-экранам. На таких устройствах необходимо учитывать плотность пикселей (pixel ratio), чтобы обеспечить корректное отображение графики и избежать размытости изображений.

Что такое Pixel Ratio

Pixel ratio (или “плотность пикселей”) — это отношение физического количества пикселей на экране устройства к логическим пикселям. Например, на экране с высоким pixel ratio, таком как retina-дисплей, каждый логический пиксель отображается несколькими физическими пикселями. Это приводит к тому, что изображения и текст на таких экранах выглядят более чёткими и деталированными.

Для обычных дисплеев, где pixel ratio равен 1, каждый логический пиксель отображается одним физическим пикселем. Для retina-экранов с pixel ratio 2, один логический пиксель будет отображаться как два пикселя по горизонтали и два пикселя по вертикали (итого 4 физического пикселя для одного логического).

Почему это важно в PlayCanvas

Когда создаются приложения для мобильных устройств, веб-браузеров или любых других платформ, важно учитывать различие в плотности пикселей между экранами. В случае с PlayCanvas это влияет на несколько ключевых аспектов:

  • Отображение текстур: Текстуры, созданные для экранов с низким pixel ratio, могут выглядеть размытыми на устройствах с высоким pixel ratio.
  • Качество шрифтов: На дисплеях с высокой плотностью пикселей шрифты, если они не адаптированы под такой экран, могут выглядеть размазанными.
  • Производительность: Для обработки высокого разрешения на экранах с большим pixel ratio потребуется больше вычислительных ресурсов и памяти, что может повлиять на производительность.

Как узнать Pixel Ratio в PlayCanvas

В PlayCanvas можно легко получить значение pixel ratio через объект window.devicePixelRatio. Этот параметр всегда возвращает число, которое и является текущим значением плотности пикселей.

Пример:

var pixelRatio = window.devicePixelRatio;
console.log('Текущий pixel ratio: ' + pixelRatio);

Для обычных экранов это значение будет равно 1, а для retina-экранов — 2 или выше.

Адаптация графики для разных экранов

Для корректной работы графики на различных устройствах необходимо учесть pixel ratio при рендеринге сцены. Один из способов решения этой задачи — это использование масштабирования текстур и шрифтов.

  1. Масштабирование текстур

    Чтобы текстуры выглядели чёткими на экранах с высоким pixel ratio, их нужно создавать с большим разрешением. В PlayCanvas можно программно изменить размер текстуры в зависимости от pixel ratio.

    Пример:

    var texture = new pc.Texture(graphicsDevice, {
    width: 1024 * window.devicePixelRatio,
    height: 1024 * window.devicePixelRatio,
    format: pc.PIXELFORMAT_R8_G8_B8_A8
});

    В этом примере текстура будет автоматически увеличена в два раза для экранов с pixel ratio 2. Это позволит избежать размытия и обеспечит её чёткость на таких устройствах.

  2. Масштабирование UI-элементов

    При работе с UI также важно масштабировать элементы в зависимости от pixel ratio, чтобы обеспечить хорошее отображение на всех устройствах. PlayCanvas предоставляет API для работы с размерами и позициями UI-элементов, что позволяет автоматически изменять их в зависимости от плотности пикселей.

    Пример:

    var element = this.entity.element;
element.width = 100 * window.devicePixelRatio;
element.height = 50 * window.devicePixelRatio;

    В данном примере элемент будет масштабироваться в зависимости от pixel ratio, что сделает его более чётким на дисплеях с высокой плотностью пикселей.

  3. Рендеринг с учётом pixel ratio

    В случае с рендерингом 3D-сцен, когда pixel ratio высокий, можно повысить разрешение рендеринга, чтобы картинка оставалась чёткой. Это делается путём изменения размера холста (canvas), на котором происходит рендеринг.

    Пример:

    var canvas = app.graphicsDevice.canvas;
canvas.width = window.innerWidth * window.devicePixelRatio;
canvas.height = window.innerHeight * window.devicePixelRatio;

    С помощью этого кода можно изменить размеры холста, чтобы рендеринг сцены происходил с учётом высоких плотностей пикселей.

Работа с текстами на retina-экранах

Для текстовых элементов на retina-экранах важно увеличивать разрешение шрифта и его рендеринг. Использование встроенных шрифтов в PlayCanvas также можно адаптировать для различных типов экранов.

Пример улучшения качества шрифтов:

var text = new pc.ElementComponent(this.entity);
text.fontSize = 20 * window.devicePixelRatio;

Это позволит тексту отображаться чётко даже на экранах с высокой плотностью пикселей.

Преимущества и недостатки

  • Преимущества: Повышение плотности пикселей позволяет достичь более чёткого и детализированного изображения на экранах с высокой плотностью пикселей, что улучшает визуальное восприятие.
  • Недостатки: Увеличение разрешения текстур и рендеринга требует дополнительных вычислительных ресурсов и памяти, что может повлиять на производительность приложения, особенно на устройствах с ограниченными ресурсами.

Заключение

Работа с pixel ratio в PlayCanvas — это неотъемлемая часть разработки приложений и игр, ориентированных на широкий спектр устройств с различной плотностью пикселей. Учитывая особенности retina-экранов, необходимо адаптировать графику, текстуры, шрифты и рендеринг сцены для обеспечения высокой чёткости и производительности на всех устройствах.

Оглавление