21

Есть видео с action-камеры, которая при записи применяет эффект типа рыбьего глаза. Область, которая должна быть прямоугольной, имеет несколько скруглённую форму - в сниппете она отмечена красным. Хотелось бы растянуть её обратно до синего прямоугольника. Я могу нарисовать 2 вертикальные или даже все 4 линии, по которым можно определить искажение. Как выполнить трансформацию?

html, body, svg { height: 100%; margin: auto; display: block; }
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 171" version="1.1">
  <rect x="0.5" y="0.5" width="255" height="170" style="fill:none;stroke:#0000ff;stroke-width:1;" />
  <path style="fill:none;stroke:#ff0000;stroke-width:1;" d="M 9.2899892,9.8523004 C 0.36470721,58.788143 -1.8968968,109.53857 3.9756332,162.39638 97.464286,177.03692 179.23564,170.77632 254.10649,152.20674 257.52686,105.38064 253.68709,59.452773 242.81437,11.823413 163.07157,-1.6658033 92.718066,-2.2737144 9.2899892,9.8523004 Z" />
</svg>

Если я правильно понимаю, то можно использовать фильтр lenscorrection в ffmpeg, но я не знаю, как подобрать параметры. Попробовал взять один кадр и поиграться с ним в Gimp'е, но из этого ничего не вышло.

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

Гарантируется, что рамка будет иметь именно такой вид: 4 ломаных точки с направляющими (в идеале обойтись только двумя вертикальными линиями):

скриншот с направляющими

Другой пример:

html, body, svg { height: 100%; margin: auto; display: block; }
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 106" version="1.1" >
  <path style="fill:none;stroke:#000000;stroke-width:1;" d="M 1.7008913,10.872024 C -0.67393974,43.547945 0.43942626,72.73567 0.94494026,102.53125 63.525193,106.64485 143.73295,106.1533 200.51635,98.940476 201.24176,66.541427 200.09818,34.516174 195.79166,3.1235117 135.27441,-2.4071433 83.446773,-0.03728631 1.7008913,10.872024 Z" />
</svg>

Ответом на вопрос может быть любой вариант из следующих:

  • Готовая программа, которая выполняет задачу для видео или кадра.
  • Способ подобрать корректные параметры для ffmpeg.
  • Формула для вычисления старых координат пикселя по координатом на изображении-результате.
  • Другое представление графической трансформации.
  • ...
