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

Просто статья о процессе создания интерфейса, 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

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

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

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

#article

И последняя, золотая статья аж 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

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

#inspiration

Consistent Video Depth Estimation

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

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

#tool

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

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

#reference

by https://dribbble.com/nathanriley

#inspiration

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

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

#article

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

#inspiration

by https://twitter.com/ajayns_

#reference

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

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

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

#article

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

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

#reference

На днях релизнулся один из крутейших проектов в которых я принимал участие – сайт 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

FWA SOTD ✅

https://thefwa.com/cases/mavfarm

#award

Как круто рендерить кукурузку или разбор corn revolution 🌽

По запросу ребят из @promaxdesign решил исследовать рендеринг https://go.pioneer.com/cornrevolution от https://resn.co.nz/. Там действительно есть крутые фишки, но обо всём по порядку 😊

Разберу рендеринг первой сцены, потому что всё сразу запарно. Если что-то конкретное интересно и нужно разобрать — жду фидбек 😉

Для работы с WebGL используется старая добрая трёха. В принципе весь пайплайн довольно прямолинейный, рисуется фон, потом частицы, потом собственно качан, текст и пост обработка.

Фон – два радиальных градиента на SDF с шумом, шум самый обычный

fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); 

Частицы в расфокусе на самом деле не в расфокусе, а полупрозрачные поинты, форма которых определяется опять же при помощи SDF. Как это делать можно почитать тут – https://thebookofshaders.com/07/. Разрабы прямо в коде шейдера манерно оставили ссылку :) Цвет определяется просто юниформой, а вот прозрачность зависит от 4х факторов – форма (SDF), расстояние, время и юниформа opacity.

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

А потому, что блюр качана делается тоже при растеризации. Это даже не блюр, а просто текстура с альфа каналом, который делает края листов прозрачнее. Кроме того, освещение запечено в 4х текстурах и интерполируется в зависимости от вектора uTextureBlend, который в свою очередь зависит от поворота качана:

    vec4 textureTopLeft = texture2D(uTextures[0], uv);
    vec4 textureTopRight = texture2D(uTextures[1], uv);
    vec4 textureBottomLeft = texture2D(uTextures[2], uv);
    vec4 textureBottomRight = texture2D(uTextures[3], uv);
    vec4 outputTop = mix(textureTopLeft, textureTopRight, uTextureBlend.x);
    vec4 outputBottom = mix(textureBottomLeft, textureBottomRight, uTextureBlend.x);
    finalOutput = mix(outputTop, outputBottom, uTextureBlend.y);

На каждый фрагмент тратится просто 5 чтений текстуры, 3 линейные интерполяции и одно деление для альфы. И всё. Блюр на WebGL тормозит? Нет, Resn про это не слышали. И освещение на высшем уровне без больших затрат на его вычисление. Очень круто 🤘

Текст рисуется MSDF, линии SDF, кружочки — поинты. После предыдущего не так интересно, техники известные, реализация крутая и хорошо проработанная.

В пост обработке помимо прочего ещё одна крутая фишка — на всю картинку накладывается тот самый шум с небольшим весом. Обычный дизеринг, благодаря которому глаз меньше замечает алиасинг. И не нужно рендерить всё в 2х разрешении и кинематографичная картинка на выходе. Ну или как будто стилизация под рейтрейсинг без денойза, кому что ближе. Надо будет попробовать 😊

Там ещё много всякого шаманства, но смысл его разобрать с наскоку сложно, а фишек для реализации уже и так достаточно. Resn провели отличную работу по оптимизации и тюнингу итоговой картинки 👍

Похожие переходы между сценами вроде описаны тут https://yangx.top/creative_coder/45 но это не точно

Спасибо @eX_gd за найденные ошибки и помощь в их исправлении 💪

Как обычно, возникшие вопросы задавайте в @creativecoders или @webgl_ru. Cheers!

#reference #tutorial

Awwwards SOTD & DEV AWARD ✅

https://www.awwwards.com/sites/mavfarm

#award