Skia renderer что это
Анализ рендеринга через Skia Debugger: как можно найти самые дорогие для отрисовки элементы
Доброго дня, недавно я решал проблему притормаживания скролла на страницах Почты Mail.Ru. Особенно эта проблема была заметна на retina-дисплеях. После простого анализа я пришел к выводу, что одна из основных проблем — это медленная отрисовка страницы.
В этой статье я расскажу, как можно применять инструмент Skia Debugger, входящий в набор инструментов Chrome, для пошагового анализа процесса отрисовки страницы, а также как с его помощью можно получить данные о том, сколько времени занимает отрисовка каждого элемента.
Как и многие подобные проблемы оптимизации, данную проблему можно решить множеством способов. Я взялся за оптимизацию рендеринга, так как на нее затрачивалось значительное количество времени. Тем самым, я достаточно быстро смог бы получить прирост производительности и, соответственно, улучшить плавность скролла, ускорив отрисовку.
В начале я решил посмотреть, сколько времени занимает отрисовка страницы. Для этого можно использовать настройку devtools “Enable continuos page repainting”. Данная опция заставляет браузер постоянно перерисовывать страницу без каких-либо действий пользователя. В этом режиме также отображается панель со временем отрисовки страницы. Про эту и другие возможности devtools отлично рассказано в этой статье, так что я не буду заострять внимание на ней. Скажу лишь, что после снятия замеров оказалось, что анализируемая страница на ретине рендерится порядка 100 миллисекунд, что и создает притормаживания при скролле страницы. Данные, которые я могу посмотреть при записи timing’а в devtools, были не очень информативны, так как они содержали только время отрисовки страницы целиком, а мне нужно было найти виновника проблем.
Поэтому я стал искать, какой компонент браузера отвечает за отрисовку, и какие логи смогут помочь мне понять, что же тормозит. Начал я с изучения этой статьи и архитектуры Chromium, которая доступна в открытом доступе и концептуально не отличается от архитектуры Chrome.
В этих статьях меня интересовало, какой компонент отвечает за рендеринг и какие логи он предоставляет. Из глав с описанием графических компонентов я узнал, что в основном вся работа лежит на библиотеке Skia. К моей радости, для нее был разработан отладчик Skia Debugger, который, судя по скринам на сайте проекта, был мне необходим. Но, к сожалению, его установка была для меня нетривиальной задачей (нужно было собрать сам отладчик и пересобрать Chrome).
Запустив браузер с этим параметром, переходим по адресу chrome://tracing. Вам должна отобразиться следующая вкладка:
Открываем еще одну вкладку со страницей, которую мы хотим проанализировать. В моем случае это была страница списка писем. Возвращаемся обратно к вкладке chrome://tracing и нажимаем Record, должен открыться попап. В нем нужно выбрать из списка пункт “Frame Viewer” и нажать на Record. После этого начнется запись, и вы можете выполнить какие-либо действия на анализируемой вкладке, рекомендую держать открытой не более одной вкладки, так как буфер записи очень ограничен, и в него влезает сравнительно небольшой кусок данных.
Как только вы выполнили интересующие вас действия, возвращаемся обратно к вкладке tracing и нажимаем Stop. После этого вам построится диаграмма, содержащая информацию о том, что происходило в системе при записи. Все данные сгруппированны по процессам браузера. Меня интересует процесс со списком сообщений, его легко найти по заголовку. В этом процессе смотрим раздел сс::Picture, в котором кружочками отображены итоговые отрисованные браузером изображения.
Найдем среди них одно, которое содержит отрисовку страницы целиком. Теперь в нижней части экрана отобразилось окно с картинкой страницы. В правом верхнем углу отображена диаграмма, в которой показано, сколько суммарного времени занимает каждая функция отрисовки. Слева отображена временная шкала с последовательностью отрисовки элементов страницы и затраченное на каждое из них время.
Пролистав временную шкалу, я нашел, что основной виновник столь долгой отрисовки страницы – контейнер списка сообщений с тенью. Данный элемент занимает порядка 45% всего времени отрисовки страницы.
После того как я заменил box-shadow на обычный border и заново записал страницу, я увидел, что количество времени на отрисовку уменьшилось c 45% до 6.5%, а также, что теперь используется уже другая функция Skia.
Ускорение отрисовки также подтвердилось после просмотра оптимизированной страницы в режиме “Enable continuos page repainting”.
Многим может показаться, что проблема с box-shadow была очевидна, и ее можно было бы найти, просто изменив стили на страницы через devtools. Но мне в этой статье хотелось рассказать о том, как можно применять альтернативные инструменты. Как с их помощью можно понять, в какой последовательности рисуются элементы на странице и сколько конкретно времени это занимает.
Данный инструмент обладает куда большими возможностями, которые я не описал в статье, так как про них прекрасно рассказано в видео, про которое я упоминал ранее.
Понимание процессов протекающих в браузере — очень важные знания, которые необходимы для эффективной оптимизации веб-приложений. Но для оптимизации также необходимы инструменты, которые позволят нам измерить ускорение, которое дала та или иная оптимизация, а также понять причину проблемы.
«Если речь идет о производительности, не может быть никаких «вероятно». Без измерения производительности вы никак не сможете точно узнать, помогли ваши изменения программе или навредили».
Стив Макконел «Совершенный код» 2-е. издание, стр. 579 «Стратегии оптимизации кода»
Определение наиболее тяжелых для отрисовки элементов — это важный шаг по оптимизации веб-приложения. Полученные знания по новым возможностям Chrome помогут не только отлаживать и находить узкие места отрисовки, но также понимать, как любой из компонентов страницы влияет на весь процесс рендеринга потока в целом. О других возможностях данного инструмента я постараюсь рассказать в следующих статьях.
Включите OpenGL Skies для лучшей производительности в Android-играх
Включите OpenGL Skies для лучшей производительности в Android-играх
Включите OpenGL Skia для лучшей производительности в играх и интерфейсе Android
Игры на мобильных платформах (Android и iOS) достигли невероятного роста всего за несколько лет. Если сначала игры были довольно простыми, как, например, 80 PC, эти игры стали чрезвычайно сложными.
Игры на Android или iOS почти такие же, как на вашем ПК или консолях.
Поскольку игры на мобильных устройствах в настоящее время очень сложны, потребление ресурсов также увеличилось. Если у топ-телефонов нет проблем с запуском последних названий, более старые устройства в значительной степени нахмурились от резких изображений, которые приводят к неприятному опыту.
У большинства геймеров нет самых горячих телефонов.
Поскольку не у всех есть лучшие телефоны, Google нашел решение предложить небольшое повышение производительности тем, у кого слабые телефоны. Этот параметр повышает производительность игр при условии, что у нас есть ОС Oreo Android или новее. В старых версиях Android этот параметр недоступен.
Переход от графического движка OpenGL к OpenGL Skia.
Графический движок OpenGL Skia можно активировать с помощью:
Настройки / Параметры разработчика / Воспроизведение с аппаратным ускорением / Установка графического процессора… / выберите OpenGL Skia здесь
Бонус, Настройки кэша и Ускорение скорости интерфейса.
За исключением настройки, которая активирует графический движок OpenGL Skia, есть два важных параметра, которые заставят ваш Android двигаться быстрее.
1. Очистить кеш из: Настройки телефона / Хранение и память / Данные кэширования. Кэшированные данные больше не полезны, поэтому вы можете удалить их без проблем.
Учебники нравится:
Оптимизация рендера под Mobile, часть 2. Основные семейства современных мобильных GPU
Приветствую, дорогие любители и профессионалы, программисты графики! Приступаем ко второй части нашего цикла статей про оптимизацию рендера под Mobile. В этой части мы будем рассматривать основные семейства GPU, представленные у игроков на Mobile.
Унифицированные или специализированные шейдерные ядра
В эпоху ранних мобильных видеокарт, до распространения комплексных эффектов, существовала точка зрения, что для фрагментных шейдеров достаточно поддержки вычислений на пониженной точности. Ведь в типичном режиме дисплея применяется 8, а то и меньше бит на каждый канал цвета. Такая точка зрения привела к использованию специализированных шейдерных ядер. Для вершин использовались ядра, оптимизированные для матричных преобразований на повышенной точности FP24/FP32(highp). Для пикселей — ядра, более эффективно работающие с пониженной точностью FP16 (mediump). При этом highp на них не поддерживался. На первый взгляд, такая специализация позволяет добится более рационального распределения транзисторов на чипе. Однако, на практике это приводит к трудностям при разработке комплексных эффектов, а также при использовании текстур большого разрешения. Кроме того, специализация ядер может приводить к vertex/fragment bottleneck. Таким термином называют ситуацию, когда из-за несимметричной нагрузки на вершинные и пиксельные ядра часть ядер «простаивала».
Поэтому в современных архитектурах применяются унифицированные ядра. Такие ядра могут брать на себя вершинные, пиксельные и другие вычислительные задачи в зависимости от нагрузки.
Векторный (SIMD) или скалярный набор инструкций
В духе описанного выше стремления экономить на транзисторах, специализируя ядра, происходил и дизайн набора шейдерных инструкций. Большинство типичных преобразований для трехмерной графики оперируют 4-х компонентными векторами. Поэтому ранние GPU работали именно с такими операндами. Если же в коде шейдера содержались разнородные скалярные операции, которые не удавалось упаковать в векторные операции оптимизатором, часть вычислительных мощностей не задействовалась. Это явление можно проиллюстрировать так:
Имеется шейдер, осуществляющий распространенную операцию Multiply Add: умножить 2 операнда, а затем добавить третий. При компиляции на условной векторной архитектуре (Vector ISA = Vector Instruction Set Architecture) мы получаем одну векторную инструкцию vMADD, выполняющуюся 1 такт. На условной скалярной архитектуре мы получаем 4 скалярные инструкции, которые благодаря усовершенствованному конвейеру также выполняются за 1 такт. Теперь рассмотрим усложненный шейдер, выполняющий 2 операции, но над 2-х компонентными операндами.
В случае векторной архитектуры получаем уже 2 инструкции, требующие 2 такта на выполнение. При этом над компонентами .zw действия не производятся, и вычислительные мощности простаивают. В случае скалярной архитектуры эти же операции можно упаковать в 4 скалярных sMADD, выполняющихся за тот же 1 такт. Таким образом на скалярной архитектуре за счет усовершенствования конвейера достигается большая плотность вычислений. Тем не менее, как будет показано ниже, векторная ISA по-прежнему актуальна. А значит, есть смысл применять техники векторизации шейдерного кода. Они позволяют добиться повышенной производительности на видеокартах с векторными ISA. В то же время, как правило, это не вредит быстродействию на более современных скалярных ISA.
Опираясь на приведенные характеристики, рассмотрим распространенные в наше время семейства мобильных GPU. Начнем с наиболее часто встречающегося семейства. Многие знают, что речь идет о видеокартах Mali от британской компании ARM. Непосредственно производством чипов ARM не занимается, предлагая вместо этого интеллектуальную собственность. Как и другие мобильные видеокарты, Mali является составной частью System on Chip(SoC), т.е. работает с общей для CPU и GPU памятью и шиной.
Mali Utgard
В 2008 году на свет появились первые представители архитектуры Mali Utgard, актуальной вплоть до сегодняшнего дня. Эти видеокарты именуются по схеме Mali-4xx MPn, где xx — номер модельного ряда, а n — количество фрагментных ядер. В Mali Utgard шейдерные ядра специализированные, и во всех моделях устанавливалось только 1 вершинное ядро.
Другие особенности архитектуры Mali Utgard:
Если имеется готовность отказаться от этой аудитории, достаточно установить требование поддержки OpenGL ES 3.0 в AndroidManifest.xml:
Кроме Mali Utgard, распространенных мобильных GPU без поддержки OpenGL ES 3.0 на данный момент нету.
Отдельного внимания заслуживает использование текстур большого разрешения на Mali Utgard. Десять бит мантиссы при точности mediump не хватает для качественного текстурирования с разрешением текстур более 1024 на одну из сторон. Однако, несмотря на поддержку только mediump точности вычислений во фрагментных ядрах Mali Utgard, можно получить fp24 точность текстурных координат при использовании varying напрямую.
В качестве бонуса на некоторых архитектурах такой подход позволяет осуществлять prefetch текстурного содержимого до выполнения fragment shader, что минимизирует stalls при ожидании результатов текстурных выборок.
Mali Midgard
На смену Mali Utgard пришла архитектура Mali Midgard. Существует несколько поколений этой архитектуры с названиями вида Mali-6xx, Mali-7xx и Mali-8xx. Несмотря на 8-летний возраст, Mali Midgard можно назвать современной архитектурой, обеспечивающей поддержку большинства новых фич:
Еще одной особенностью Mali Midgard является технология Forward Pixel Kill. Расчет каждого пикселя производится в отдельном потоке фрагментного ядра. Если во время выполнения потока становится известно, что результирующий пиксель будет перекрыт непрозрачным пикселем другого примитива, поток завершается преждевременно и освободившиеся ресурсы используются для других вычислений.
Mali Bifrost
Следующая за Midgard архитектура Bifrost выделяется переходом к скалярной ISA. По сравнению с предыдущей архитектурой увеличено максимальное количество ядер (с 16 до 32), а также поддерживается улучшенный интерфейс с CPU, позволяющий осуществлять когерентный доступ к общей памяти: изменения содержимого памяти CPU/GPU сразу становятся «видны» друг другу несмотря на кэши, что позволяет упростить синхронизацию.
Из неофициального
Предпринято немало попыток обратного инжиниринга видеокарт Mali с целью создания Open Source драйверов под Linux. Труды самоотверженных ребят, пытающихся это осуществить, позволяют взглянуть на недокументированные особенности видеокарт Mali. Так, в проекте PanFrost есть disassembler для Mali Midgard/Bifrost, при помощи которого можно познакомится с набором шейдерных инструкций (открытой официальной информации на эту тему нет).
Adreno
Вторым по распространенности семейством мобильных GPU является Adreno. Эта видеокарта устанавливается на SoC, известный под брендом Snapdragon, от американской компании Qualcomm. Snapdragon устанавливается в топовых смартфонах современности от Samsung, Sony и др.
Актуальными видеокартами Adreno являются семейства cерий 3xx — 6xx. Все эти серии объединяют следующие особенности:
Adreno Tile Based Rendering
На видеокарты Adreno установлена «традиционная» GPU память, называемая GMEM. Применяются объемы от 128kb до 1536kb. Это позволяет использовать больший размер тайлов по сравнению с архитектурами других разработчиков мобильных GPU. На Adreno размер тайлов динамический и зависит от используемого формата цвета, буфера глубины и трафарета. При работе в режиме Immediate Mode рендер происходит в системную память.Существует GL ES расширение, позволяющее указать предпочтительный режим: QCOM_binning_control. Однако, последние рекомендации от Qualcomm предлагают полностью полагаться на драйвера GPU, которые сами определяют наиболее предпочтительный режим для сформированного приложением командного буфера.
При работе в режиме TBR Adreno делает 2 вершинных прохода:
Freedreno
В отличие от ARM и Imagination Technologies, Qualcomm неохотно делится подробностями внутреннего устройства своих GPU. Однако, благодаря усилиям «обратного инженера» Роба Кларка, многое можно узнать из проекта Freedreno, open source драйвера Adreno для Linux.
Rob Clark, автор Freedreno
PowerVR от Imagination Technologies
Imagination Technologies — британская fabless компания, знаменитая разработкой GPU для продукции Apple. Эту роль компания выполняла вплоть до появления iPhone 8/X, в которых используются внутренние разработки Apple. Хотя по оставшимся без изменений рекомендациям по оптимизациям для этих чипов, а также по наличию патентных исков к Apple от Imagination можно предполагать, что Apple продолжила развивать архитектуру PowerVR — оригинальную разработку от Imagination. В начале 2020 года Apple вернулась к практике лицензирования у Imagination Technologies. Кроме устройств с iOS/iPadOS, видеокарты PowerVR устанавливаются в большое количество смартфонов и планшетов на базе Android.
Рассмотрим семейства видеокарт PowerVR, которые до сих пор можно встретить у пользователей.
PowerVR SGX
Первые видеокарты PowerVR SGX появились в далеком 2009-м году. Существует несколько поколений этой архитектуры: Series5, Series5XT и Series5XE. Apple использовала эти GPU вплоть до iPAD 4/iPhone 5/iPOD Touch 5. Можно привести такие особенности SGX:
Lowp точность
PowerVR SGX — единственные актуальные мобильные GPU с аппаратной поддержкой
lowp. Более новые модели PowerVR, а также все современные GPU других вендоров фактически используют точность mediump. Использование
lowp на PowerVR SXG позволяет добиться более высокой плотности вычислений (больше операций за такт). При этом операция swizzle (перестановка компонент вектора) для lowp, в отличие от других точностей, не является бесплатной. Эта особенность, а также узкий диапазон значений, который предоставляет lowp ([-2,2]) ограничивает сферу ее применения. При этом неудачно поставленный lowp, приводящий к артефактам на семействе SGX, не будет замечен на всех остальных видеокартах, где фактически будет использоваться точность mediump. По этой причине стоит рассмотреть отказ от использования lowp в шейдерах.
Зависимые текстурные выборки (dependent texture reads)
Как известно, операции сэмплирования текстур являются наиболее медленными из-за необходимости ожидания результатов чтения памяти. В случае мобильных SoС речь идет об общей системной памяти с CPU. Для уменьшения количества обращений к медленной памяти используются текстурные кеши. Чтобы не было простоя в начале растеризации с использованием текстуры, есть смысл закешировать используемые участки заранее. Если фрагментный шейдер использует текстурную координату, передаваемую из вершинного шейдера без изменений, то необходимый для кэширования участок текстуры можно определить до выполнения фрагментного шейдера. Если же фрагментный шейдер меняет текстурную координату либо вычисляет ее, используя данные из другой текстуры, то сделать это не всегда возможно. В результате выполнение фрагментного шейдера может замедлиться. Видеокарты PowerVR SGX особенно «болезненно» реагируют на такой сценарий. При этом даже использование перестановки компонент текстурной координаты (swizzle) приводит к dependent texture read. Приведем пример shader program без dependent texture read.
vertex program
fragment program
fragment program
PowerVR Rogue
Дальнейшее развитие видеокарты PowerVR получили в архитектуре Rogue.Существует несколько поколений этой архитектуры: от Series6 до Series9. У всех PowerVR Rogue есть такие особенности:
PowerVR TBDR
Как и во всех распространенных мобильных GPU, в PowerVR используется тайловый конвейер. Но в отличие от конкурентов, Imagination пошла дальше и реализовала отложенную растеризацию примитивов, позволяющую пропускать шейдинг невидимых пикселей независимо от порядка отрисовки. Такой подход получил название Tile Based Deferred Rendering,а процесс устранения невидимых пикселей — Hidden Surface Removal (HSR).
Hidden Surface Removal
Рекомендуется рисовать непрозрачную геометрию до прозрачной и не использовать Z Prepass, который в случае видеокарт PowerVR в большинстве сценариев приведет к лишней работе. Однако несколько подряд идущих прозрачных пикселей, перекрывающих друг друга, полностью шейдятся для получения корректного цвета с учетом смешивания. Последний же прозрачный пиксель может быть отброшен, если за ним следует непрозрачный пиксель.
Открытость Imagination Technologies
Создатели PowerVR предоставили в открытый доступ больше документации по сравнению с другими разработчиками GPU. Детально описана архитектура графического конвейера, а также набор инструкций для архитектуры Rogue. Существует удобный инструмент PVRShaderEditor, позволяющий на лету получать профилировочную информацию по шейдеру, а также его дизассемблерный листинг для Rogue.
Несмотря на ограниченное присутствие видеокарт PowerVR в среде устройств на базе Android, есть смысл изучать их архитектуры для грамотного программирования графики под iOS.
Immediate mode mobile GPUs
Мы рассмотрели наиболее распространенные семейства мобильных видеокарт. Во всех этих семействах применялась тайловая архитектура рендера. Однако существуют мобильные видеокарты, в которых используется и традиционный immediate mode подход. Приведем некоторые из них:
Распределение различных семейств мобильных GPU у наших игроков
Приведем статистику по мобильным GPU, собранную у наших игроков на конец 2019 года:
Ниже раскроем сегмент «Others»
Исходя из этих данных, посмотрим на распределение GPU с точки зрения их основных особенностей.
Векторные ALU (arithmetic logic unit) устаревают и заменяются скалярными. На сегодня основная масса мобильных GPU с векторным набором инструкций — это Mali Midgard, который можно считать средним по производительности. Т.к. векторизация, как правило, не замедляет выполнение на скалярных ALU, стоит рассматривать векторизацию как актуальный прием оптимизации шейдеров под mobile.
Специализированные шейдерные ядра устарели и заменяются унифицированными. Vertex Bottleneck на скелетном меше более не страшен. Специализированные ядра используются только на семействе Mali-4xx (Utgard). Напомним, что эти GPU поддерживают только OpenGL ES 2.0. У нашей аудитории их около 3.5%.
И наконец, подавляющее количество мобильных GPU используют тайловый подход. Immediate Mode стал маргинальным и быстро вытесняется вместе с видеокартами, его применяющими. Доля immediate mode GPUs у наших игроков составляет около 0.7%.