Визуально понять? ECharts 4.0 — самое полное техническое руководство

Байду SVG ECharts WebGL

16 января 2018 г. команда Baidu EFE официально выпустила последнюю основную версию 4.0 своего известного продукта с открытым исходным кодом ECharts.В новой версии значительно улучшены производительность, функции, простота использования и другие аспекты продукта, что свидетельствует о присутствии Baidu в В области визуализации грядет еще одна важная веха.

31 марта 77-й Салон технологий Baidu, организованный Центром разработчиков Baidu, организованный Geekbang Technology и спонсируемый Инновационным центром Baidu, пригласил Зу Мина, старшего технического менеджера Baidu, Су Шуанга, старшего инженера по исследованиям и разработкам Baidu, и старший инженер отдела исследований и разработок Baidu Чжан Вэньли, старший инженер отдела исследований и разработок Baidu Ван Цзюньтин, старший инженер отдела исследований и разработок Baidu Шэнь И и старший инженер отдела исследований и разработок Baidu Ли Дэцин, шесть лекторов, начиная с четыре аспекта функций продукта ECharts, внедрение технологий, практика визуализации и создание сообщества с открытым исходным кодом и т. д. Всестороннее введение в то, как лучше использовать ECharts, чтобы пользователи могли лучше понять данные и устроить праздник для аудитории, чтобы понять ECharts глубоко.

Дорога с открытым исходным кодом ECharts

Зу Мин, старший технический менеджер Baidu, выступил со вступительной речью. Он впервые представил историю разработки проекта Baidu с открытым исходным кодом ECharts. За четыре года с выпуска ECharts 1.0 в июне 2013 г. до выпуска ECharts 4.0 в январе 2018 г. проект ECharts накопил итерации: было опубликовано 64 версии, а количество подписчиков на Github достигло 26 530, что привлекло внимание и широкое признание со стороны отраслевых властей.

В июне 2013 года ECharts выпустила версию 1.0, а в июне 2014 года ECharts выпустила версию 2.0, которая улучшила производительность в 3+ раза по сравнению с версией 1.0, добавила полный график под прямым углом, поддерживала крупномасштабные данные и добавила временную шкалу. , информационная панель, воронкообразная диаграмма, карта мутаций и поддержка расширения svg; затем, в соответствии с тенденцией развития фронтенд-технологий и потребностями пользователей, команда провела значительный рефакторинг и оптимизировала общую техническую архитектуру ECharts и выпустила ее в Январь 2016 г. ECharts 3.0, 3.0 значительно улучшили функциональность, производительность, включая стиль продукта и взаимодействие.

16 января этого года родилась версия ECharts 4.0. Восемь новых функций вывели продукт на более высокий уровень. ECharts 4.0 надеется создать продукт, который позволит большему количеству людей наслаждаться визуализацией данных в большем количестве сценариев. Ценность помощи людям в изучении мира и понять правду.

Самая большая изюминка ECharts 4.0 заключается в том, что он предлагает 8 новых функций, которые можно назвать «черной технологией»:

  • Десятки миллионов возможностей рендеринга визуализации данных
  • Двойной движок SVG + Canvas
  • Новый Санберст
  • Разделение данных и стилей
  • Плоские элементы конфигурации
  • Поддержка специальных возможностей
  • Поддержка апплета WeChat
  • Надстройка PowerPoint

Будущее электронных карт

Недавно Apache Foundation, всемирно известное сообщество открытого исходного кода, объявило, что «проект Baidu с открытым исходным кодом ECharts вошел в инкубатор Apache единогласным голосованием». Это первый проект Baidu, вошедший в ведущее международное сообщество открытого исходного кода, и это также означает, что Baidu Open Source официально вышла на скоростную полосу разработки открытого исходного кода. В будущем команда ECharts продолжит поддерживать и надеется, что больше людей присоединятся, чтобы предоставить разработчикам лучший опыт.

