На вопрос ответил Алексей Ткаченко, основатель сервиса для встраивания и управления 3D‑моделями на сайте Site3D Configurator, автор канала Site3D Configurator.
А свой вопрос вы можете задать нам в чате Топвизор-Журнала.
Зачем нужно 3D
Иногда привычных форматов — текста, фотографий и видео — может быть недостаточно. Например, в нише сложных технических товаров. По нескольким фото человек может не понять, что это за товар, как он выглядит и точно ли ему подойдёт.
Поэтому бизнес стал внедрять на сайт готовые образы — графику WebGL. Благодаря 3D‑моделям пользователь лучше воспринимает продукт.
Например, моделируемые объекты демонстрируют важные аспекты продукта — это привлекает внимание целевой аудитории и способствует росту продаж. Так 3D‑технологии выступают эффективным инструментом решения конкретных бизнес‑задач заказчика.
Как создать 3D‑модель
Создание качественной 3D‑графики требует тщательной подготовки ещё на стадии концепции проекта. Необходимо:
-
Создать подробный сценарий будущей презентации с учётом 3D‑элементов.
-
Разработать макеты страниц, на которых планируется разместить трёхмерные модели.
-
Подготовить материалы с прозрачностью фона для последующей интеграции на страницах сайта.
-
Согласовать технические характеристики будущих решений с разработчиками сайтов.
-
Передать подготовленные материалы специалисту по созданию 3D‑графики для разработки анимаций и финального согласования.
Важно заранее определить две ключевые позиции:
-
что именно нужно донести пользователям;
-
какие этапы потребуются для успешной реализации задуманного.
При выборе между использованием фотографий, видеороликов и 3D‑моделей важно понимать плюсы и минусы каждого варианта. 3D‑объекты легко адаптировать к любому интерфейсу, но они требуют затрат ресурсов компьютера, если должным образом не оптимизированы.
Технология WebGL открывает возможность добавлять в интерфейс интерактивные эффекты и реализовывать сложную физическую симуляцию, повышая уровень вовлечённости пользователей.
На вовлечённость пользователя и поведенческие факторы влияет и юзабилити сайта: скорость загрузки, удобство использования, простота и понятность. В статье «Что такое юзабилити и как его улучшить», рассказали о 10 принципах юзабилити, инструментах для анализа и дали советы по улучшению.
Особенности создания 3D‑моделей
Оптимизация размера файла и нагрузки на устройство пользователя. Это важная часть внедрения графики на сайт Ещё на этапе проектирования следует минимизировать количество полигонов и деталей, исходя из необходимых углов обзора и уровня детализации. Ограничение числа изменений экранных пикселей снижает общую вычислительную нагрузку и ускоряет загрузку страниц.
Процесс внедрения 3D усложняется необходимостью экономии каждого килобайта. Например, оптимальный размер файла – около 3 мегабайт, поскольку на одном ресурсе размещается несколько различных моделей одновременно.
Соотношение размера объекта и производительности устройства. Большие объекты замедляют загрузку и ухудшают удобство просмотра на старых компьютерах. Браузеры используют несовершенные методы сглаживания — они увеличивают размеры слоя и расходуют дополнительные ресурсы процессора. Проверить качество своей версии браузера легко: уменьшение размера окна ускорит обработку анимации.
Как внедрить интерактивные 3D‑модели
Можно выделить следующие типы программ, которые нужно для создания браузерных 3D‑проектов:
-
3D‑редактор для создания 3D‑моделей. Можно использовать бесплатный, но мощный редактор Blender.
-
Подготовка текстур. Помогут редакторы вроде Photoshop, а также специализированные онлайн‑сервисы для подготовки карт нормалей, шероховатости и других эффектов для создания реалистичных материалов.
-
Создание 3D‑сцен и внедрение их на сайт. Здесь понадобятся или руки программистов, или облачные решения — например, иностранные сервисы вроде Sketchfab (есть трудности с оплатой российской картой). Можно воспользоваться отечественными инструментами — Blend4Web (нужно купить лицензию) и Site3D Configurator (доступен после регистрации).
Ещё о форматах контента
Как видеоконтент влияет на SEO‑продвижение сайта