Корпоративный сайт АО «АЭМ-технологии»

1. Вводная задача от заказчика, проблематика, цели

АО «АЭМ-технологии» – одна из крупнейших машиностроительных компаний Государственной корпорации «Росатом». Это единственная российская компания с полным циклом изготовления оборудования для атомной энергетики и газнефтехимии: от собственного производства металлургической заготовки до готовой высокотехнологичной сверхгабаритной продукции.

ARTW совместно с командой «АЭМ-технологии» разработали и запустили новый корпоративный сайт с 3D-презентацией и интерактивной анимацией, лаконичным современным дизайном, который отражает технологичность компании и помогает лучше рассказать о ее продуктах, проектах и географии деятельности.

Шоурил проекта «АЭМ-технологии»

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Целевая аудитория проекта — российские и иностранные профильные специалисты, которые хорошо осведомлены в тематике. Учитывая это и имиджево-информационную направленность сайта, команда проекта решила сделать основной точкой входа интерактивную 3D-презентацию, в которой наглядно представлены основные продукты компании — оборудование для АЭС, нефтегазохимии, теплоэнергетики и металлургии.

Интересующее оборудование можно «покрутить» на 360’, посмотреть характеристики, увидеть на схеме рядом с другими узлами, а также совершить виртуальную экскурсию по предприятиям, на которых оборудование производится.

3. Результаты сотрудничества

На разработку сайта были затрачены тысячи часов различных специалистов — 3D-моделлеров, моушн и графических дизайнеров, фронтендеров и системных архитекторов, тестировщиков. Для того чтобы модели выглядели презентабельно и при этом сохранилась интерактивность, мы выбрали для реализации технологии браузерного WebGL. С ними для разработки появляются возможности сравнимые с возможностями 3D-игр: сцены с освещением, текстуры, взаимодействие объектов, плавное движение. Главная задача на стыке 3D и frontend — оптимизация. Малополигональные объекты весят легче, но выглядят менее детализированными. Для нашего решения мы использовали библиотеку Three.js и мануальную оптимизацию моделей в Blender. В итоге получилось сбалансировать и детализацию 3D-объектов, и возможности по интерактиву и анимации, сохранив высокие значения FPS как на десктопной, так и мобильной версиях.