Корпоративный сайт для Gravion

Главное о кейсе

Работа завершена и сдана в срок

Бизнес-задача и ее решение

Запрограммировать сайт

Прочая информация о кейсе

Gravion был первым коммерческим проектом, на котором удалось применить свои знания WebGL и ThreeJS. Здесь на первом экране используется настоящая 3D-сцена, на которой шарики выстроены в пространстве таким образом, чтобы пользователь с одной стороны видел логотип компании — букву «G», с другой стороны — сложенное из шариков слово «Опыт», ещё с двух сторон — «Открытость» и «Ответственность».

Для этого были построены три 3D-модели в Cinema 4D. Но так как эти модели весили недопустимо много для первого экрана главной страницы, нам пришлось написать специальный парсер, который из файла 3D-модели нашёл все координаты всех шариков и сложил в небольшой json-массив. Сами шарики мы строили программно, причём, для оптимизации мы использовали не объёмные шарики, а плоские диски (спрайты). Чтобы эти плоские диски выглядели как объёмными шарики и правильно отражали свет, мы запрограммировали шейдерные скрипты, рассчитывающие углы отражения света.

Но даже этих оптимизаций оказалось недостаточно из-за большого количества шариков. Слово «Опыт» содержит 2 тысячи шариков, «Открытость» — 5 тысяч, а «Ответственность» — аж 8 тысяч. И всю эту геометрию приходится постоянно рассчитывать в режиме отображения буквы «G». Пока пользователь ведёт мышку от одного слова к другому, происходит плавное перестроение шариков из первого слова во второе. Так, проводя от слова «Опыт» к слову «Ответственность», вы можете заметить, как буква «G» как бы вытягивается вдаль, словно подзорная труба. И для этого требуется очень много вычислений. Чтобы увеличить FPS, нам пришлось реализовать геометрические шейдеры и на них рассчитывать координаты шариков. Это позволило поднять FPS с 5-10 до максимальных 60 FPS даже на компьютерах без дискретной видеокарты.

Даже на iPhone 5 эта сцена выдавала 50-60 FPS. Но, к сожалению, на вертикальных экранах эта сцена не очень хорошо смотрится (слово «Ответственность» из шариков совсем плохо отображается), поэтому на мобильных телефонах было принято решение заменить первый экран на заставку с параллаксом, работающим от акселерометра.

Подводя итог, можно сказать, что запрограммировать интерактивную механику в 3D — это лишь малая часть работы. Большая часть времени уходит на оптимизацию для быстрой загрузки и рендеринга, ведь web-сайт — это не GTA 5, продающаяся на семи дисках.