5
  • Такое искажение может иметь разную природу, сферическую, параболическую и может что-то еще. Лучше всего было бы взять 1 кадр на котором сфотографирована квадратная сетка. И после применения фильтра/формулы смотреть на результат.
    – Zergatul
    2 июн 2019 в 21:13
  • @Zergatul, образец кадра: i.stack.imgur.com/LyTve.jpg, кривая скорее всего такая: d="m 67.94122,30.14881 c -2.170733,31.581695 -1.081358,62.122048 1.181174,92.46243 61.174186,3.00445 145.332886,3.54913 197.728786,-4.016 C 268.68617,86.399109 266.5452,54.430428 262.12649,22.400297 176.83069,17.098953 152.8637,20.456246 67.94122,30.14881 Z". Сетки не будет, видео уже есть. Но если всё сделано правильно, все 4 линии колонн должны стать вертикальными.
    – Qwertiy
    2 июн 2019 в 21:32
  • @Qwertiy а это место у Вас в зоне досягаемости? Вы можете сделать ещё один кадр там? Без fisheye 3 июн 2019 в 7:48
  • @StrangerintheQ, нет, не могу. К тому же. 1. Новый кадр будет с другой точки и под другим углом - не уверен насколько он оказался бы полезен. 2. Уже есть сомнения, что это всё вообще понадобится :(
    – Qwertiy
    3 июн 2019 в 11:16
  • я хотел проверить какие искажения получают колонны в зависимости от центра фокусировки камеры и без рыбоглаза 3 июн 2019 в 11:17

2 ответа 2

23
+500

Это задача может быть решена при помощи трансформации текстурных координат во фрагментном шейдере.

let inputs = ['fisheye:321', 'cX:495', 'cY:334', 'rY:258', 'rZ:562', 'zoom:581']
let input = (id, val) => `<label for="${id}"></label>
<input id="${id}" type="range" min="0" max="1000" value="${val}" onmousemove="draw()"/>`
inputs.forEach(i => inp.innerHTML += input(...i.split(':')))
let gl = canvas.getContext('webgl');
let loader = new Image();
loader.crossOrigin = "anonymous";
loader.src = "https://i.imgur.com/G9H683l.jpg";
loader.onload = function() { 
    canvas.width = loader.width;
    canvas.height = loader.height;
    pid = gl.createProgram();
    shader(`
        float perspective = 1.0;          
        attribute vec2 coords;
        uniform float rY; 
        varying vec2 uv;
        void main(void) {
          mat3 rotY = mat3(vec3(cos(rY),  0.0, sin(rY)), 
                           vec3(0.0,      1.0,     0.0),
                           vec3(-sin(rY), 0.0, cos(rY)));
          vec3 p =  vec3(coords.xy, 0.) * rotY;
          uv = coords.xy*0.5 + 0.5;   
          gl_Position = vec4(p, 1.0 + p.z * perspective);
        }
    `, gl.VERTEX_SHADER);
    shader(`
      precision highp float;
      const vec2 res = vec2(${canvas.width}., ${canvas.height}.);  
      varying vec2 uv;
      uniform float fisheye;
      uniform float cX;
      uniform float cY;
      uniform float rZ; 
      uniform float zoom; 
      uniform sampler2D texture;

      // http://stackoverflow.com/questions/6030814
      void main(void) {
        float prop = res.x / res.y;        
        vec2 center = vec2(cX, cY);
        vec2 p = vec2(uv.x,uv.y/prop); 
        vec2 m = vec2(0.5, 0.5 / prop);
        vec2 d = p - m;
        float r = sqrt(dot(d, d));
        float power = (2.0 * 3.141592 / (2.0 * sqrt(dot(m, m)))) * fisheye; 
        float bind;            
        if (power > 0.0) {                
          bind = sqrt(dot(m, m)); 
        } else {                          
          if (prop < 1.0) bind = m.x; 
          else bind = m.y; 
        } 
        vec2 uv = p;                     
        if (power > 0.0) 
          uv = m + normalize(d) * tan(r * power) * bind / tan( bind * power);
        else if (power < 0.0)         
          uv = m + normalize(d) * atan(r * -power * 10.0) * bind / atan(-power * bind * 10.0);
        uv -= vec2(0.5, 0.5/prop); 
        vec2 sc = vec2(sin(rZ), cos(rZ));
        uv *= mat2(sc.y, -sc.x, sc.xy);
        uv *= zoom+1.; 
        uv -= center;
        uv += vec2(0.5, 0.5/prop);
        uv = vec2(uv.x, 1.-uv.y * prop);
        gl_FragColor = texture2D(texture, uv);
      }
    `, gl.FRAGMENT_SHADER);
    gl.linkProgram(pid);
    gl.useProgram(pid);
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]), gl.STATIC_DRAW);
    let al = gl.getAttribLocation(pid, "coords");
    gl.vertexAttribPointer(al, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(al);
    let texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, loader);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.uniform1i(gl.getUniformLocation(pid, "texture"), 0);
    inputs = inputs.map(i => document.querySelector('#' + i.split(':')[0]))
    inputs.forEach(i => i.uniform = gl.getUniformLocation(pid, i.id))
    draw();
}
  
function draw() {
  inputs.forEach(i => {
    gl.uniform1f(i.uniform, i.value/5000-0.1);
    document.querySelector(`label[for="${i.id}"]`)
            .textContent = `${i.value} ${i.id}: ${(i.value/5000-0.1).toFixed(4)}`
  })
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0, 0, 0, 0);
  gl.drawArrays(gl.TRIANGLES, 0, 6);
}

function shader(src, type) {
  let sid = gl.createShader(type);
  gl.shaderSource(sid, src);
  gl.compileShader(sid);
  var message = gl.getShaderInfoLog(sid);
  gl.attachShader(pid, sid);
  if (message.length > 0) {
    console.log(src.split('\n').map(function (str, i) {
      return ("" + (1 + i)).padStart(4, "0") + ": " + str
    }).join('\n'));
    throw message;
  }
}
input{width:calc(100% - 190px)}
label{display:inline-block;width:180px}
<span id="inp"></span>
<canvas id="canvas" style="zoom:0.6"></canvas>


PS: после недолгих исследований удалось собрать ffmpeg, прикрутив к нему данный шейдер, подробности тут

код на github


Результат (не сильно старался с коэффициентами)

До

введите сюда описание изображения

После

введите сюда описание изображения

UPD: изменения в сниппете