Анализ основных функций ECharts 4.0

Успех и широкое применение ECharts неотделимы от его подрывного функционального дизайна и технических характеристик. Су Шуанг и Чжан Венли, старшие инженеры отдела исследований и разработок ECharts, взяли новые технические характеристики ECharts 4.0 в качестве отправной точки для представления сценариев использования и принципов проектирования новой версии с точки зрения рендеринга больших данных, наборов данных, кроссплатформенности, безбарьерный доступ и другие технические особенности.

Рендеринг больших объемов данных

В этой статье рендеринг больших объемов данных относится к рендерингу и взаимодействию от тысяч до миллионов данных в браузере.ECharts 4.0 приложил большие усилия для оптимизации этих вещей. Визуализация данных использует браузеры как важный метод вывода, но браузеры имеют определенные ограничения в производительности. В основном в следующих аспектах:

  • Продолжительность выполнения программы. В браузере выполнение JS блокирует рендеринг и реакцию на взаимодействие с пользователем.
  • использование памяти. Работа с большими данными может привести к сбою браузера, или он может работать нестабильно из-за чрезмерной нагрузки на сборщик мусора.
  • загрузка сети. Для 100M гигабитных данных размер файла может составлять десятки и даже сотни МБ, при отображении в Интернете рендеринг не может быть начат до тех пор, пока не будут загружены все данные.

ECharts провел ряд оптимизаций для них, в том числе: оптимизацию на основе характеристик сцены, оптимизацию на уровне программы, сенсорную оптимизацию пользователя и оптимизацию загрузки:

Оптимизация на основе характеристик сцены

На примере упрощения графики описывается, как ECharts оптимизируется на основе характеристик сцены. На рисунке ниже показан график в виде линии K. Сложная структура каждого графика требует больше времени для визуализации, чем простые графики, что приводит к интерактивным зависаниям при наличии больших объемов данных. Когда фактическое масштабирование в определенной степени, упрощение этой графики до линий значительно повысит эффективность рендеринга.

Оптимизация на уровне программы

В основном из структуры программы и выражения кода, чтобы оптимизировать эффективность программы.

Например, при объединении путей, при работе с большими объемами данных в основном используется Canvas. API, предоставляемый Canvas, является относительно низкоуровневым, и его необходимо абстрагировать для создания сложных и простых в обслуживании приложений. Базовая библиотека ECharts, Zrender, абстрагирует визуализированные и управляемые объекты в графические элементы объектно-ориентированным способом, и каждый графический элемент отвечает за собственную визуализацию. Недостаток абстракции в том, что она приносит в жертву определенную производительность: при рендеринге, поскольку каждый рендеринг графики должен сначала вызывать Canvas API для установки стиля, а затем строить путь, частое переключение состояний приносит потерю производительности. Таким образом, для сценариев с большими данными вы можете комбинировать графические элементы, задавать стили один раз и строить все пути.

Кроме того, что касается использования памяти, время GC программы слишком велико, что может привести к зависанию рендеринга.

Как показано на снимке экрана ниже, браузеру потребовалось 5 миллисекунд для выполнения 10-мегабайтного Minor GC, что не звучит долго, на самом деле, если он может гарантировать, что он не будет зависать, и допустимое время для каждого кадра составляет всего несколько десятков миллисекунд, то время потребления GC весьма значительно. Метод оптимизации может заключаться в повторном использовании объектов и сокращении частого повторного использования больших объектов в старом поколении. Вы также можете использовать типизированный массив или массив фиксированной длины, чтобы уменьшить использование памяти и ее перераспределение. Но беда в том, что нужно самому управлять длиной массива, расширять емкость и вручную сводить многомерный массив к одному измерению.

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

Оптимизация восприятия пользователей

