Визуализируй это. 2D и 3D графика в приложениях
IT-копирайтер
Время чтения: 3 минуты
Кто придумал визуализировать информацию?
— Наши предки, которые изображали на стенах пещер сцены охоты? Астрономы, рисовавшие карты звёздного неба? Или владельцы лавочек с вывесками в виде башмаков и бубликов?
— Неважно! Главное, что визуализация прошла огромный путь и сегодня представляет собой сложные модели, в которых используется 2D и 3D графика.
Всё больше компаний используют 2D и 3D графику, чтобы эффективно показать товары и услуги. Вот, например, 3D-конфигуратор автомобилей Toyota Camry на сайте австралийского дилера. В приложении можно выбрать модификацию машины, тип двигателя, цвет кузова и салона. Выглядит всё реалистично и красиво.
А вот кастомный конструктор сумок, который придумали итальянские мастера из компании LaikaiLike. В приложении покупатели подбирают размеры сумочки, материал, замочки и кнопки. Готовая сумка — точная копия своего прототипа.
Графические библиотеки: от теории к практике
Если вам нужно веб- или мобильное приложение с 2D и 3D-объектами, используйте специальные инструменты. Что выбрать — зависит от задач. Если хотите показать графики и диаграммы, вам в помощь Chart.js. Это достаточно простая JavaScript-библиотека. Весит немного, легко устанавливается и кастомизируется. Если ваша цель — крутые визуальные эффекты, работайте с D3.js. Библиотека бесплатная, мощная и гибкая. Поддерживается всеми известными в природе браузерами.
Хотите сделать в приложении 3D анимацию? Хорошим решением может стать Three.js, кроссбраузерная JavaScript-библиотека. Функционал внушительный: геометрические фигуры, сложные объекты, визуальные эффекты и кинематика. Можно выбрать рендер: SVG, WebGL или HTML5 Canvas.
Three.js мы применили в одном из наших проектов. Заказчик — европейская компания, которая сдаёт в аренду вышки телеком-операторам. Мы сделали прототип веб-приложения, в котором вышки выглядят как трёхмерные модели. Их можно увеличить и покрутить с разных сторон.
Клиенты компании заходят в приложение, смотрят, какое оборудование к вышке уже подключено и выбирают, где расположить свои антенны. Удобно: не нужно тратить время и выезжать на объект.
И ещё один инструмент для создания графики — Konva.js. Это JS-фреймворк, который позволяет работать с Canvas. Поддерживает слои: Canvas-элементы, анимации, стили и фигуры.
Мы выбрали Konva.js для нашего проекта, прототипа учебного веб-приложения. У заказчика, компании Алекта, уже был десктопный редактор химических формул “ХиШник” и его Android-версия. Редактор нужно было перенести на веб вместе со всем функционалом: разные роли пользователей — ученики и учителя, разные типы ответов на задачи по химии — структурные, электронные и молекулярные формулы, уравнения реакции.
Почему именно Konva.js? Этот фреймворк умеет кэшировать объекты, делает высокопроизводительные анимации и переходы. А самое главное — у Konva.js хорошая реализация под React — основную технологию на этом проекте. В общем, все звёзды сошлись в пользу Konva.js.
Чем больше информации, тем труднее в ней разобраться. Визуализируйте! Используйте наглядные формулы и графики, мобильные и веб-приложения с 3D эффектами, дополненную и виртуальную реальность. Это увеличит лояльность пользователей и привлечёт новых клиентов.