3
  • Просто кривые Безье в Inkscape нарисовать относительно легко, а задать параметры как-то по-другому - я не представляю как. Но как минимум ты должен использовать центральную точку, относительно которой делается преобразование. Ещё там скорее всего есть какая-то трапеция, если камера не строго перпендикулярна снимаемой поверхности. И ещё потенциальный угол поворота вокруг перпендикулярной оси. Видимо, вокруг всех трёх осей, но одно из них я уже назвал трапецией. Искажение сферическое, но на шар не похоже, по крайней мере, это далеко не половина шара. Я добавил пример в комментарии под вопросом.
    – Qwertiy
    2 июн 2019 в 21:39
  • Давайте продолжим обсуждение в чате.
    – Qwertiy
    2 июн 2019 в 22:23
3

Двести лет назад выходила книга про то, как написать свой Wolfenstein. Там была подобная проблема при расчётах: если всё делать по формулам, возникал эффект рыбьего глаза.

Чтобы исправить его, автор предлагал умножать расстояние до стены на косинус угла от центра картинки. Кажется, похожая проблема встречалась не только там.

иллюстрация для дальнейших рассуждений

Я взял вашу иллюстрацию и чуть её дорисовал, чтобы показать, что я имею в виду. Итак, у нас есть точка A, которая на самом деле должна попасть в точку B.

Если верить формуле, с помощью которой избавляются от рыбьего глаза в алгоритме Raycasting, исправить искажение можно, разделив ординату A на косинус λ, а абсциссу — на косинус φ.

Это углы по вертикали и горизонтали от центра картинки. Беда в том, что они зависят от фокусного расстояния камеры. Камера с коротким фокусом видит широкий угол по горизонтали и вертикали, что и создаёт эффект рыбьего глаза.

На представленной картинке центру экрана соответствуют координаты (0; 0) и положительные направления по осям вправо и вверх, то есть так, как в школьных учебниках.

Мы имеем:

yB = yA/cos(λ)
xB = xA/cos(φ)

Отсюда:

cos(λ) = yA/yB и λ = arccos(yA/yB)
cos(φ) = xA/xB и φ = arccos(xA/xB)

Так мы можем рассчитать предельные углы λ и φ.

Теперь сам алгоритм. Вначале вычисляем предельные углы в каждом квадранте. Судя по вашей картинке, камера не очень симметрична и в разных квадрантах изображение может искажаться по разному.

Далее в каждом квадрате идём по всем точкам по вертикали и горизонтали.

В точку B с координатами (xB, yB) мы хотим поместить точку, которая в искажённой картинке соответствует точке А с координатами (xA, yA).

xA = xB * cos(φ)
yA = yB * cos(λ)

Берём цвет пикселя (xA; yA) в искажённой картинке и перекрашиваем в него пиксель (xB; yB) в целевой картинке.

Теперь переходим к соседней слева точке. У неё угол φ будет чуть меньше. Насколько я понимаю, tg(φ) = xB/fH, где fH — фокусное расстояние камеры по горизонтали. В идеальном мире горизонтальный фокус должен совпадать с вертикальным, но похоже, что искажения носят чуть более сложный характер. Мы можем считать, что у нас по два разных фокуса в разных квадрантах, рассчитывая, что это повысит точность вычислений в каждом квадранте. Вычислив через fH через tg(φ), мы далее на каждом шаге можем вычислять новое значение φ через fH:

tg(φ') = (xB - 1)/fH

следовательно

φ' = atan2(fH, xB - 1)
xA' = (xB - 1) * cos(φ')

На этой линии ордината y у нас остаётся неизменной, но на следующей нам нужно будет пересчитать её так же, как мы сделали это для абсциссы.

4
  • Интересно. Камера-то симметрична (ну или почти, кажется, центр смещён), ты просто не учитываешь третий угол - сама снимаемая плоскость повёрнута. Сложилось ощущение, что ты просто пытаешься вытянуть рамку до прямоугольника, но реально там помимо рыбьего глаза повороты по всем трём осям.
    – Qwertiy
    11 июн 2019 в 19:31
  • Кстати, заглядывай в чат: chat.stackexchange.com/rooms/94426/…
    – Qwertiy
    11 июн 2019 в 22:11
  • @Qwertiy, заглянул. У меня опыта работы с GPU и шейдерами никакого, вряд ли я что смогу путного добавить. 12 июн 2019 в 7:04
  • Там подгонка под конкретный кадр, но довольно удачная. Какой-то универсальной формулой никто не занимался даже.
    – Qwertiy
    12 июн 2019 в 11:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.