См. блок-схему рендеринга ECharts3 ниже. Крайний левый — это исходные данные. После процесса слева направо данные обрабатываются, размещаются, визуализируются и, наконец, отображаются на экране. Если есть взаимодействие, вам нужно заново скомпоновать, повторно отрендерить и повторить процесс. В условиях больших данных время завершения всего процесса является значительным. Когда время трудно сократить, распространенной идеей является потоковая передача или прогрессивный инкрементный рендеринг.

Ниже приведена конвейерная диаграмма ECharts4. Крайний левый — исходные данные, которые будут автоматически сегментированы ECharts.Каждый фрагмент проходит полный процесс рендеринга слева направо и после завершения напрямую визуализируется в SVG или Canvas. Затем перейдите вниз по временной шкале, и следующий фрагмент продолжится. Таким образом, задача разбивается на части, а не блокируется в одном блоке, чтобы пользователи чувствовали, что задержки нет.

Оптимизация загрузки данных

Для 100-гигабитных данных размер файла может составлять десятки или даже сотни МБ.

Метод оптимизации, прежде всего, может использовать типизированный массив для непосредственного сохранения в виде двоичного файла вместо текстового файла, что может значительно уменьшить размер файла данных. ECharts уже поддерживает передачу данных напрямую с помощью типизированного массива.

Кроме того, если он отображается в Интернете, не рекомендуется начинать рендеринг после того, как все данные будут загружены.Поскольку ECharts поддерживает инкрементный рендеринг, пользователи могут загружать файл сегментами, а загруженный файл напрямую передается в ECharts для рендеринга. .

набор данных

Наборы данных предоставляют новую возможность ввода данных: непосредственно передавать данные в форме двумерной таблицы (двумерный массив или массив объектов), а затем настраивать визуальное сопоставление (т. е. какие строки и какие столбцы соответствуют каким). оси, цвета и т. д.), чтобы получить результаты визуализации. Это больше соответствует идее работы по производству и исследованию визуализации данных: на основе фрагмента данных измените правила сопоставления и найдите информацию. Это также облегчает раздельное управление данными и стилями, тем самым облегчая разработку программы.

Кроссплатформенный графический интерфейс

Что такое кроссплатформенный графический интерфейс?

Для 2D-графического интерфейса он обычно включает в себя некоторые графические элементы, такие как прямоугольник, круг, путь и т. д., а графические элементы включают в себя атрибуты, а графические элементы и элементы могут комбинироваться друг с другом, обрабатывать маски и т. д. Когда мы говорим, что ECharts поддерживает кроссплатформенность, какие платформы мы имеем в виду? Мы рассмотрели следующие аспекты: Во-первых, браузер, который отображает на основе различных методов, таких как Canvas, SVG и VML. В этом сценарии с разными разрешениями мы можем захотеть использовать разные методы макета. Этот способ позволяет использовать пространство более разумно. Он также совместим со специальными платформами, такими как рендеринг на стороне сервера и апплет WeChat. Кроме того, также выполняются настройки доступности для устройств чтения, которыми пользуются слепые.

Зачем нужен кроссплатформенный графический интерфейс?

Пользователю все равно, сделана диаграмма с помощью Canvas или SVG. Для него важнее всего хороший опыт, он хочет только иметь возможность видеть нормальные графики и иметь хороший опыт графического рендеринга результатов. Что касается того, как была визуализирована графика, его это не волновало. Для разработчиков ему нужно внедрить все платформы одну за другой.

Исходя из такого сценария, необходима совместимость с разными платформами, а некоторые устройства на разных платформах имеют некоторые различия в производительности.

Решение ECharts - ZRender предоставляет три средства визуализации

ECharts использует базовый рендерер ZRender. ZRender предоставляет три средства визуализации, а именно Canvas, SVG и VML. Он обеспечивает независимый от платформы графический интерфейс рендеринга вверху и инкапсулирует алгоритмы реализации, совместимые с различными платформами, внизу.

1. Как поддерживать несколько методов рендеринга?

