Как делать сайты с 3D. WebGL на практике
Vložit
- čas přidán 18. 09. 2020
- Наши актуальные кейсы с WebGL и 3D-графикой:
- Роскосмос makeagency.ru/cases/roskosmos
- НефтеТранс Сервис makeagency.ru/cases/neftetran...
- Виртуальный выставочный комплекс Кузбасса vvk-kuzbass.ru/
- Объединенные кондитеры (Шоколад Алёнка, Рот Фронт, Бабаевский и др.) makeagency.ru/cases/sayt-komp...
t.me/+3nxkH40RoYY4MmEy - Telegram-канал Мэйка. Разбор кейсов, полезные видео и подборки.
Доклад frontend-разработчика агентства Мэйк Даниила Филиппова.
Что такое WebGL, как применять его в веб-разработке. Какие знания нужны для работы с шейдерами, как и при помощи каких библиотек можно интегрировать трехмерную графику на сайт.
0:17 Список вопросов серии докладов
1:30 Что такое WebGL?
4:12 Насколько популярен WebGL спустя 9 лет после первого релиза?
6:24 Какие подводные камни таит в себе WebGL?
7:27 Нужен ли вам программист с высшим естественно-научным образованием?
7:56 Что такое gimbal lock и как с ним бороться?
13:52 Несколько слов про кватернионы
15:42 Почему отладка шейдеров - это всегда боль?
17:00 Две реальные истории о поиске проблемы в коде шейдера, когда ее нет
23:33 Как бороться с утечками видеопамяти и что к ним приводит?
28:00 Сжатые текстуры: для чего они нужны и как с ними работать?
-----------------------------
Мэйк Digital-агентство
Сайты. Реклама. Видео. 3D. Айдентика.
Сайт: makeagency.ru
----------------------------- - Věda a technologie
Хороший, качественный доклад. В рунете это редкость, в основном вода, реклама или самолюбование.
Интересный доклад. Хотелось бы рассмотреть остальные проблемы с webgl.
Надеюсь, встретимся на митапах/конференциях в этом году!
Ребят, наш Telegram-канал: t.me/+3nxkH40RoYY4MmEy Там разбор кейсов, полезные видео и подборки.
Название не соответствует содержанию. Правильное название - "WebGL. Трудности с которыми я столкнулся". Не понимаю, какую мысль хочет донести автор. В любом случае спасибо организаторам за освещение темы
Было интересно, спасибо. Только в следующий раз вы стаканчик воды поставьте рассказчику, а то ему аж больно.
Только в российском сегменте очень любят про математику :) "плохо знаешь математику вали отсюда" , есть прекрасные видео и тестовые схемы формулы используются везде одинаковые во всем можно разобраться. Про библиотеку ThreeJs здесь не знают :))
Здесь, это где?)
Где найти оставшиеся доклады, заявленные вначале?
Тут есть пара моментов) Изначально планировалось сделать серию докладов, да. Но дело было осенью 2020 года, и сначала у меня не было времени на новые лектории. Потом грянула пандемия, а после нее я осознал, что эти темы лучше подходят для статей, нежели для лекториев.
Одна статья была опубликована на сайте агентства: makeagency.ru/blog/three-js-optimizatsiya-razmera-bandla
А вот с остальными... Не сложилось. И к сожалению, уже вряд ли дойдут руки их написать, т.к. я с недавних пор сменил род деятельности и полностью ушел в backend-разработку.
@@o_crest большое спасибо за ссылку и за ответ! Скажи, пожалуйста, как с тобой можно лично связаться? Стало интересно, почему ты решил сменить направление разработки, так как я только хочу встать на путь разработки на WebGL и three.js 🙂
@@Alexander-S. волшебные слова: o_crest, телега, Грам (это уже наверное одиннадцатая попытка ответить вам и сохранить комментарий)
@@Alexander-S. Ну вот мы делаем сейчас сайт с несложным (как нам казалось) слайдером с three.js. Пока есть ощущение что лучше от него по максимуму избавляться )
Ролики, свг, цсс анимация, да что угодно. Потому что инструмент в отладке крайне сложный
@@o_crest а вы долго делали сайт вашего агентства, с головой? Только честно? )
Так почему всё-таки PNG "весит" 87 Мб? Может у PNG может быть прозрачность и поэтому весит больше в памяти? А JPG не имеет прозрачности и поэтому "весит" меньше?
Очень хороший вопрос) Действительно, как оказалось, дело в альфа-канале, но все немного сложнее.
Объем изображения в формате JPG без прозрачности (формат RGB8): 4096 * 4096 * 3 = 50331648 байт, что сильно не соответствует наблюдаемым 65 MB.
Изначально полагал, что изображение в формате JPG «на лету» перекодируется в формат RGBA8, отсюда
4096 * 4096 * 4 = 67108864 байт, что уже гораздо похоже на правду (а разницу в ~2 MB списал на какие-нибудь оптимизации видеокарты)
Только это не объясняло размер в 87 MB для формата PNG. Времени тогда разобраться в вопросе более детально у меня не было, поэтому предположил, что дело в алгоритме сжатия PNG (затратах на декодирование).
Но истинная причина была в том, что я в своих расчетах не учел факт наличия mipmaps у итоговых текстур. Первые требуют на 1/3 больше видеопамяти (доказательство достаточно тривиальное, нужно посчитать бесконечную сумму ряда 1/(4^n)).
Тогда:
JPG: 4096 * 4096 * 3 * 4 / 3 = 67108864
PNG: 4096 * 4096 * 4 * 4 / 3 ≈ 89478485
- эти значения тоже чуть больше тех, что показываются в chrome://tracing, но, возможно, дело уже в округлении. Если вместо 4/3 взять грубые 1.3:
JPG: 4096 * 4096 * 3 * 1.3 ≈ 65431142
PNG: 4096 * 4096 * 4 * 1.3 ≈ 87241523
- что уже очень хорошо согласуется с представленными значениями.
@@o_crest Спасибо за описание. А разве mip-map'ы для текстур не отдельно включаются? Или автоматически генерируются?
@@wizardjediable да, в общем случае их нужно включать отдельно, но библиотека three.js по умолчанию задает их автоматическую генерацию (в документации можно посмотреть описание свойства generateMipmaps для класса Texture, которое по умолчанию установлено в true)
P.S. CZcams, похоже, автоматически удаляет мои комментарии со ссылками, считая их спамом (ответил вам вчера, но сегодня комментария уже нет)