Creative Coder

FWA SOTD ✅

https://thefwa.com/cases/mavfarm

#award

На днях релизнулся один из крутейших проектов в которых я принимал участие – сайт https://mav.farm/

Казалось бы, это должен был быть обычный лендинг сервиса, но ребята из geex-arts.com решили сделать магию и мощный визуал. Думаю это пример веба будущего, необычный пользовательский опыт вызывает сильнейший эмоциональный отклик, и он в итоге лучше продаёт товар или сервис.

Моей зоной ответственности был естественно WebGL, для работы я выбрал threejs. В целом всё строится на комбинации тривиальных техник и особой rocket science там нет, хотя это может быть эффект Даннинга-Крюгера 🤷‍♂️ Так что задавайте вопросы 😉

Сложнее всего было добиться нормальной работы AnimationMixer с экспортированной из Cinema4D моделью женщины. Пришлось вручную перебирать и удалять глитчевые ключевые кадры, а их там десяток тысяч. Так же была проблема с камерой, созданная в коде анимация между положениями камеры тоже глючила. Нормализация кватернионов результата не дала, в итоге оказалось Quaternion.slerp и slerpFlat выдают разные результаты в зависимости от фазы луны и проще скормить миксеру обрезанную анимацию чисто из результатов интерполяции без интерполируемых значений. Если кто-то знает что я делал не так, пожалуйста напишите)

Материал женщины это просто текстура, uv координаты вычисляются из позиции фрагмента и времени. Блики — dot нормали и положение источника света плюс положение мыши. Засвет границы мэша аналогично dot нормали и положения камеры. Пример того, как мелочи и вроде атомарные операции создают красоту)

Пол это обычный Plane, который сдвигается относительно камеры на фиксированный шаг размером с треугольник, за счёт чего получается эффект его бесконечности. Высота вершин зависит от функции симплексного шума, где на вход подаются координаты вершины, положение курсора и состояние анимации – получаем бесконечную и безумно отзывчивую поверхность

Могу расписать что-то подробнее или ответить на вопросы в чатах @creativecoders и @webgl_ua :)

#my #reference #tutorial

https://www.youtube.com/watch?v=Z9NLxrkMWM4

#inspiration

А вот и твит, упомянутый в предыдущем посте, с демонстрацией SSGI. По сути это модификация SSAO. Думаю разница очевидна и комментировать не нужно :)

https://twitter.com/marcinignac/status/1266321387133833217

#reference

Анализ кадра Mortal Kombat 11

Коненчо, для веба это слишком хардкорно, а для WebGL скорее невозможно, но даже если не знать все эти техники, то хотя бы иметь представление об их существовании полезно. Тем более вон в твиттере уже screen space GI на WebGL сделали)

https://habr.com/ru/post/500840/

#article

by https://twitter.com/ajayns_

#reference

Вышел из рабочего клинча, теперь будут посты :)

#inspiration

Как создавался illuminating-radioactivity.com от tubikstudio.com. И правда, зачем весь этот WebGL, когда есть редимаг? 😏

https://www.awwwards.com/case-study-illuminating-radioactivity-website-by-tubik.html

#article

by https://dribbble.com/nathanriley

#inspiration

Прикольный эксперимент с WebXR от Lusion

https://webxr-sneakers.lusion.co/

#reference

edoardosmerilli.com

#reference

Consistent Video Depth Estimation

Крутой алгоритм определения глубины пикселей. Если это будет летать в real time, можно получить обалденные результаты в AR и без добавления лидаров к устройствам. Код пока недоступен

https://roxanneluo.github.io/Consistent-Video-Depth-Estimation/

#tool

Очень красивый эффект

#inspiration

И последняя, золотая статья аж 2015го года:

GTA V - Graphics Study

Разбор техник применяемых при рендеринге в GTA V в трёх частях.

В блоге ещё несколько разборов рендеринга в ААА играх. Не веб конечно, но отдельные техники применять можно и в WebGL. Adrian Courrèges, ты крутой, спасибо!

http://www.adriancourreges.com/blog/2015/11/02/gta-v-graphics-study/

#article #top

3D-аркада в браузере: как мы сделали игру на React + Redux

Статья о том, как НЕ надо делать 3D игры. Ну или как поднять перформанс Redux

https://habr.com/ru/company/2gis/blog/498638/

#article

Создание интерфейса для игры

Просто статья о процессе создания интерфейса, nothing special.

https://habr.com/ru/post/498600/

К ней прилагаются референсы игровых магазинов и визуального стиля из игр:
https://www.figma.com/file/zNQ09f97jPyl4bFkZtb1tS/GUI_Process_Tutorial
https://www.figma.com/file/WOLAP66uHyUBRj2tnuKY15/GUI_VISUAL_STYLE_REFS (тут бонусные скрины из SC2)

#article #reference

Рубрика почитать на выходных:

Исследование читаемости шрифтов

Засечки вс гротески. Если вкратце – по читаемости шрифты без засечек чуть-чуть лучше, шрифты с засечками вызывают чуть-чуть более выраженный эмоциональный отклик.

https://habr.com/ru/company/tinkoff/blog/498878/

#article