Сяньчжэ, старший фронтенд-инженер Baidu, привел пример. Сначала объявите прямоугольник, вам нужно только сообщить ему координату X, координату Y, информацию о ширине и высоте, его механизм рендеринга будет выполнять различные реализации нижнего слоя рендеринга в соответствии с конкретной платформой рендеринга, нижний слой представляет собой класс с именем PathProxy, он будет нести ответственность за запись основных команд рисования. В разных рендерерах нижний слой реализован по-разному. Таким образом, можно использовать не только унифицированный способ, но и выполнять рендеринг для разных рендереров. Это также имеет то преимущество, что, если предположить, что Web Worker используется для пакетного рендеринга, рендеринг также может быть реализован на основе этого массива.

2. Как поддерживать обработку событий

Чтобы у разных рендереров был одинаковый механизм обработки событий, мы привязываем события ко всему контейнеру диаграммы. То есть для SVG, VML мы не привязываем события к каждому элементу под его DOM-деревом. Таким образом, в Canvas реализован единый механизм обработки событий.

При определении того, на какой графический элемент будет реагировать событие, мы прокрутим список рендеринга в обратном порядке, то есть сначала определим, находится ли мышь на графике перед экраном. При оценке он сначала преобразует координаты мыши в графическую систему координат. Это связано с тем, что графика может быть масштабирована путем перемещения и поворота, и могут даже выполняться комбинированные преобразования между графикой и графикой. После преобразования мыши в графическую систему координат мы можем узнать относительную взаимосвязь между ними, а затем сделать грубую оценку на основе ограничивающей рамки, а затем сделать точную оценку на основе пути. Если мышь находится на графике, пусть график выполняет распределение событий и всплытие, если нет, оценивайте элементы, расположенные за экраном, один за другим.

3. Как частично обновляется рендеринг SVG

Canvas полностью перерисовывается при рендеринге, но это очень эффективно. Для SVG, например точечной диаграммы с тысячей точек, в DOM имеется тысяча соответствующих узлов. Было бы неэффективно удалять и повторно добавлять все элементы DOM в каждом кадре.

Поэтому мы поддерживаем список объектов рендеринга, сравниваем новый список объектов рендеринга с предыдущим кадром в каждом кадре, получаем список новых, измененных и удаленных объектов рендеринга, а затем корректируем узлы, связанные с DOM, в соответствии со списком.

4. Как оптимизировать эффективность рендеринга SVG

Взяв в качестве примера градиент, принят метод реализации мультиплексного определения градиента.

  • Определите класс для повторно используемых элементов в SVG

    • Градиенты, маски, тени и т. д. наследуют этот класс

  • Каждый объект градиента имеет общий узел DOM.

  • При обновлении объекта рендеринга

    • Проверьте, сгенерировал ли объект градиента узел DOM.

Если это так, установите для заливки или обводки URL-адрес, соответствующий идентификатору DOM.

Если нет, сгенерируйте новый DOM и укажите его в объекте градиента.

При обновлении объекта рендеринга

  • Пометить все градиенты как неиспользуемые перед рендерингом
  • При добавлении или обновлении объекта, если есть градиент, отметить его как использованный
  • Обновите свойства градиента (цвет, положение и т. д.)
  • После рендеринга неиспользуемый DOM градиента будет удален из него.

ECharts Solutions — поддержка адаптивного дизайна

ECharts поддерживает три метода позиционирования:

Пиксель, процент, таргетинг по описанию позиции

Кроме того, ECharts также реализует метод адаптивной компоновки, то есть диаграммы можно использовать в разных конфигурациях и макетах под разными разрешениями. Как это достигается, посмотрите на картинку справа внизу, она состоит из двух частей, одна — baseOption, другая — media. baseOption — это элемент конфигурации, который будет использоваться для всех разрешений, а media — это массив, каждый из которых включает конфигурацию, представляющую разрешение. Каждый элемент включает запрос и параметр.Запрос — это конфигурация для каждого разрешения, а параметр — какой элемент конфигурации использовать в этом разрешении. Запрос может включать ширину, высоту и соотношение сторон, а также может использовать максимальное и минимальное значения.

