AzoftБлогВизуализируй это. 2D и 3D графика в приложениях

Визуализируй это. 2D и 3D графика в приложениях

Ольга Аксёнова Март 22, 2018

Визуализация в приложениях

Кто придумал визуализировать информацию? — Наши предки, которые изображали на стенах пещер сцены охоты? Астрономы, рисовавшие карты звёздного неба? Или владельцы лавочек с вывесками в виде башмаков и бубликов? — Неважно! Главное, что визуализация прошла огромный путь и сегодня представляет собой сложные двух- и трёхмерные модели.

Как визуализировать информацию

Всё больше компаний используют 2D и 3D графику, чтобы эффективно показать свои товары и услуги. Вот, например, 3D-конфигуратор автомобилей Toyota Camry на сайте австралийского дилера. В приложении можно выбрать модификацию машины, тип двигателя, цвет кузова и салона. Выглядит всё реалистично и красиво. А вот кастомный конструктор сумок, который придумали итальянские мастера из компании LaikaiLike. В приложении покупатели подбирают размеры сумочки, материал, замочки и кнопки. Готовая сумка — точная копия своего прототипа.

Кастомный конструктор сумок LaikaiLike

Графические библиотеки: от теории к практике

Если вам нужно веб- или мобильное приложение с 2D и 3D-объектами, используйте специальные инструменты. Что выбрать — зависит от задач. Если хотите показать графики и диаграммы, вам в помощь Chart.js. Это достаточно простая JavaScript-библиотека. Весит немного, легко устанавливается и кастомизируется. Если ваша цель — крутые визуальные эффекты, работайте с D3.js. Библиотека бесплатная, мощная и гибкая. Поддерживается всеми известными в природе браузерами.

Библиотека D3.js

Хотите сделать в приложении 3D анимацию? — Хорошим решением может стать Three.js, кроссбраузерная JavaScript-библиотека. Функционал внушительный: геометрические фигуры, сложные объекты, визуальные эффекты и кинематика. Можно выбрать рендер: SVG, WebGL или HTML5 Canvas.

Three.js мы применили в одном из наших проектов. Заказчик — европейская компания, которая сдаёт в аренду вышки телеком-операторам. Мы сделали прототип веб-приложения, в котором вышки выглядят как трёхмерные модели. Их можно увеличить и покрутить с разных сторон. Клиенты компании заходят в приложение, смотрят, какое оборудование к вышке уже подключено и выбирают, где расположить свои антенны. Удобно — не нужно тратить время и выезжать на объект.

Прототип на Three.js

И ещё один инструмент для создания графики — Konva.js. Это JS-фреймворк, который позволяет работать с Canvas. Поддерживает слои — Canvas-элементы, анимации, стили и фигуры.

Мы выбрали Konva.js для нашего проекта, прототипа учебного веб-приложения. У заказчика, компании Алекта, уже был десктопный редактор химических формул “ХиШник” и его Android-версия. Редактор нужно было перенести на веб вместе со всем функционалом: разные роли пользователей — ученики и учителя, разные типы ответов на задачи по химии — структурные, электронные и молекулярные формулы, уравнения реакции.

Почему именно Konva.js? Этот фреймворк умеет кэшировать объекты, делает высокопроизводительные анимации и переходы. А самое главное — у Konva.js хорошая реализация под React — основную технологию на этом проекте. В общем, все звёзды сошлись в пользу Konva.js.

Редактор химических формул ХиШник

Чем больше информации, тем труднее в ней разобраться. Визуализируйте! Используйте наглядные формулы и графики, мобильные и веб-приложения с 3D эффектами, дополненную и виртуальную реальность. Это увеличит лояльность пользователей и привлечёт новых клиентов.

Комментарии

комментарии