Как круто рендерить кукурузку или разбор 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://t.me/creative_coder/45 но это не точно

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

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

#reference #tutorial