ECharts Solutions - Специальные платформы и специальное оборудование

Работа со специальными платформами

  • Судебная платформа
  • Совместимость с конкретными методами

Доступность

  • Создание описаний из содержимого диаграммы
  • Предоставьте разработчикам шаблоны для изменения

Для обеспечения доступности для устройств чтения вслепую W3C разработал набор стандартов для Спецификации доступного интернет-приложения. Его цель — сделать веб-контент и приложения доступными для большего числа людей с ограниченными возможностями. Для ECharts желаемый эффект состоит в том, чтобы генерировать данные о графе по графу, а описание пишет не пользователь, а автоматически генерируется по элементам его конфигурации. Он будет привязан к свойству aria-label, которое будет распознано и прочитано устройствами чтения вслепую. Тем не менее, есть также много трудностей: описание разных типов диаграмм отличается, описание различных величин и форм данных, сгенерированное описание должно соответствовать грамматическим спецификациям, необходимость краткого выражения содержания диаграммы и поддержки разные языки. Как это получилось в итоге? ECharts реализует набор методов на основе блоков шаблонов. Для разных типов диаграмм, объемов данных и форм данных используются разные шаблоны. Разные языки также могут настраивать шаблоны пользователями.

ECharts научит вас выбирать и создавать диаграммы

Основываясь на теории визуализации, спецификациях дизайна визуализации данных ECharts и опыте реализации проектов, Ван Цзюньтин, старший инженер по исследованиям и разработкам в Baidu, подробно объяснил, как выбрать правильный тип диаграммы визуализации в соответствии с различными потребностями и целями, а также как использовать диаграммы для правильного и обоснованного отображения данных. В сочетании с реальными отраслевыми примерами он обобщает методы и принципы проектирования работы по визуализации данных, чтобы помочь каждому получить лучшие эффекты представления данных.

Выберите правильный график

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

фокус

Используйте некоторые технические и дизайнерские приемы, чтобы сосредоточить внимание пользователя на наиболее важных областях визуализации.Вы можете использовать контрастные цвета, различные формы, изменения положения и добавление движения, чтобы сосредоточиться на ключевых данных.

разумно и уместно

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

Обеспечение пространственного баланса работ по визуализации

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

Например, разумная ширина и зазор между столбцами гистограммы должны быть не менее чем в два раза больше ширины одного столбца в качестве зазора между столбцами.

Следуйте привычкам и здравому смыслу

При использовании значков для отображения данных необходимо следовать некоторым визуальным привычкам для размещения или упорядочения данных, чтобы пользователи могли интерпретировать данные более правильно и быстро, и избегать некоторых методов отображения данных, противоречащих здравому смыслу.

Использовать эмоциональный и семантический резонанс

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

Фонетический резонанс цвета основан на изучении «эффекта Троупа».Сопоставление вещей фиксированного цвета с цветом с семантическим резонансом может эффективно повысить эффективность и точность чтения. Например, чтобы отобразить продажи киви, банана, апельсина и клубники, мы выбираем четыре цвета: зеленый, желтый, оранжевый и красный, которые соответствуют нашему восприятию цвета фруктов. Чтобы показать продажи четырех видов фруктов, нам нужно только быстро найти и прочитать данные по цвету.

Остерегайтесь, что графики могут «обмануть»

При создании и чтении визуализаций следует соблюдать осторожность, чтобы избежать неуместных представлений данных, которые вводят пользователей в заблуждение и заставляют неправильно интерпретировать данные.

Суммировать:

