Прогаем с кенгурой

Это упрощенный подход. Если хотите точности, плавности на всех занчениях и прочего - нужно реализовывать модель Брауна-Конрада итеративно проходов в 4-5, высчитывая куда прилетит луч, и после - откуда. Формулы будут +/- те же за исключением того, что нужно будет считать промежуточный вектор умножая на коэффициент (или прибавляя тангенциальное смещение), а потом приращивать результат. То есть что-то вроде такого:

static inline float2 distort(float2 uv, constant DecenteringUniforms& params) {
    // Fixed-point: xu_{n+1} = xu_n + (xd - distort_forward(xu_n))
    float2 d = uv - params.center;
    float2 scale = float2(params.aspect.x, params.aspect.y);
    float2 xd = d * scale;

    float2 xu = xd;
    for (int i=0; i<5; ++i) {
        float2 xh = forward(xu, params);
        xu += (xd - xh);
    }

    return params.center + xu / scale;
}

Принцип: Из-за смещениялинзы относительно оптической оси системы нарушается радиальная симметрия, и картинка как бы съезжает, а так как мы работаем с оптикой и преломлением хода лучей, то еще и искривляется Алгоритм: То же, что и в прошлый раз, но в (2) мы не умножаем на коэффициент, а добавляем вектор, который считаем из текущих координат, расстояния до центра и коэффициентов. Для тангенциальной:

static inline float2 tangential_distort(float2 uv, constant Parameters& params) {
    // Fixed-point: xu_{n+1} = xu_n + (xd - distort_forward(xu_n))
    float2 d = uv - params.center;
    float2 scale = float2(params.aspect.x, params.aspect.y);
    float2 xd = d * scale;

    float x = xd.x, y = xd.y;
    float r2 = dot(xd, xd);
    float x2 = x*x, y2 = y*y, xy = x*y;
    float2 tang = float2(2.0 * params.p1 * xy + params.p2 * (r2 + 2.0 * x2),
                         params.p1 * (r2 + 2.0 * y2) + 2.0*params.p2 * xy);
    float2 xu = xd - tang;

    return params.center + xu / scale;
}

https://www.desmos.com/3d/urwkdxvkoi

Сразу тут же - тангенциальная дисторсия

Алгоритм (упрощенный): Все делается во фрагментном шейдере 1. Переходим в осесимметричное пространстве (вычитаем из точки центр) 2. Считаем, куда мы попадем, масштабируя этот вектор коэффициентом от полинома по его длине 3. Переходим обратно в нормальные координаты (прибавляем центра) 4. Сэмплим входную текстуру по этим новым координатам Можно сделать несколько итераций [3] для большей точности. Ну и не забывайте соотношение сторон учитывать, чтоб не получить оптику странной геометрии))) Функция для радиальной дисторсии:

static inline float2 radial_distort(float2 uv, constant Parameters& params) {
    float2 scale = params.aspect;
    float2 xd = (uv - params.center) * scale;

    // Brown–Conrady in aspect-corrected space
    float r2 = dot(xd, xd);
    float r4 = r2*r2;
    float r6 = r4*r2;
    float radial = 1.0 + params.k1*r2 + params.k2*r4 + params.k3*r6;

    float2 xu = xd / radial;

    return params.center + xu / scale;
}

https://www.desmos.com/3d/i7v1yl7s5y

Принцип: Из-за того, что мы живем в реальном физическом мире (а не идеальной математической абстракции - хотя как посмотреть), а делать сложные формы линз технологически дорого, они (линзы) создают геометрические искажения изображения. Как видим из-за разной толщины линзы, преломлений и тд по мере отдаления от оптической оси плотность проектируемых точек уменьшается (может и увеличиваться - зависит от линз). Тут чисто геометрия и оптика. Единственная проектирующая система, которая не будет давать искажений - пинхол (но у нее свои проблемы).

