Webgl js: WebGL tutorial — Интерфейсы веб API

25.06.2023 alexxlab

Промо-сайт нашего стартапа на Vue.js и WebGL — как он создавался и зачем нужен — Дмитрий Л. на vc.ru

В этой статье я расскажу о создании промо-сайта для одного из больших проектов нашей команды — сайта-агрегатора в спортивной нише, а также о том, какие перед промо стоят цели, и о технологиях, которые мы осваивали и применяли в процессе его разработки.

201 просмотров

Герой обзора: https://getsport.io

Переход с главного экрана в блок с преимуществами на GetSport.io

Пара слов о проекте

Проект называется «GetSport» — это веб- и мобильное приложение для спортсменов, владельцев спортивных площадок и тренеров, которое поможет решить следующие задачи:

спортсменам — эффективно организовать тренировочный процесс, быстро и удобно находить спортивные площадки, а также тренеров, психологов и других нужных специалистов;
тренерам — обзавестись новыми маркетинговыми инструментами, включая собственный сайт, и найти новых клиентов для онлайн и оффлайн занятий;

владельцам спортивных площадок — автоматизировать большинство бизнес-процессов и снизить расходы на управление.

Зачем нам промо-сайт

Мы готовы к бета-запуску ± на 95%. Пока тестировщики и программисты заканчивают, пришла пора запускать «прогрев аудитории», частью которого и является наш промо-сайт.

Розыгрыш подарков на GetSport.io, худи создана с использованием WebGL

Его главная задача — познакомить потенциальных пользователей с преимуществами сервиса, добиться узнаваемости фирменного стиля перед продакшн-запуском и обзавестись контактами будущих клиентов.

О промо-сайте

Чтобы решить поставленную задачу, мы запланировали сделать следующее: описать преимущества сервиса в емких заголовках, захватить внимание с помощью «спецэффектов» и провести розыгрыш подарков, подготовив почву под призыв пользователей вернуться к нам, когда мы запустим приложение.

Для получения максимальной выгоды от кампании, к работе привлекли маркетолога. Он помог нам с написанием текстов, а затем участвовал в обсуждении и согласовании дизайна будущего сайта.

Hero-блок с историей создания сервиса на GetSport.io

Готовый макет предполагал использование 3D графики и моделей, а концепция получилась следующая: попадая на сайт, пользователь путешествует по 3D логотипу сервиса, изучает его преимущества и переходит к CTA блоку (он же одновременно и блок с подарками).

Реализация 3D

Фронт мы пишем на Vue.js, поэтому для реализации 3D на сайте у нас три очевидных варианта:

«Покадровая анимация» — это последовательный показ слайдов на скролле, где каждый следующий слайд немного изменяется, создавая иллюзию анимации. Что-то вроде блокнота с рисунками, где быстро пролистывая страницы, вы можете видеть, как они «оживают». Выглядит это часто интересно, но дешево и непрофессионально — не наш вариант.

Видео- и фотрендеры — это обычные мультимедиа. У них есть тоже есть ряд существенных недостатков, из-за которых мы не решились их использовать: нулевая интерактивность, возможность проигрывать их только вперед и большие размеры файлов.
WebGL & three.js — это технологии, которые дают возможность использовать реальные 3D модели на сайте. У этого решения нет недостатков первых двух вариантов, но разработка сравнительно долгая и дорогая.

Футер сайта GetSport.io

Качество продукта и результат продвижения в приоритете, поэтому смело выбираем последний вариант и переходим к созданию модели, попутно ознакамливаясь с технической документацией по three.js.

Spline & Blender

Как я уже упомянул, главная модель на сайте — это большой логотип нашего сервиса. Ее мы изначально решили делать в онлайн 3D-редакторе Spline — в нем удобно обсуждать правки, наблюдая за работой дизайнера в режиме реального времени.

К сожалению, экспортируемые из Spline файлы на сайте постоянно имели дефекты. Поэтому, когда мы пришли к более-менее законченной версии первой модели, дизайнер реализовал ее в Blender.

Создание 3D модели логотипа (той, что сейчас на сайте GetSport.

io)

С одной стороны мы потратили время в Spline, но с другой — сделали вывод: если нам еще раз будет нужно реализовать подобную 3D модель, мы используем тот же формат работы — Spline > Blender, чтобы удобно обсуждать и на лету вносить правки.

Вы можете поступить также. Дизайнер, которому ничего не придется переделывать в готовой работе, скажет вам большое спасибо, а вы гарантировано сэкономите время.

WebGL & three.js

Основа для фронта, 3D модель и теоретические основы по ее интеграции на сайт есть. Теперь осталось только применить все это на практике. Если коротко, то в нашем случае это выглядит следующим образом:

Устанавливаем на наш сайт библиотеку three.js;
Создаем канвас для отображения 3D модели;
Используя методы библиотеки three.js, загружаем нашу модель и отображаем ее на канвасе;
Обновляем экран в зависимости от того, как пользователь взаимодействует с моделью.

Более подробно эти процессы описаны здесь — threejs.org. Если у вас есть хороший опыт работы с фронтом на Vue.js или React.js, то с изучением WebGL и three.js особых сложностей не возникнет.

Плагины GreenSock для GSAP

Getsport.io — это не первый сайт на Vue.js + GSAP. Но он первый, куда мы добавили ScrollSmoother и некоторые другие платные плагины из GSAP.

Страница с командой и технической информацией сервиса GetSport на GetSport.io

Следует отметить, что разработка прошла не так гладко, как обычно. Виной всему особенности iOS (телефоны и планшеты), где некоторые платные плагины GSAP работают некорректно.

Мы пытались решить проблему до тех пор, пока не поняли, что она имеет массовый характер и, по сути, неисправима. На официальном форуме GSAP эти моменты обсуждались здесь и здесь — возьмите на заметку, если собираетесь покупать лицензию.

Еще несколько фактов о сайте

На сайте есть смена темы. Их две и выглядят они следующим образом:

Смена темы на сайте GetSport.io

У сайт есть backend на Python. Он используется для сбора контактов из разных форм в отдельные таблицы для последующего экспорта.
На сайте есть музыка — вы можете включить ее в верхнем правом углу. Это 15-секундный зацикленный трек, который мы написали сами.
Сайт мультиязычный — он доступен на английском и финском языках.

Витрина — форум three.js

Тема	просмотров	Деятельность
О категории «Витрина» Используйте эту категорию, чтобы продемонстрировать любые проекты, которые вы создали с помощью three. js. Демонстрации требуют одобрения модератора, поэтому, пожалуйста, будьте терпеливы, если ваша публикация не появится сразу, или не стесняйтесь отправлять сообщения @moderators. Проект…	6434	14 августа 2019 г.
Детская площадка, смоделированная в Blender и разработанная с помощью threejs	70	10 июня 2023 г.
org/ListItem»> Я делаю одну игру в месяц, вот игра №1	49	9 июня 2023 г.
Мой первый проект с ThreeJS	50	9 июня 2023 г.
Это флакон духов, созданный блендером.	36	9 июня 2023 г.
анализ теней на плитках Google 3D	33	9 июня 2023 г.
Моя личная галерея / портфолио сцен ThreeJS, сделанное с помощью React	5260	9 июня 2023 г.
org/ListItem»> Модуль генератора океанских волн iFFT	668	9 июня 2023 г.
Личное портфолио — pranavaa.com — 2023	171	8 июня 2023 г.
Галерея шейдеров Etidou	84	7 июня 2023 г.
Личное портфолио — Impossible-Box	493	7 июня 2023 г.
Путешествие Споры	69	6 июня 2023 г.
Практически геометрический	5343	5 июня 2023 г.
Веб-сайт виртуального тура, созданный с использованием Three.js	4412	5 июня 2023 г.
THREEjs Движок виртуальных туров	1339	25 мая 2023 г.
org/ListItem»> Интерактивные 3D-симуляции для школьной физики на https://effectuall.github.io/	175	5 июня 2023 г.
OMNIVISOR [механическое глазное яблоко]	118	4 июня 2023 г.
Трехсторонний проект	429	4 июня 2023 г.
Волшебный пончик судьбы	78	4 июня 2023 г.
Полностью трехмерный веб-сайт на базе Threejs и Tween.	88	4 июня 2023 г.
Интеграция 3D-анимации ThreeJS на сайт WordPress	61	3 июня 2023 г.
Сцена с эффектом дыма	121	3 июня 2023 г.
SimCAD 3D — 3D-моделирование в браузере	202	3 июня 2023 г.
Автомобильный футбол (threejs и cannonjs)	1910 г.	31 мая 2023 г.
Небольшое приключение на процедурно генерируемых уровнях	134	31 мая 2023 г.
3D спиральные часы !!	516	31 мая 2023 г.
org/ListItem»> Симулятор SuperTunnel: прокопайте дыру в земле! 🌎	243	31 мая 2023 г.
Автомобиль Threejs и Cannon GLTF	444	29 мая 2023 г.
Музей ДевиантАрт	451	29 мая 2023 г.
Paruba: легкая и быстрая альтернатива эскизному плану	113	29 мая 2023 г.