Вышеупомянутое содержание, в свою очередь, указывает, как выбрать подходящую диаграмму, как получить лучший метод отображения данных, как использовать психологию и привычки пользователя, обобщить некоторые улучшения отображения данных, улучшить взаимодействие с пользователем, а затем лучше интерпретировать Методы данных и рекомендации . Эти советы и рекомендации помогут вам сделать правильный выбор и разработать визуализацию в будущем.

Цвет темы

Кроме того, Ван Цзюньтин также поделился ценным опытом ECharts в разработке подбора цветов темы. В серии общих данных должно использоваться от пяти до шести цветов, а для соответствия подавляющему большинству сценариев использования цвета ECharts должны обеспечивать от восьми до двенадцати цветов для удовлетворения большинства потребностей. И, учитывая количество различных серий данных, чтобы получить лучший метод отображения на основе соответствия цветовой схеме, рекомендуется по очереди предоставлять соответствующую девятицветную и шестицветную цветовую схему. А также обеспечить холодные тона, теплые тона. и цвета градиента, используемые для представления постепенных изменений в данных.

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

Кроме того, Ван Цзюньтин также показал некоторые необоснованные случаи, когда цвета слишком близки. Например, цвета первого ряда данных расположены слишком близко друг к другу, что делает невозможным определение одного ряда данных. Ряд вторых данных слишком близок к фоновому цвету, а сами данные нелегко выделить. В-третьих, ось координат, название выступления, ось и цвет фона слишком близки, чтобы определить размер конкретных данных.

Поэтому рекомендуется выбирать цвет визуализации с большим размахом светлоты. Чем больше диапазон яркости и оттенка, тем больше данных он может нести.

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

Что WebGL привносит в ECharts

В последние годы WebGL становится все более популярным. некоторые планы на будущее.

ClayGL

ClayGL — это основной графический движок ECharts GL, прогрессивной высокопроизводительной среды разработки WebGL. ClayGL прост в использовании и предоставляет множество функций, которые позволяют быстро создавать 3D-приложения с наименьшим количеством кода.На основе механизма микроядра можно гарантировать, что минимальный размер пакета будет достаточно мал для масштабирования до высококачественного рендеринга.

легко использовать

Этот код, состоящий всего из 19 строк с пустыми строками и комментариями, загружает модель танцующего робота и создает 3D-приложение со светом, тенями и анимацией.

Абстракция основных модулей ClayGL

Как общая структура, ClayGL должен удовлетворять потребности различных сценариев, таких как реализация библиотеки визуализации, такой как ECharts GL, но функции, которые могут использоваться в разных сценариях, совершенно разные.Например, для визуализации может не требоваться загрузка 3D-модели. .модуль.

Основные модули абстрагированы в ClayGL, и эти основные модули отделены от модулей, более ориентированных на сцену.

Основные функции ClayGL включают в себя:

  • Управление шейдерами, буфером атрибутов и другими ресурсами графического процессора.

  • Управление рендерингом

    • Обеспечение эффективного рендеринга

  • математическая библиотека

    • Может выполнять вычисления с матрицей, вектором, ограничительной рамкой

WebGL — это интерфейс конечного автомата.Большинство интерфейсов WebGL предназначены для создания и отправки вышеупомянутых ресурсов графического процессора, управления состоянием отрисовки и т. д. Интерфейс этого конечного автомата очень сложный и многословный, и он будет трудно управлять эффектом рисования, если это сложное состояние. Часто после того, как мы пишем большой фрагмент кода, браузер обновляется и ничего не видит, и об ошибках не сообщается, поэтому мы можем только перейти к коду построчно, чтобы увидеть, в чем проблема.

Первая и главная задача ClayGL — решить эти проблемы управления ресурсами и состоянием. Например, следующий основной код рисует треугольник, а верхняя строка представляет некоторые необходимые модули с помощью синтаксиса ES6, такие как средства визуализации. Затем создайте средство визуализации, которое в основном отвечает за управление всей визуализацией. Следующая геометрия отвечает за управление всеми данными вершин, такими как положение вершины. Материал и шейдер ниже управляют кодом вершинного шейдера и пиксельного шейдера, а также некоторыми юниформами, предоставляемыми снаружи. Последняя строчка — передать эти вещи всему рендереру, а рендерер пусть отвечает за всякие тривиальные вещи и отрисовывает графику.

