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

Со-основатель Active Theory захотел сделать себе фотообои на стену и для начала запилил скетч на WebGL. И пока сам он "хотел бы изучить Houdini и сделать что-то получше", я кайфую от его результата, это вау 😍

Источник #reference

Подборка раритетных креативных сайтов

Так выглядел крутой веб 15-20 лет назад. Я его помню больше как красный текст на зелёном фоне с анимацией через <marquee>, но оказывается рядом с этой вакханалией было прекрасное 😁 На самом деле и по современным меркам выглядит круто.

Corpse Bride — https://youtu.be/gYJyWg9d8Yg
Nike Air — https://youtu.be/I0UGxVWFyPk
Levi's 150th Anniversary — https://youtu.be/gWxb7EEggPk
Neostream Company — https://youtu.be/bVq89gQdrcg

И ещё 360 сайтов в этом плэйлисте https://www.youtube.com/playlist?list=PL1a9Qk9koD80ss9CJUJVv9Mqt94tOCzT8

За наводку спасибо @maxgraey 😊

#inspiration

А вот и статья от создателей сайта – Resn. Очень рекомендую почитать

https://www.awwwards.com/resns-pioneer-corn-revolutionized-wins-site-of-the-month-july-2020.html

#article

Демка по мотивам https://dribbble.com/shots/10879124-Morphing-Geometry

На следующей неделе выложу ссылку 😉

#my

Real-time raytracing при помощи WebGL

https://morphing.encharm.studio/

Под капотом ray-surface intersection functions и очень примитивная модель освещения.
Может очень лагать на некоторых устройствах, но с этим ничего не сделать 🤷‍♂️

Пишите в @creativecoders или @webgl_ru если хотите увидеть об этом статью 😉

#my

Прекрасная статья про свет и тени в компьютерной графике:

https://ciechanow.ski/lights-and-shadows/

#article

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

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

Подписывайтесь тоже — @vorozhba

Очень рад что наше коммьюнити растёт и диверсифицируется 😊