Пользователь
102,0
рейтинг
23 апреля 2014 в 14:59

Разработка → Эффект параллакса (3D) с помощью Lens Blur в Google Camera

В то время как Lytro и прочие выпускают камеры светового поля, компания Google делает магию программными способами. Например, в режиме Lens Blur программа Google Camera использует Z-буферизацию и сохраняет карту глубины (depth map), то есть информацию о расстоянии до объектов.


Depth map в режиме Lens Blur

Несколько дней назад на Github опубликована программка LensBlurDepthExtractor.js, которая извлекает depth map из фотографий, сделанных в Google Camera.

Эти метаданные вы можете использовать для изменения глубины резкости и размытия отделённых объектов.


Изменяем резкость, используя depth map

Красивый эффект параллакса создаётся с эмуляцией 3D-сцены. Уже открылся и первый веб-сервис Depthy, который обрабатывает фотографии, используя вышеупомянутый код.



Исходный код Depthy.
Анатолий Ализар @alizar
карма
744,5
рейтинг 102,0
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (68)

  • –5
    А теперь сделать из этого живые обои и продавать по 30 рублей. Я бы купил.
    • 0
      Есть приложение живых обоев Freshbacks с параллакс-эффектом
      • +3
        Дело не в самом параллакс эффекте, а в том что можно будет самому сделать обои гугл камерой.
  • –4
    Круто, но если сцена статичная и есть время то можно и обычной камерой такое сделать, путем небольших подвижек камеры.
    • 0
      Например вот так(осторожно, большая гифка), примерно десять минут в фоторедакторе на выравнивание горизонта и сведение.
    • 0
      Это делается из фотографии, а не самой камерой.
      • +1
        Понятно, я отвлекся на красивую гифку и невнимательно прочел. Но тем не менее, создание парралаксных «живых» гифок доступно любому энтузиасту, и это увлекательно.
      • 0
        Из простой двумерной фотографии так сделать не получится, необходимым условием является наличие сохраненной карты глубины, то есть картинку нужно снимать изначально с помощью Google Camera. Замкнутый круг.
        Так что комент в целом верный, не понятно почему заминусовали.

        Открывая пост, я, если честно, думал что кто-то смог повторить опыт реализации размытий Google Camera на своем примере. А тут получается что просто взяли готовую маску и сделали по ней блюр (эта карта глубины самая натуральная маска для соединения двух изображений, любой блюр совершенно аналогичным образом делается)

        Более того, таким же образом (используя эту карту глубины) теоретически можно делать любые эффекты: и туман, который будет выглядеть объемно, и бутафорские бокэ из ярких источников заднего плана, и еще много чего интересного.
        В общем все крайне занятно, с этой картой глубины можно делать отпадные вещи.

        • 0
          При обработке иногда рисуют свои карты глубины ради тех самых эффектов. Можно использовать рисованную карту для создания таких параллаксных гифок.
          • 0
            Можно рисовать, конечно. В частности автор предыдущих коментариев показал пример с синтетической картой глубины.
            Но топик посвящен съемке с помощью Google Camera, а она снимает как раз «путем небольших подвижек камеры», о чем и написал #engine9 в своем первом комментарии.
            Поэтому высказывание о том, что «делается не самой камерой» в текущем контексте неверно
            • 0
              У автора предыдущих комментариев не было никакой карты глубин. Он тупо делал несколько фотографий с разных положений, а потом просто склеил это все дело в gif. Это можно повторить просто сняв видео.
              C google camera вся прелесть как раз таки в автоматическом построении карты глубин.
              • 0
                Мда, значит я в его первом сообщении увидел только этот принцип построения карты глубины передвижкой, а не конечный вариант гифки.
                В любом случае, если есть стереопара изображений, по ней можно однозначно построить уже довольно точную карту глубины (стереопары часто хватает), поэтому любые эксперименты с «передвижками» и «съемкой видео» можно превратить в этот эффект размытия и, соответственно, круговой параллакс как на исходной картинке.
                • 0
                  Что собственно и делается в гуглокамере ) А из стереопары прекрасно наш мозг может строить карту глубин )
  • +21
    Объясните, а каким образом вытаскивается буфер глубины из 2д-картинки?
    • +57
      ¯\_(ツ)_/¯
    • +4
      насколько я понял, это возможно только для фоток сделанных Google Camera с эффектом Lens Blur. видимо туда доп. инфа пишется при съемке
    • +13
      Когда в Google Camera снимаете, передвигаете телефон вверх, оставляя объект съемки в центре кадра. Камера делает несколько снимков и считает карту глубины.
    • +5
      Не для 2D картинки, а для последовательности картинок, записываемых приложением во время того, как пользователь перемещает смартфон вверх-вниз. Из них генерируется собственно итоговая картинка и методанные (информация о расстоянии до объектов по степени их смещения в соседних снимках).
  • +3
    Шевелящиеся фотки из Гарри Поттера станут реальностью?
    • +12
      Они сталновились реальностью уже некоторое время назад, когда говорили про синемаграфию.

      пример

      Конечно несколько другой эффект, но, мне кажется, это тоже круто.
      • +6
        Я как-то придумал новый для себя вид искусства. Назвал его «видеография». Подходишь к человеку и говоришь, что хочешь его сфотографировать, а сам снимаешь на видео. Он старается некоторое время не двигаться в меру своих возможностей. После первого вопроса «ты что там делаешь?» можно заканчивать съемку. Результаты получаются интересные и разнообразные. Каждая видеография уникальна.
        • 0
          Hello, PHP/5.3.27-pl0-gentoo nginx/1.4.4!

          А где посмотреть то?
  • 0
    А алгоритм, который использует гуглокамера, общеизвестный или это что-то принципиально новое?
    • 0
      This is accomplished by tracking specific points with algorithms known as Structure-from-Motion (SfM) and bundle adjustment.

      Подробнее в статье
  • +6
    Начал копаться — карта глубин сохраняется в EXIF теге XMP:Data в виде png картинки, закодированной в base64.
    Ждем приложение на android )
  • –2
    Метод хорошо подойдёт для фото нагих девушек.
    • +3
      Только если их снимали на Android-смартфон приложением Google Camera в режиме Lens Blur :)
  • 0
    А мне кажется, что пока не будет создан и принят новый формат файла, не GIF, а что то принципиально новое, цена таким изобретениям — ноль.
    • 0
      есть анимационный PNG. Смотреть в Firefox

      people.mozilla.org/~dolske/apng/demo.html
      • 0
        У вас ссылка рассыпалась. Вот правильная
        • 0
          Несколько раз переписывал по разному, ни разу не получилась целой. В половине случаев даже не подсвечивалась
          • 0
            people.mozilla.org/%7Edolske/apng/demo.html

            Нужно добавить в начале http:// (обрезается парсером, но даёт ему понять, что впереди ссылка) и перевести спецсимволы в URL encoding.
            • 0
              или нажать кнопку «вставить ссылку»
              • 0
                Кармы у человека нет для такого дела.
                • 0
                  нифигасебе.

                  а вставить <a href="урл">ссылко</a> тоже карма нужна?
                  • 0
                    Да, с отрицательной кармой ни один тег не работает.
                    • +1
                      нифигасебе. нифигасебе.
    • 0
      • –1
        Вы собираетесь хранить фотографии в SVG?..

        Пожалуйте на костёр.
        image

        На самом деле нужно что-то вроде AJPEG1 — сжатие + анимация. APNG временно решает проблему.

        1Выдумано только что, на деле (по мнению гугла) не существует.
        • +2
          MJPEG
        • 0
          Svg может использоваться как контейнер для тех же jpg. Можно задать интервал анимации и так далее. Даже фильм разбитый на кадры тут как то запихивали. Ах да, в отличии от всех выше и ниже перечисленных форматов свг работает во всех браузерах. Вобщем это единственная альтернатива гиф на данный момент
      • 0
        Анимированная фотка в SVG?
        • 0
          image
        • +1
          image
          • –1
            Гм. Поздравляю, вы чуть не убили мне браузер.

            На картинках с подборками многомегабайтных гифок ничего не тормозит, а полуторамегабайтный SVG убивает производительность напрочь, что в старенькой Opera Presto, что в позавчера обновлённом Firefox.
            • 0
              уже не могу отредактировать( Автор свгешки картинки в base64 закодировал зачем то. Надо попробовать линками вставлять, тогда тормозов не должно быть
  • 0
    Кто объяснит как эта магия непонятная работает в плане параллакса? Сдвиг пикселей по маске? Чем ближе пиксель тем сильнее линейный сдвиг?
    • 0
      Тоже над этим задумался. Сейчас провожу эксперимент с картой высот в 3d, то есть фотография это своеобразный ландшафт, а высота каждой точки берется из карты глубин.
      • 0
        Ось z это хорошо. Но тут эффект сдвига ракурса. А ведь в картинке этих данных нет просто. Если пиксель края табуретки сместился, то из-под него не должен выглядывать пол.
        • 0
          Попробую сейчас со сдвигом пикселей по маске сделать.
          • 0
            Оно как-то так и работает. Но мне непонятно вот что. Например у нас красный пиксель вблизи, а зеленый вдали. Сдвинули красный на 4 пикселя, а зеленый на 2. Чем закрывать разрыв? Пропорциональное искажение по маске?
            • +2
              Интерполируют поди. Depth map же обычно без резких краёв, сдвигают на небольшой угол (~5°, да, с глазомером у меня плохо), так что соседние пикселы будут сдвигаться похоже, а двух-трёхпиксельные ямы можно и закрасить.
              • +2
                Кстати, это видно в примере в посте. За цветком видна верхушка травинки, которая растягивается при вращении. (Слева, чуть выше середины).
            • +2
              Вот результат первого опыта, все очень грубо конечно:
              Скрытый текст



              Вот python код. Отдельно пока два отдельных изображения (фотография и карта глубин).
              Скрытый текст
              import Image
              
              img=Image.open('i.jpg')
              vert=Image.open('i0.jpg')
              
              
              
              def process(k=0):
                  out=img.copy()
                  for x in xrange(img.size[0]):
                      for y in xrange(img.size[1]):
                          s=int(((256.0-float(vert.getpixel((x,y))[0])-128.0)/256.0)*k+x)
                          if s>=0 and s<=img.size[0]-1:
                              try:out.putpixel((s,y),img.getpixel((x,y)))
                              except:print s
                  out.save('test_%s.png'%(str(k+10).zfill(3)))
                  print k
                  
              for k in range(-10,10):
                  process(k=k)
              
              


              • +1
                Забавно. Не для эпилептиков)
                • +3
                  Вот так чуть лучше ) (гифка 10 мб)
                  Скрытый текст

              • +1
                Карту глубин лучше хранить в png (гугл кстати так и делает в своей камере), иначе возможны нежелательные искажения из-за сжатия с потерями.
                Ну и для работы с пикселями вместо getpixel советую использовать load, так обработка идёт в разы быстрее.
                • 0
                  Спасибо! Про load как то позабыл, сейчас ускорил в пару раз )
                  Про png знаю, просто сейчас разбирал на опыты jpg'шку, которая была приведена в начале статьи. Сейчас попробую что то из своего.
                • +2
                  В итоге получился такой код, не красивый, но это только наброски. Осталось придумать как его ускорить :(
                  Скрытый текст
                  import Image
                  import math
                  import base64
                  import exiftool
                  from cStringIO import StringIO
                  
                  
                  
                  
                  sk=0
                  
                  
                  tool=exiftool.ExifTool()
                  tool.start()
                  png=StringIO(base64.b64decode(tool.get_metadata('in.jpg')['XMP:Data']))
                  
                  vert=Image.open(png)
                  img=Image.open('out.jpg')
                  
                  iarr=img.load()
                  varr=vert.load()
                  
                  
                  
                  def process(k,sk):
                  
                      out=img.copy()
                      oarr=out.load()
                      print k
                      for x in xrange(img.size[0]):
                          for y in xrange(img.size[1]):
                              
                              kx = math.cos(k) * 60.0 ;
                              ky = math.sin(k) * 60.0 ;
                              nx=int(((256.0-float(varr[(x,y)][0])-128.0)/256.0)*kx+x)
                              ny=int(((256.0-float(varr[(x,y)][0])-128.0)/256.0)*ky+y)
                              
                              if nx>=0 and nx<=img.size[0]-1 and ny>=0 and ny<=img.size[1]-1:  
                                  oarr[(nx,ny)]=iarr[(x,y)]
                      out.save('temp/test_%s.jpg'%(str(sk).zfill(3)))
                      sk+=1
                      return sk
                      
                  for k in range(0,628,10):
                      sk=process(float(k)/100.0,sk)
                  
                  



                  Как итог:


                  Исходник не ахти конечно, завтра попробую снять что нибудь путное.
                  • 0
                    Здесь depthy.stamina.pl/ на второй картинке тоже видно как деревянную стойку плющит если присмотреться. И на деревянных оконных ставнях тоже очень заметно. Так что явно не хватающие пиксели из другого ракурса берут хитрым(или не очень) интерполированием.

                    Так что не нужно расстраиваться что угол рамы у вас деформируется.

                    P.S. Одним словом не фига это технически не параллакс :) Чудес не бывает. Если информации о цвете стенки с другой стороны нет, о том какого же она цвета можно только догадываться.
                    • 0
                      Да, там с той фотографией такой же эффект получается. Недостающие пиксели никаким хитрым способом не достаются вообще: сначала помещается обычное изображение, а поверх него рисуются пиксели со смещением, то есть в разрывах остаются участки с фотографии без смещения.
                      С одной стороны можно получить недостающие пиксели алгоритмом, типа того, который используется в фотошопе, или при самой съемки, ведь у нас по одной оси есть еще кадр немного с другого ракурса, но в данном случае эта информация не сохраняется — вшивается только одна фотография и карта глубин.
  • 0
    Подобная технология используется в забавной мобильной аппликации Seene
    • 0
      А вот это уже трушный параллакс.
    • 0
      Can I use Seene on Android?
      Not yet, but we’ll be porting Seene to Android as we grow our team.
  • –1
    Такую же штуку (Structure from Motion) умеет и вот это бесплатное приложение для iOS — SynthCam. Причём, уже 3 года как умеет.

    Помимо depth-of-field у него в наличии ещё tilt-shift и удаление шумов с ночных фоток.
    Правда, программа работает с видео. И потому размер фоток на выходе получается не очень большой.
  • –1
    Истеричная журналистко-маркетинговая статья.
    Этому эффекту сто лет в обед, карту глубины можно получить или сдвигом камеры, или брекетингом фокуса.
    В тех же фотоаппаратах Sony и других мыльницах уже много лет есть режим 3D фоток Sweet Panorama/3D, из которых можно вынуть и два отдельных кадра. и построить по ним такую же карту глубины. В комментариях выше (почему-то незалуженное заминусованных) правильно указали, что это SfM.
    Так что непонятна истеричность по поводу «только Android, только Google Camera, мы первые».
  • 0
    plus.google.com/113462493365949106417/posts/cBfknAPs2sU — попробовал в ArcGIS. Вроде бы неплохо работает.
    image
    image
  • 0
    Автор обновил приложение. Теперь можно самому «собрать» готовый 3d, загрузив карту глубин из отдельного файла. Есть возможность расшарить результат творчества. Плюс дополнительные настройки.

    Кто-бы взялся сделать из этого отдельный скрипт (или в виде jQuery плагина), чтобы можно было вставлять подобное на свой сайт?

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