Наконец, код, упакованный Webpack 4, занимает всего 22 КБ после сжатия gzip по сравнению с сотнями КБ после упаковки THREE.js.

Интеграция наиболее распространенных сценариев - App3D

Для многих 3D-приложений, которые хотят использовать «из коробки», одних только вышеперечисленных основных модулей недостаточно ClayGL предоставляет множество функциональных модулей для быстрого решения конкретных задач в сцене, таких как загрузка модели, затенение, управление камерой, встроенные материалы, скелетная анимация и т. д. Среди них App3D — это интеграция этих модулей для наших общих сцен. Приведенная выше модель робота загружается с помощью модуля App3D. Он обеспечивает следующее

  • Управление циклами для всего приложения
  • Автоматическая переработка ресурсов GPU
  • Обнаружение и управление событиями мыши
  • Легче создавать объекты сцены, источники света, камеры
  • Текстура Promisify, интерфейс загрузки модели
  • Встроенный материал PBR
  • Cubemap Prefilter

и т. д. Лента упрощает разработку 3D-приложений разработчиками.

ClayGL Advanced Renderer

Чтобы визуализированные изображения имели более насыщенный свет и тень, более насыщенные материалы, более привлекательные цвета, более реалистичные снимки и более плавные изображения. ClayGL предоставляет расширенный рендерер. Ниже показан рендеринг шейдера, показывающий различные материалы с использованием Advanced Renderer.

VisualDL — электронные диаграммы и глубокое обучение

VisualDL — это инструмент визуализации глубокого обучения, выпущенный Baidu.Он может визуализировать параметры в процессе обучения модели и расчетный граф потока данных (вычислительный граф) в режиме реального времени, чтобы помочь инструкторам моделей лучше понять и отладить, оптимизировать модель. Ли Дэцин, старший инженер по исследованиям и разработкам в Baidu, объединил свой практический опыт с проектом VisualDL, чтобы рассказать, как визуализация используется для решения проблем в области глубокого обучения.

VisualDL

VisualDL в основном решает проблему «черного ящика» в процессе обучения глубокому обучению.Он использует визуальный метод, чтобы помочь обучающему модели понять и отладить структуру модели, а также визуализировать изменения различных гиперпараметров в процессе обучения модели.

Четыре функции VisualDL

Scalar

Во время обучения модели различная числовая информация, полученная в процессе обучения, может отображаться в виде линейного графика, что удобно для наблюдения за общей тенденцией изменения параметров, а несколько линий могут отображаться в одном и том же визуальном представлении, что удобно. пользователям удобно сравнивать и анализировать несколько параметров.

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

Graph

Помогите пользователям понять и отладить сетевую структуру моделей глубокого обучения. Graph поддерживает ONNX, который косвенно поддерживает визуализацию структуры модели различных сред глубокого обучения, что удобно пользователям для устранения ошибок конфигурации сетевой структуры и помогает понять структуру сети.

Image

Пользователи могут легко просматривать качество входных образцов данных изображения, а также промежуточные результаты обучения, такие как результаты сверточных слоев или изображения, сгенерированные GAN.

Histogram

Гистограмма в основном используется для визуализации распределения параметров во времени и времени обучения, как показано на следующем рисунке.

Будущее VisualDL

В будущем VisualDL будет реализовывать Interactive Graph, а также интерпретируемость моделей, визуализацию звука, визуализацию текста и т. д. В то же время сотрудничество между ECharts и PaddlePaddle продолжит прилагать усилия в области глубокого обучения с открытым исходным кодом, создавать более богатую экосистему инструментов визуализации и предоставлять разработчикам реальную практическую помощь.

Категории