Media is too big
VIEW IN TELEGRAM
Так, я сделал демку для объяснения искажения оптикой - завтра начну постить про глитчи/искажения посты
🔥12
Итак, начнем с самого начала: захвата оптического сигнала и передачи его на сенсор. То есть с объектива.
Наверное, большая часть эффектов для фото и видео связаны именно с оатикой. Для начала, посмотрим на устройство объектива.
Ну и вспомним пару важных терминов (упрощенно - нам хватит):
Дифракция — свет «огибает» кромки и отверстия, размывая мелкие детали.
Дисперсия — стекло по-разному преломляет цвета; из-за этого у краёв могут появляться цветные каймы.
Почти все эффекты строятся на этих двух явлениях и геометрической оптике (хотя напрямую мы ее использовать не будем)
Наверное, большая часть эффектов для фото и видео связаны именно с оатикой. Для начала, посмотрим на устройство объектива.
Ну и вспомним пару важных терминов (упрощенно - нам хватит):
Дифракция — свет «огибает» кромки и отверстия, размывая мелкие детали.
Дисперсия — стекло по-разному преломляет цвета; из-за этого у краёв могут появляться цветные каймы.
Почти все эффекты строятся на этих двух явлениях и геометрической оптике (хотя напрямую мы ее использовать не будем)
👍3
Итак, пойдем вместе с лучом и посмотрим, что может пойти не так (потом каждый пункт отдельно рассмотрим):
1. Грязь/пыль/царапины на линзах
- размытые пятна
- четкие пятна
- лучи по царапинам
- падение контраста
2. Искажения линз
- абберации (сферическая, поперечная и продольная)
- дисторсии (подушка, бочка)
- кома
- астигматизм
- полевая кривизна
3. Поломки и искажения групп линз
- Блики и засветки
- Смещение линз
4. Диафрагма
- глубина резкости
- боке
5. Система фокусировки
- дыхание фокуса
- расфокус
6. Виньетирование
- механическое
- cos^4
Как видите, набор эффектов довольно большой (возможно что-то пропустил), поэтому хватит на долго.
1. Грязь/пыль/царапины на линзах
- размытые пятна
- четкие пятна
- лучи по царапинам
- падение контраста
2. Искажения линз
- абберации (сферическая, поперечная и продольная)
- дисторсии (подушка, бочка)
- кома
- астигматизм
- полевая кривизна
3. Поломки и искажения групп линз
- Блики и засветки
- Смещение линз
4. Диафрагма
- глубина резкости
- боке
5. Система фокусировки
- дыхание фокуса
- расфокус
6. Виньетирование
- механическое
- cos^4
Как видите, набор эффектов довольно большой (возможно что-то пропустил), поэтому хватит на долго.
🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Итак, первый эффект (по ходу применения к картинке, чтобы было физически верно) - дыхание фокуса (focus breathing)
Это вот эти вот этот вот расфокус с зумом, как на видео
Это вот эти вот этот вот расфокус с зумом, как на видео
🔥2
Дыхание фокуса (focus breathing)
Принцип:
По время катания туда-сюда фокусирующей группы меняется фокусное расстояние объектива, что приводит к небольшим зумам (1-10% в зависимости от качества). Если еще и механизм поломан, то будет не плавно ездить, а рывками
Алгоритм:
1. Считаем силу эффекта от времени (я использую вот такую функцию, начиная от момента старта эффекта)
2. По модулю от (1) считаем блюр (я использую
3. Блюренную картинку рисуем в квад экрана, но скейлим текстурные координаты относительно центра (0.5) для эффекта зума
Вот так просто
Принцип:
По время катания туда-сюда фокусирующей группы меняется фокусное расстояние объектива, что приводит к небольшим зумам (1-10% в зависимости от качества). Если еще и механизм поломан, то будет не плавно ездить, а рывками
Алгоритм:
1. Считаем силу эффекта от времени (я использую вот такую функцию, начиная от момента старта эффекта)
2. По модулю от (1) считаем блюр (я использую
MPSImageGaussianBlur)3. Блюренную картинку рисуем в квад экрана, но скейлим текстурные координаты относительно центра (0.5) для эффекта зума
Вот так просто
Desmos
Desmos | Graphing Calculator
Explore math with our beautiful, free online graphing calculator. Graph functions, plot points, visualize algebraic equations, add sliders, animate graphs, and more.
🔥4
Замечание:
Хотя я объединил расфокус и дыхание (потому что так нагляднее и красивее), в реальной жизни они должны идти отдельно и доволно далеко друг от друга (потому что фокус это по сути один из последних эффектов). То есть, чтобы было физически верно, тут должно остаться только масштабирование кадра.
Ну и возникает сложность синхронизации кривых между далеко отстоящими эффектами, поэтому пока оставляем как есть
Хотя я объединил расфокус и дыхание (потому что так нагляднее и красивее), в реальной жизни они должны идти отдельно и доволно далеко друг от друга (потому что фокус это по сути один из последних эффектов). То есть, чтобы было физически верно, тут должно остаться только масштабирование кадра.
Ну и возникает сложность синхронизации кривых между далеко отстоящими эффектами, поэтому пока оставляем как есть
🔥2🤔2
Media is too big
VIEW IN TELEGRAM
Следующее - радиальная дисторсии из-за оптики (тут видно подушку, бочку и их комбинацию - "усы"
🔥3❤1
Принцип:
Из-за того, что мы живем в реальном физическом мире (а не идеальной математической абстракции - хотя как посмотреть), а делать сложные формы линз технологически дорого, они (линзы) создают геометрические искажения изображения.
Как видим из-за разной толщины линзы, преломлений и тд по мере отдаления от оптической оси плотность проектируемых точек уменьшается (может и увеличиваться - зависит от линз).
Тут чисто геометрия и оптика. Единственная проектирующая система, которая не будет давать искажений - пинхол (но у нее свои проблемы).
Из-за того, что мы живем в реальном физическом мире (а не идеальной математической абстракции - хотя как посмотреть), а делать сложные формы линз технологически дорого, они (линзы) создают геометрические искажения изображения.
Как видим из-за разной толщины линзы, преломлений и тд по мере отдаления от оптической оси плотность проектируемых точек уменьшается (может и увеличиваться - зависит от линз).
Тут чисто геометрия и оптика. Единственная проектирующая система, которая не будет давать искажений - пинхол (но у нее свои проблемы).
❤3
Алгоритм (упрощенный):
Все делается во фрагментном шейдере
1. Переходим в осесимметричное пространстве (вычитаем из точки центр)
2. Считаем, куда мы попадем, масштабируя этот вектор коэффициентом от полинома по его длине
3. Переходим обратно в нормальные координаты (прибавляем центра)
4. Сэмплим входную текстуру по этим новым координатам
Можно сделать несколько итераций [3] для большей точности. Ну и не забывайте соотношение сторон учитывать, чтоб не получить оптику странной геометрии)))
Функция для радиальной дисторсии:
https://www.desmos.com/3d/i7v1yl7s5y
Все делается во фрагментном шейдере
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
Desmos
Brown–Conrady (radial)
Explore math with our beautiful, free online graphing calculator. Graph functions, plot points, visualize algebraic equations, add sliders, animate graphs, and more.
Принцип:
Из-за смещениялинзы относительно оптической оси системы нарушается радиальная симметрия, и картинка как бы съезжает, а так как мы работаем с оптикой и преломлением хода лучей, то еще и искривляется
Алгоритм:
То же, что и в прошлый раз, но в (2) мы не умножаем на коэффициент, а добавляем вектор, который считаем из текущих координат, расстояния до центра и коэффициентов.
Для тангенциальной:
https://www.desmos.com/3d/urwkdxvkoi
Из-за смещениялинзы относительно оптической оси системы нарушается радиальная симметрия, и картинка как бы съезжает, а так как мы работаем с оптикой и преломлением хода лучей, то еще и искривляется
Алгоритм:
То же, что и в прошлый раз, но в (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
Desmos
Brown-Conrady (tangential)
Explore math with our beautiful, free online graphing calculator. Graph functions, plot points, visualize algebraic equations, add sliders, animate graphs, and more.
✍4
Это упрощенный подход. Если хотите точности, плавности на всех занчениях и прочего - нужно реализовывать модель Брауна-Конрада итеративно проходов в 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👀2
Нашел интересный канал про музыку и математику
https://www.youtube.com/@mathemusique
https://www.youtube.com/@mathemusique
✍1
Прогаем с кенгурой
Нашел интересный канал про музыку и математику https://www.youtube.com/@mathemusique
У него еще ссылка на сайт есть:
https://rhythm-circle.com
https://rhythm-circle.com
🔥4
Media is too big
VIEW IN TELEGRAM
И последнее искажение из геометрических - поперечная цветовая абберация (продольная будет позже)
🔥2❤1👍1
Принцип:
По закону Снеллиуса имеем
По закону Снеллиуса имеем
n1*sinΘ1 = n2*sinΘ2. Соль в том, что разные длины волн имеют разные показатели преломления и, как результат, - разные углы преломеления, из-за чего возникает/усиливается дисперсия по мере удаления от оптической оси (где грани линзы менее параллельны). То есть искажение будет тоже радиальное.👀1
Алгоритм:
1. Переходим в осесимметричное пространство,
2. Считаем сдвиг для каждого канала отдельно
3. Переходим обратно
4. Сэмплим каждый канал отдельно
потом
1. Переходим в осесимметричное пространство,
2. Считаем сдвиг для каждого канала отдельно
3. Переходим обратно
4. Сэмплим каждый канал отдельно
Чтобы было физично, у красного k1 должен быть положительный, у синего - отрцательный, у зеленого - ноль
static inline float2 distortion(float2 uv, float2 C, float2 aspect, float2 k) {
float2 d = uv - C;
float2 diso = d * aspect;
float r2 = dot(diso, diso);
float r4 = r2 * r2;
float s = 1.0 + k.x * r2 + k.y * r4; // 1 + k1 r^2 + k2 r^4
float2 xu_iso = diso / max(s, 1e-6);
return C + xu_iso / aspect;
}
потом
//...
float2 uvR = distortion(in.uv, U.center, U.aspect, U.kR);
float2 uvG = distortion(in.uv, U.center, U.aspect, U.kG);
float2 uvB = distortion(in.uv, U.center, U.aspect, U.kB);
float r = src.sample(S, uvR).r;
float g = src.sample(S, uvG).g;
float b = src.sample(S, uvB).b;
Как видите - это немного отличается от попсовой реализации, когда просто сдвигаем каналы друг относительно друга, забивая на оптику
👏3
Адаптировал вводные статьи по Металу для сайта: https://latooksoftware.com/article.html?article=metal/mtl_s01e00.md
🔥8