3D-панорама своими руками

На этот раз мы сделаем интерактивную 3D-панораму с нуля без регистрации и смс. Для этого нам потребуется: обычный фотоаппарат, программа для склеивания снимков в панораму и немного магии от three.js 😉


Фотографируем

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

Для начала вы можете почитать про то, как сделать качественную панораму, на сайте 1panorama.ru — многие советы помогли мне не повторять ошибок начинающих панорамистов. Разобравшись в теории, берем фотоаппарат и идем в интересующее нас место — будь это городская площадь или одна из ваших комнат. Для съемки панорамы я выбрал пасмурную погоду. Мой недорогой фотоаппарат довольно болезненно переносит изменение яркости, поэтому одни фотографии получаются светлыми, другие — темными. Затем программа не может склеить соседние снимки, так как из-за перепадов яркости не может найти общих точек. Кроме того, при выборе места я старался найти такое, где на фоне неба были бы различные объекты — макушки деревьев, верхние этажи зданий и так далее. В этом случае при склеивании панорамы программе всегда есть за что зацепиться. Найти на соседних кадрах одно и то же дерево или здание довольно просто, а вот склеить несколько одинаково серых снимков неба в автоматическом режиме уже не всегда получается — нужно ручное вмешательство.

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

Набор фотографий

Склеиваем фото в панораму

До этих пор я употреблял слово «программа» для того инструмента, который склеит все наши фотографии. Подобных программ немало — разного уровня и за разную стоимость. Лично я выбрал для себя Hugin — бесплатный и мощный инструмент для создания панорам. Мне он понравился еще и тем, что для создания панорамы достаточно нажать лишь несколько кнопок, а об остальном Hugin позаботится сам (не зря ведь Хугин — «мыслящий»).

Скачиваем, устанавливаем и запускаем Hugin. После этого нажимаем на кнопку «1. Загрузить снимки…» и добавляем все отснятые кадры в проект. Получится такая каша:

Загрузка снимков

Для того, чтобы получить что-то осмысленное, нажимаем на кнопку «2. Выровнять…». Запустится ассистент по поиску похожих точек на снимках. После этого Hugin будет знать, какие фотографии пересекаются между собой. Чем больше фотографии пересекаются друг с другом, тем проще найти одинаковые снимки — поэтому и важно обеспечивать 20-процентное перекрытие на этапе съемки. А если знать все смежные фотографии, то склеить их — дело техники.

Дожидаемся выполнения ассистента (может занять продолжительное время — зависит от количества снимков, их качества и прочего) и получаем на выходе единую картинку. Иногда она получается вверх ногами. В этом случае можно перейти с закладки «Ассистент» на закладку «Сдвиг/Смещение» и левой кнопки мыши потянуть картинку вниз до нормальной ориентации:

Предпросмотр 3D-панорамы

Получилось довольно неплохо — все снимки связались в одну картинку практически без ошибок. Для выгрузки в файл нажимаем на кнопку «3. Создать панораму…», задаем размер и формат файла:

Экспорт 3D-панорамы

В идеальном случае вы получите картинку без изъянов, где не видно стыков и заполнен надир с зенитом (это нижняя точка, находящаяся у вас под ногами, и верхняя точка над головой соответственно). Ошибки стыковки У меня так не вышло, поэтому нужно приложить еще немного усилий, чтобы выровнять некоторые снимки друг относительно друга. Нестыковки очень легко заметить, они сразу же режут взгляд (один из примеров продемонстрирован на картинке слева). Для того, чтобы исправить подобные ошибки, заходим в Hugin в пункт меню «Вид», а затем в «Редактор панорамы». Далее открываем вкладку «Контрольные точки» и находим снимки, которые плохо сшились. В моем случае это 41-й снимок (в левом окне) и 46-й (в правом окне). Далее находим одинаковую точку, которая присутствует на обоих снимках (это может быть стык белого и черного бордюра, уникальное пятнышко на асфальте или лист), и щелкаем на нее сначала на одном снимке, затем на другом. Создаем таким образом несколько контрольных точек и щелкаем на иконку «Заново оптимизировать» (подсвечена красной рамкой на скриншоте ниже):

Контрольные точки

Устраняем таким образом все нестыковки, заново создаем панораму и переходим к заключительному этапу.


3D-панорама

Пришло время сделать финальный штрих — добавить нашей панораме интерактивности. Для этого будем использовать замечательную библиотеку threejs, благодаря которой нам не придется изобретать свой велосипед. Берем один из готовых примеров панорам (например, вот и вот), добавляем события мыши из этого примера — и вуаля! Панорама готова! Можно глянуть, что у нас получилось.

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

Ссылки:

3D-панорама своими руками
Метки:

One thought on “3D-панорама своими руками

  • 24.08.2016 at 01:48
    Permalink

    Размещайте созданные вами панорамы на Сферика.рф и создавайте из них виртуальные интерактивные 3D туры. Размещайте виртуальные туры на интернет сайтах своих клиентов, находите клиентов на Сферика.рф и зарабатывайте на фотографии больше!

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *