vitaly44
@vitaly44
Предприниматель, веб-разработчик, дизайнер

С чего начать изучение webgl, чтобы сделать так?

Есть интересное решение https://3d.syrup-aerius.ru/ анимация бутылочки при прокрутке сайта.

Вроде как на webgl или типа того.

Не пойму с чего начать подобное изучать, чтобы сделать так же, повторить и делать аналогичные анимации.
Какие ресурсы и материалы нужны для этого?
  • Вопрос задан
  • 195 просмотров
Решения вопроса 2
sfi0zy
@sfi0zy Куратор тега JavaScript
UI developer. Верстаю неверстаемое.
Вся суть таких анимаций - много заранее заготовленных кадров, которые мы по очереди показываем. Чем больше кадров - тем плавнее анимация. Они могут быть в отдельных картинках или по много кадров в одной. На вашем сайте все это еще поделили - каждая часть бутылочки имеет свою последовательность кадров:
Спойлер
1ersu-v8gwpy6mxqyagwggfny0k.png

Каких-то конкретных преимуществ этого подхода по сравнению с одним кадром на все я не вижу. Использовать ли для этого WebGL? Ну можно. Точно также, как и обычный canvas. Как выводить картинки на него вы легко загуглите, остается только посчитать координаты расположения кадров в картинке (по идее дизайнер должен их там аккуратно по сеточке расставлять) и выводить их по очереди.

P.S.: По идее можно отрендерить видео и вместо ручного переключения кадров проматывать его в разные стороны с разной скоростью в зависимости от скролла. Но на практике что-то не видно, чтобы это массово делали, обычно используют именно отдельные кадры.
Ответ написан
@geektimer
Что-то не похоже на 3d, иначе бы анимация плавнее была.
Попробуйте посмотреть в сторону blend4web, т.к. есть связка с блендером, и можете прямо в нем создать сцену и перенести ее в веб.

U.P.D. либо рендерите анимацию в любом 3д редакторе и переносите ее на сайт.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
michaelbuhman
@michaelbuhman
3д моделлер, веб-разработчик
Чтобы готовить такой контент нужно прежде всего изучить какой нибудь пакет моделирования. Самые популярные и известные это Blender и 3ds Max. А дальше гуглите на предмет движков/плагинов, экспортирующих из этих пакетов в WebGL. Например упомянутый выше blend4web (но он мне не особо нравится в последнее время) или verge 3d.
Ответ написан
irishmann
@irishmann
Научись пользоваться дебаггером
Это SVG
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
12 нояб. 2019, в 04:24
2500 руб./за проект
12 нояб. 2019, в 01:32
25000 руб./за проект