Создание круговых панорам (flash)

    Как сделать панорамное фото с трехмерным обзором


    Вертеть головой — потянув мышкой, или курсорами ← →, приближение/удаление — колесиком мышки.

    В этой статье я расскажу о том, как делать панорамные фотографии, а так же
    как из них сделать круговые 3D-панорамы: какие для этого нужны программы, и как ими пользоваться. Словом, попробую показать весь процесс шаг за шагом. В конце статьи сделаю небольшую работу над ошибками, и расскажу о том, как их избежать в будущем.

    Вообще, сделать панорамное фото (в т.ч. круговую панораму) совсем не сложно.
    При минимальном навыке на всё уйдет минут 10.

    Перечислю всё, что нам понадобится:

    1. Фотоаппарат.
      Надеюсь, что у большинства читателей он всё-таки цифровой, а не пленочный, т.к. обрабатывать фотографии мы будем на компьютере.
       
    2. Компьютер.
      Подойдёт любой компьютер, лишь бы он был выпущен не более 10 лет назад, и на нем стояла операционная система Windows.
      Создавать круговые панорамные фотографии можно и на более старых компьютерах, и на компьютерах с другими операционными системами — но данная статья их не захватывает.
       
    3. Программы.
      • Adobe Flash Player 10 — скорее всего, флэш уже установлен на вашем компьютере, и качать/устанавливать его вам не нужно.
      • Microsoft Research Image Composite Editor (Microsoft ICE) — 3 Мб, программа, которая склеивает разрозненные фотографии в единое пано.
      • Pano2VR 2.2.3   — программа, которая из «плоской» панорамы делает круговую (3D), с помощью флэша. Не забудьте скормить программе ключ-код, что бы на ваших панорамах потом не появилась надпись «Trial Version Expired». Как вариант, код можно купить у разработчиков. Существуют и другие программы-аналоги для создания круговых панорам, которые вы можете легко найти через Яндекс/Гугл.
         
    4. Инструкция. (не обязательна)
      Вы сейчас её и читаете.



    Приступим.


    В качестве примера я предлагаю использовать работу над панорамой, исходные снимки которой были сделаны зимой этого (2010) года на территории завода НПО «Пластик», что на Бережковской набережной в Москве.
    Вы уже видели картинку этой панорамы в начале страницы.
    Было сделано 11 фотографий фотоаппаратом Canon 350D, с китовым объективом, фокусным расстоянием 18 мм. Снимки
    делались без штатива, с рук. Расположение кадра — «вертикальное». Если бы снимки делались в «горизонтальном» режиме, потребовалось бы 6-7 кадров вместо 11-ти, но тогда бы меньше пейзажа попало в кадр (по высоте).

    Фотографии снимались с небольшим «перехлёстом», т.е. каждый новый кадр содержал в себе 5-10% предыдущего кадра.

    Архив с исходными jpg-файлами вы можете скачать по адресу http://lesha.name/panorama/howto.rar, файл весит 25 мегабайт.  

     

    1. Запускаем программу Microsoft Image Composite Editor


    … и нажимаем File→New.


    В открывшемся окошке выбираем файлы из распакованного архива howto.rar
    (все сразу), и нажимаем «Открыть»
    Некоторое время (пару минут) компьютер попыхтит,
    пытаясь понять, где голова, а где хвост, и «склеивая» фотографии краями на основе принципа нахождения одинаковых объектов на соседних кадрах. Т.е. с помощью того самого 10%-го наслоения кадров, которые мы брали в качестве «перехлёста».

    В итоге получится у нас что-то, похожее на это:

    Теперь нам нужно обрезать неровности, получившиеся из-за склейки:

    Для этого мы нажимаем кнопку Automatic Crop (подчеркнутую красным) — и программа сама отсечет лишнее.
    Заодно мы выставляем максимальное качество для выходного снимка — передвигаем ползунок Quality до упора направо, до 100%.
    Также оставим оригинальный размер панорамы — в меню Scale поставим 100%.

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

    Теперь нам нужно сохранить панораму в виде JPG-файла.


    Делается всё в два клика — нажимаем на «Export»,
    а затем — на «Сохранить». Файл обзовем, к примеру, panorama_result.jpg
    Кстати, файл большой получится, на 28 мегабайт. Впрочем, мы это сознательно делали: чем меньше шагов при оптимизации изображения, тем выше будет качество у итогового снимка.

    Выходной файл у нас будет вот такой (только в 10 раз больше по размерам):




    2. Запускаем программу Pano2VR


    Добавляем в программу наш файл panorama_result.jpg



    Нажимаем «Выбрать» (цифра 1), затем «Открыть» (цифра 2, и ищем в окошке наш файл panorama_result.jpg), затем на всякий случай укажем, что собираемся делать цилиндрическую панораму (цифра 3). Ок.
    Теперь нажимаем на выпадающее меню «Формат для экспорта», и выбираем там «Flash».
    Затем нажимаем на кнопку «Добавить».

    Перед нами выскочит вот такое окошко, которое мы сейчас подробно рассмотрим:
     

    Для начала установим уровень компрессии на 80, качество визуализации на 10, а длину цилиндрической текстуры — на максимум, т.е. на 2880.
    Играясь с этими настройками, вы сможете получать разные по качеству/размеру выходные панорамы.

    Затем перейдем на вкладку HTML, и поставим галочку в "Подключить HTML-файл". Делаем мы это для того, чтоб флешку можно было сразу выложить на свою домашнюю страничку. Файл обзовем panorama_result.html

    Собственно, всё. Нажимаем кнопку «ОК», компьютер спросит «Экспортировать файл?», после вашего утвердительного ответа он немного подумает, и покажет в браузере страничку — на которой будет изображено что-то вроде этого:
    http://lesha.name/panorama/npo.htm



     
    Если вы захотите изменить какие-либо настройки получившейся панорамы — можете поменять настройки в блоке «Параметры проекции», или нажимайте на изображение гаечного ключа и изменяйте качество/размер фотографии.





    3. Работа над ошибками.


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

        Второй дефект — слева от желтой таблички с рекламой ремонта бамперов. Если сделать приближение-увеличение картинки с помощью колесика мышки, то будет видно, что кабины автомобилей «состыковались» не очень корректно. Произошло это, скорее всего, так же из-за автоматического фокуса, плюс, возможно, я немного сдвинулся с места между кадрами. Штатив и ручной фокус должны помочь исправить положение — простой телескопический штатив стоит рублей 500-600, и с легкостью убирается даже в небольшую наплечную сумку.

    За сим всё.

    Если у вас будут какие-либо комментарии-пожелания-поправки к данной статье — пишите.



    UPD.
    Хорошие бесплатные программы:
    1. Hugin hugin.sourceforge.net
    2. Panosalado panosalado.com
    3.?
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 73
      +2
      Давно пытался сделать нечто подобно, даже сделал, правда, очень корявым и долгим методом. Спасибо, автору, упростили мне жизнь)))
        +2
        Вот спасибо. Давно хотел попробовать, но было лень искать все эти программы, «которые понядобятся». Вечером займусь практикой :)
          0
          Кстати, если мой сервер постигнет хабраэффект (все-таки, панорамы несколько мегабайт весят, да и файл с исходниками 25 мег), то пожалуйста попозже просто зайдите на сервер. Сервер хороший, но виртуальный.
            0
            А неварезного решения этой задачи нет?
            А еще лучше онлайн-сервиса?
              +1
              Онлайновых сервисов я не нашел, к сожалению; а не-варезные решения — использовать для перегона картинки во флеш другие программы. (для самой склейки цельной панорамы вареза не нужно, программа от МС полностью бесплатна).

              Вчера, уже после написания статьи, я решил порыться в инете, и нашел там кучу обзоров, так что мне стыдно стало — я, оказывается, не первопроходец в деле написания подобных статей. Если не ошибаюсь, Panorama Factory так тоже умеет, и ещё аналоги есть.
              • НЛО прилетело и опубликовало эту надпись здесь
                0
                А можете рассказать, как сделать сферическую панораму?
                  +1
                  Для этого я хочу сначала сам попробовать её сделать :) Как только попробую и получится — напишу и статью, если на тот момент хороших не будет.
                  В целом, полагаю что проблем особых со сферической не будет — тут тонкости уже в технике съемки, имхо, а не в софте.
                    0
                    мне вот непонятно, получится ли сделать сферическую без насадки на штатив.
                      +1
                      Я думаю получится без проблем, сам видел примеры когда снимали «с рук».

                      Кстати, вот статья по-моему неплохая: photo-element.ru/ps/spherical/spherical.html
                        +1
                        О, спасибо за статью!
                        Сам несколько раз делал цилиндрические панорамы, только с помощью PTgui.
                        +1
                        Получится, вот сделал на днях: www.flickr.com/photos/nix0id/6207852359/sizes/l/in/photostream/
                          0
                          Офигенно! Расскажите пожалуйста поробности/технологию?
                            0
                            1. Microsoft Image Composite Editor
                            2. Flexify (плагин для photoshop)
                            Вот и все :)
                        0
                        напишите, напишите…
                          0
                          Ну, вот в комменте выше хорошая (вроде бы) статья :)
                      +1
                      10 минут могут клеиться фотки без параллакса. С ним нааамного хуже :)

                      Я использовал для склеивания PTGUI (платный). Спомощью плагина Smartblend (бесплатный) убирается неравномерное освещение и несостыковки (единственный минус — дефекты не убираются при большом размере выходного файла — при ширине 18000 точек пришлось делать вручную)
                      Эта прога на выбор сохранит сферическую, цилиндрическую, или еще какую панораму. Может прямо в .mov (квиктаймовская панорама, сразу готовая к просмотру).

                      Для создания флэшки использовал panosalado (опенсорс).
                        0
                        Спасибо за Panosalado

                        Как раз то, что может заменить платный/варезный Пано2ВР.

                        www.panosalado.com/images/spincontrol_examples/demo/New_Orleans_2007/index.html
                          +1
                          spincontrol это вроде как платный AIR-продукт на основе panosalado. Который делает то же самое, что можно сделать в panosalado вручную, но автоматически.

                          Да и сам panosalado, при более подробном изучении, радует не особо:

                          версия 1.28 работает в 3 раза быстрее версии 1.38
                          плагины написаны для версии 1.38

                          Подозреваю, причина в том, что основа там (papervision3d) со времен 8 флэш-плеера, когда закрашивать треугольники приходилось вручную, и получалось криво и медленно. Сейчас ведется работа над новым panosalado2, с преферансом и дамами, после выхода которого панорамы должны стать красивыми, быстрыми и ровными, коммьюнити большим, умным и разговорчивым, люди добрыми, а погода хорошей. Короче, ждем изменений к лучшему :)
                        +8
                        Смотрю, многие интересуются по поводу возможных решений для размещения панорам в web (особенно бесплатных)
                        Когда-то я пытался исследовать этот вопрос (ни в коем случае не претендующее на полноту и т.д.), и вот что получилось:

                        (Описание идет так: Название Плагин Сайт Цена)

                        1) DevalVR DevalVR www.devalvr.com/ free
                        2) Flash Panorama Player flash flashpanoramas.com/ €39.95
                        3) KRPano flash www.krpano.com/ €30, €90
                        4) pan0 flash pan0.net/ open-source
                        5) PanGnomic java open-source
                        6) Pano2VR flash gardengnomesoftware.com/pano2vr.php 178.80 Euro
                        7) Panorama2Flash flash www.easypano.com/panorama2flash.html $49.95
                        8) panosalado flash panosalado.com/ open source
                        9) PURE Player for Flash flash www.immervision.com/en/home/index.php $34.95, with tool kit
                        10) PURE Player for Java java
                        11) PTViewer java www.all-in-one.ee/~dersch/ open source
                        12) QuickTime VR QuickTime www.apple.com
                        13) SPi-V Shockwave
                        14) VRLight Silverlight cpicture.net/vrlight/
                        15) Ryubin's Flash Panorama Laboratory flash www.ryubin.com/panolab/panoflash/index.shtml free

                        От себя могу добавить, что мне нравится krpano (минус в том, что он платный, однако дешевле Pano2VR)
                          0
                          DevalVR пока что лучшее решение для просмотра круговых панорам. Самое быстрое, так как написано на C и является плагином к браузеру, а также использует DirectX/OpenGL для отрисовки сферы, в отличие от всех других существующих решений в виде Flash/Shockwave/Java. Позволяет на одноядернике смотреть панорамы на FulHD со скоростью до 60fps, тогда как Flash — хорошо если 10-15fps выдаёт.

                          Вот последнее сравнение всех способов показа панорам, ссылка от автора DevalVR — www.panoramaphotographer.com/comparisons/index.html

                          p.s. panoslado выдаёт 4fps на FullHD.
                            0
                            Сделайте, пожалуйста, статью-обзор, если будет время и желание.
                            Думаю, будет интересно, тем более так много информации есть.
                            0
                            мм… спасибо за статью!
                            попробовал… вот что получилось — screencast.com/t/YzQxN2ViZ
                            Это можно как-то исправить? %)
                              +1
                              По-идее можно: в программе есть режим коррекции, там кнопочка есть, которая позволяет эту колбасу «двигать», изменяя геометрию.
                              Правда, мне кажется не оч хороший результат будет все равно.
                              А почему у вас так оригинально получилось?
                            +2
                            А ещё есть Hugin hugin.sourceforge.net/

                            Очень, мне кажется, достойная прога.
                              0
                              У меня падает при нажатии кнопки Align :)
                              0
                              не увидел на скринах проги для склейки фоток (прогу не ставил) функцию — общие точки.
                              Суть в том, что программа не всегда верное склеивает фотографии, особенно когда много мелких объектов (например магазин) и для этого нужна функция — контрольные точки (общие).
                              Береться два смежных снимка и ставяться на них общие точки.
                              Я обычно делаю около 26и снимков, из которых клею панораму. Контрольные точки расставляю в больших случаях сам, зато получается более гладже переходы :).

                              использую PTGUI + плагин Smartblend.

                              за пост спасибо, увидел новую программу — не понравилась :), остался юзать старую PTGUI.
                                0
                                Вы юзавете варезную версию?
                                Я к тому, что прогамма от микрософта все-таки бесплатная.
                                  0
                                  ну… если говорить о платности — тогда прога Pano2VR тоже не бесплатная :)
                              • НЛО прилетело и опубликовало эту надпись здесь
                                • НЛО прилетело и опубликовало эту надпись здесь
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    Правильнее было бы назвать такую панораму не круговой, а цилиндрической.
                                    Стоит заметить, что создание сферических панорам будет поинтересней, да и результат впечатляет поболее.
                                    Вообще, для новичков статья довольно неплохая. Хотя я считаю, что снимать панорамы без штатива — непозволительно. А в идеале нужен штатив с панорамной головкой, позволяющий выставлять фокальную точку. Хотя бы пару слов об этом стоило бы упомянуть, наверное.
                                    Ну а склейка — это уже дело вкуса. Выбор программ сейчас довольно широк (не то, что лет 10 назад), от таких, которые позволяют контролировать каждый параметр), до полностью автоматических.
                                    Автору за статью спасибо.
                                      0
                                      А хороших статей по «кубическим» панорамам ни кто случаем, не видел?
                                        0
                                        ваша панорама хорошо подвесила мой офисный селерончик: р
                                          0
                                          Вы знаете, на П4 смотрится вполне себе нормально.
                                          0
                                          Теперь ждем от Бумбурума круговых «панорам» гаджетов :)
                                            0
                                            Браузер умер — Opera 10.10 ( Win XP )
                                              0
                                              У меня такой же браузер. Странно. Претензии по поводу браузеров слышал пока только от двух людей, у них ФФ подвисал на некоторое время.
                                                0
                                                У меня ФФ. Подвисает если двигать мышкой, клавишами (стрелки влево вправо) вращается нормально.
                                              0
                                              При съемке с рук, особенно если некоторые объекты близко, рекомендую поворачиваться вокруг фотоаппарата, а не вокруг своей оси — искажения меньше. И спасибо за инструкцию по созданию флешки.
                                                0
                                                Спасибо за совет, действительно части артефактов это помогло бы избежать.
                                                0
                                                про «мышкой потяните картинку вправо или влево» написано,
                                                а вот про зум колёсиком не написано, или это не кросс-браузерная опция? =(
                                                  0
                                                  Каюсь. Сейчас напишу :)
                                                  0
                                                  Почему бы вам не разместить ссылку на официальную страничку Microsoft ICE?
                                                  Там заодно и версия для x64 есть…
                                                    0
                                                    Изначально я так и хотел сделать, но по какой-то причине из дома ни у меня, ни у приятеля ссылка на оф.сайт не открывалась — и я подумал, что лучше пусть будет не очень официальная ссылка на программу, чем нерабочая.
                                                    Сейчас (с работы) ссылка открывается нормально, даже не знаю, добавлять ли её…
                                                    0
                                                    Adobe Photoshop CS4 -> File -> Automate -> Photomerge — да и получше как-то получается…
                                                      0
                                                      Не пробовал, надо будет.
                                                      Тут ещё нюанс есть — программа от микрософта бесплатная. А КС4… Ну, скорее «условно бесплатная» )
                                                        0
                                                        Результаты очень даже неплохие. Но это я к тому, чтобы не ставить дополнительный софт, ибо у каждого фотографа/дизайнера/художника в 90% случаев есть фотошоп…
                                                      +1
                                                      А я-то думал тысячи фотографий и один гений фотошопа или 4D видеокамера :)
                                                        0
                                                        Одна из востребованных тем на сегодняшний день, некоторые вообще почему-то скрывают свой алгоритм построения сферических панорам.
                                                        Интересно, а более расширено верх и низ панорамы можно сделать при такой аппаратуре (бюджетной)
                                                          0
                                                          Это зависит от фокусного расстояния — в некоторых случаях может быть полезно сделать дополнительный «верхний» ряд фотографий, например если снимаете на краю леса. И потом в программе они приклеются сверху основного ряда.
                                                          +1
                                                          На самом деле базовый флэшовый код для панорамы совершенно несложный.
                                                          Для наших около 6000 панорам Чернигова с простеньким функционалом было использовано:

                                                          1. Фотоаппарат Cannon A-540
                                                          2. Опробовано несколько склейщиков. Чемпионом показал себя Autopan.Pro
                                                          3. Чуток флэшового кода. Плюс своего кода в том, что можно сделать любой функционал.
                                                          0
                                                          Гм, а может кто нибудь знает ответ на мой вопрос. Снять панораму на улице, это, конечно, здорово и замечательно. А как снять панораму в помещении общей площадью, ну, скажем 12 кв.м. ( домик 3 на 4 метра). Пи этом, нужно заметить, что если мы берем бюджетную зеркалку или цифромыльницу, минимальное фокусное расстояние, которое удается найти (обязательным условием является отсутствие бочки) — 30-40mm. Вот как бы и вопрос «А как быть?».
                                                            0
                                                            Возможно, надо будет сделать просто много снимков.
                                                            А вообще — можно на цифрозеркалку нацепить сверхширик с фокусным 10 мм :) Тогда трех снимков хватит :)
                                                            0
                                                            О как, а я в шопе собираю каждый раз))
                                                            Типа того: omerta.narod.ru/panorama5.html
                                                              0
                                                              Чтобы «там ярко, а там темно» не было, используется ручной режим экспозиции (или фиксация, коль нету/не хотите). Тоже самое и с резкостью: имхо, лучше на бесконечность наводить.
                                                                0
                                                                Карамба. Круто. Вот еще бы зум мощный.
                                                                  0
                                                                  Зум там есть, колесиком. Но не особо мощный, да. Хотя окна в небоскребах «москва-сити» видны.
                                                                    0
                                                                    Аааа… Точно точно… Просто тачпад скроллит саму страничку html…
                                                                    Ну тогда то очень круто в принципе.
                                                                  0
                                                                  Спасибо за статью, узнал нечто новое. Как раз позавчера начал изучать 3D-панорамы.
                                                                  Вопрос: как склеить панораму так, что бы при осмотре во флеш был вверх (небо/потолок) и низ (земля/пол)?
                                                                    +2
                                                                    чтобы было небо (зенит) и пол (надир) нужно снимать сферическую панораму, это немного сложнее чем просто круговая и требует специального оборудования — нодальной штативной головки, которая позволяет вращать фотоаппарат не вокруг центра матрицы, а вокруг нодальной точки объектива (место пересечения лучей).



                                                                    без нодальной головы сделать тоже можно, но количество времени затраченное на исправления искажений параллакса стремится к бесконечности. с нодальной головой у меня сфера собирается на автомате в PTGui за 20-40 секунд.
                                                                      0
                                                                      Я так не пробовал делать, однако подозреваю, что надо в типе панорамы (том самом падающем меню, где мы выбирали цилиндр) выбрать другой пункт — QTVR.
                                                                      Так же есть настройки FOV — возможно они помогут. В целом, можно экспериментировать с превью, которое создается в «Параметры проекции» — блок виден на lesha.name/panorama/pano_new.png
                                                                      +1
                                                                      Вот, что получилось у меня, правда, использовал программу Autopano Giga 2.
                                                                        0
                                                                        По-моему очень хорошо получилось. А полную сферу не пробовали делать?
                                                                          +1
                                                                          Пробовал, вот пример. Там правда глюк со светом на полу… есть ли у кого мысли как избавиться от этой проблемы?
                                                                            +1
                                                                            Надо отключить автоматический баланс белого на фотоаппарате, что бы он не изменял цвета на разных кадрах.
                                                                              0
                                                                              По серой карточке или просто по белому листочку настраиваешь ББ заранее — и все ок )
                                                                          0
                                                                          А если ли софт, чтобы ссылки делать с панорамы? А-ля стритвиев
                                                                            0
                                                                            Что-то типа этого 360 Degrees Of Freedom Developer Suite.
                                                                            0
                                                                            Гуглплюс умеет автопанорамировать фотографии. Правда не все сразу, а почему-то выборочно. И заставить вручную пока нельзя.

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

                                                                            Самое читаемое