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

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

House of Maserati

https://houseof.maserati.com/ — сайт посвящённый оффлайновым презентациям новых автомобилей Мазерати.

Очень жирный графоний, классная работа со светом, материалами, композицией ну и классные машины само собой (а я их очень люблю). Resn как обычно на высоте 😍

#reference

Наткнулся на забавный ML-эксперимент от Google:
Мини-игра которая показывает вам emoji и просит найти этот объект камерой, работает в вебе – https://emojiscavengerhunt.withgoogle.com/

P.S. Убираться лень

В наших рядах креативных разработчиков со своими каналами прибыло :)

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

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

Кроме того он создал полезную библиотеку для бутстраппинга простых демок на фрагментных шейдерах на 1 треугольнике. Полезная штука, позволяет сразу записывать видео с вашим шотом 😉

http://julieguzal.fr — сайт-портфолио интерактивного дизайнера.

Прикольный эффект взлетающих от курсора частиц и в целом симпатично всё.

#reference