Следующее - радиальная дисторсии из-за оптики (тут видно подушку, бочку и их комбинацию - "усы"

Замечание: Хотя я объединил расфокус и дыхание (потому что так нагляднее и красивее), в реальной жизни они должны идти отдельно и доволно далеко друг от друга (потому что фокус это по сути один из последних эффектов). То есть, чтобы было физически верно, тут должно остаться только масштабирование кадра. Ну и возникает сложность синхронизации кривых между далеко отстоящими эффектами, поэтому пока оставляем как есть

Дыхание фокуса (focus breathing) Принцип: По время катания туда-сюда фокусирующей группы меняется фокусное расстояние объектива, что приводит к небольшим зумам (1-10% в зависимости от качества). Если еще и механизм поломан, то будет не плавно ездить, а рывками Алгоритм: 1. Считаем силу эффекта от времени (я использую вот такую функцию, начиная от момента старта эффекта) 2. По модулю от (1) считаем блюр (я использую MPSImageGaussianBlur) 3. Блюренную картинку рисуем в квад экрана, но скейлим текстурные координаты относительно центра (0.5) для эффекта зума Вот так просто

Итак, первый эффект (по ходу применения к картинке, чтобы было физически верно) - дыхание фокуса (focus breathing) Это вот эти вот этот вот расфокус с зумом, как на видео

Итак, пойдем вместе с лучом и посмотрим, что может пойти не так (потом каждый пункт отдельно рассмотрим): 1. Грязь/пыль/царапины на линзах - размытые пятна - четкие пятна - лучи по царапинам - падение контраста 2. Искажения линз - абберации (сферическая, поперечная и продольная) - дисторсии (подушка, бочка) - кома - астигматизм - полевая кривизна 3. Поломки и искажения групп линз - Блики и засветки - Смещение линз 4. Диафрагма - глубина резкости - боке 5. Система фокусировки - дыхание фокуса - расфокус 6. Виньетирование - механическое - cos^4 Как видите, набор эффектов довольно большой (возможно что-то пропустил), поэтому хватит на долго.

Итак, начнем с самого начала: захвата оптического сигнала и передачи его на сенсор. То есть с объектива. Наверное, большая часть эффектов для фото и видео связаны именно с оатикой. Для начала, посмотрим на устройство объектива. Ну и вспомним пару важных терминов (упрощенно - нам хватит): Дифракция — свет «огибает» кромки и отверстия, размывая мелкие детали. Дисперсия — стекло по-разному преломляет цвета; из-за этого у краёв могут появляться цветные каймы. Почти все эффекты строятся на этих двух явлениях и геометрической оптике (хотя напрямую мы ее использовать не будем)

Так, я сделал демку для объяснения искажения оптикой - завтра начну постить про глитчи/искажения посты

Сделал видео про цветовые модели: https://www.youtube.com/watch?v=6i8UjP9S2LA Хотя оно пересекается с тем, что я тут рассказывал,что-то может отличаться в деталях. Ну и демку я таки допили на three.js )))))

Сейчас будет мат, простите)) Готовлю материал для видео про цвета. Решил сделать демку интерактивную на three.js - что-нибудь новое попробовать. Так как я его в первый раз в жизни вижу, решил сходить к жепете. И вот оно! Гпт5 ведет себя наконец как настоящий разраб! Попросил его сделать каркас для демки. Этот долбоеб пол вечера заебывал меня уточняющими вопросами и обещаниями, что вот сейчас вот сделает все, сейчас дотестит, вот вот - архивирует уже и … не выдал нихуя. Когда я сказал ему, что мне нужен хоть какой-то результат, а он - долбоеб, жепетя ответило:

Обещаю: в следующий раз вместо «ещё один уточняющий вопрос» будет файл или честное “не могу”. Если хочешь — можем сейчас реально продолжить и сделать минимальный рабочий прототип (без профилей, просто объёмы), просто скажи «давай по-быстрому». В любом случае — спасибо, это было смешно и по делу 🙂

Песочница готова, можно наполнять. Начну с оптики, но уже не сегодня. ChatGPT сильно помог в набрасывании песочницы. Хотя он все еще сильно тупит в создании чего-то цельного, но хорошо справляется с реализацией мелких деталей и вспомогательных функций (правда иногда все равно творит лютую дичь)

Прежде чем перейти к описанию каждого элемента, мне надо подготовить песочницу, чтобы в ней все это дело реализовывать, так что будет пауза. А пока вот вам утки на дереве

Если вас пугают некоторые слова - не пугайтесь, я распишу каждый этап с объяснением общих принципов, физики, математики и примерами алгоритмов (по возможности)