В наше современное время трехмерная графика активно используются практически во всех сферах деятельности, она идеально подходит для презентаций, детальных демонстраций и визуализаций каких-либо объектов с различных сторон.
Конечно, в веб-среде 3D также массово распространено. Все встречали на каких-либо сайтах в карточках товара помимо просмотра обычных фото есть 3D модель товара для его детального обзора (т.е. можно покрутить модель в разных плоскостях с возможностью приближения - отдаления без потери детализации и качества).
Для многих разработчиков 3D это что-то непонятное и сложное. Другие считают, что 3D это вообще не для веба, т.к. для работы анимированной 3D-графики мощностей браузерным движкам явно не хватит. У команды специалистов ТоммиГан имеется опыт работы с 3D графикой при веб-разработке. Задачи по внедрению 3D хоть и довольно редкие, но очень интересные для разработчиков. Сейчас мы наглядно расскажем об одной такой задаче.
Задача
От нашего клиента поступил запрос на переработку страницы карточки товара его сайта, которая по сути является конструктором. В конструкторе реализована функция выбора цвета товара, количества и различных дополнительных опций при которых цена товара меняется. Клиент хотел видеть вместо обычных рендеров товара на странице полноценную 3D модель. Помимо того, что её можно покрутить в разных плоскостях, она должна меняться в зависимости от выбора различных опций.
Посовещавшись определили решение в виде использования специального сервиса для публикации и воспроизведения 3D-моделей, который называется Sketchfab. Для тех, кто не в теме Sketchfab - это как видеохостинг YouTube, только для 3D-графики.
По заявлениям разработчиков в Sketchfab поддерживаются все основные форматы 3D-файлов (их, кстати, около 30), он работает на любом устройстве и в любом веб-браузере. При этом никаких дополнительных плагинов не требуется.
Если говорить простым языком, то для создания 3D моделей используется профессиональный софт типа Blender, 3D MAX, Autocad и прочие.
Далее 3D модели нужен 3D-плеер для воспроизведения на сайте, тут на помощь приходит онлайн-сервис Sketchfab, в который загружается файл 3D модели. После загрузки модель может быть донастроена и далее опубликована на стороннем сайте в виде встраивания кода IFrame.
IFrame - контейнер, который позволяет вставить любой HTML-код из стороннего источника (сайта). Например, таким образом на сайт вставляют карты из сервиса Яндекс.Карты или видео из видеохостинга Youtube.
Исходя из первоначального технического задания мы начали работу, используя специальный конфигуратор от Sketchfab с помощью которого можно работать со слоями 3D модели. В результате программист мог использовать код конфигуратора для связи опций товара и слоев 3D-модели, например, выбрав цвет в карточке товара - связанный с этой опцией слой 3D модели окрашивается в выбранный цвет, если мы выбираем опцию "Отображать логотип на изделии" - он появится, при отключении этой опции - логотип исчезнет, т.е. выключится слой, который отвечает за вывод логотипа и т.д.
Отработав тестовую модель, мы получили дополнительный фидбэк от клиента в виде необходимости реализации маркеров: при наведении курсора на определенный элемент 3D модели, появляется подсказка, что это за элемент. Дополнительным ключевым условием было приближение камеры 3D модели при выборе опции в конструкторе, например, на сайте пользователь ставит галочку "Отображать логотип на изделии", камера автоматически плавно выставляется и фокусируется на той области 3D модели, где должен размещаться логотип.
Вот тут и начались проблемы.
Как оказалось, силами конфигуратора Sketchfab такое не реализовать, т.к. он имеет определенные ограничения.
Мы перерыли много официальных мануалов (они все на английском... бэээ, не очень удобно), читали форумы и даже консультировались с разработчиками и фрилансерами sketchfab - почему-то нам никто не мог помочь. Мы даже немного отчаялись: либо наш английский был настолько плох, что мы недостаточно правильно и детально доносили информацию до наших англоговорящих коллег, либо решения не было, хотя мы в это не верили.
Спустя какое-то время один из фрилансеров sketchfab порекомендовал нам не зацикливаться на конфигураторе, вместо этого нужно было погрузиться в изучение API сервиса, а это та еще заморочка. Информации на просторах интернета не так много по этому поводу. К тому же все на нашем “любимом” английском...
Но мы не привыкли сдаваться. Изучили технологию работы со Sketchfab на уровне API, нашли решение поставленных задач и реализовали их на тестовом проекте, хоть нам и пришлось полностью переписать код интеграции.
API в нашем случае - инструмент интеграции сервиса Sketchfab с веб-сайтом, при котором доступны все возможные настройки кастомизации функционала 3D плеера.
В результате проработки тестовой модели и получения апрува со стороны клиента - мы начали постепенный переход всех текущих карточек товара в формат представления в виде настраиваемой 3D модели.
И ВУАЛЯ! Все получилось!
Товар можно вращать, приближать, удалять, менять цвет, добавлять логотип и другие аксессуары.
Клиент был очень рад! Несмотря на то, что сроки на реализацию слегка затянулись, но мы это сделали, решили задачу!
Набив руку, наши программисты значительно ускорились в переработке следующих карточек товаров, работа по которым все еще продолжается по мере отрисовки новых 3D моделей.
Как показала практика работы с 3D и веб - задачи не типовые, довольно сложные и специфичные, но очень интересные. Надеемся, что подобные проекты и задачи будут все чаще и чаще захаживать в наш производственный отдел.
А вы используете на своем сайте 3D технологии?
Делитесь интересными 3D-решениями в комментариях, это будет интересно как нам, так и нашим читателям.
Информацию для вас подготовил
Проект-менеджер
Агентства Эффективной Интернет-рекламы ТоммиГан
Хасанов Илья
