Как сделать панораму как в яндекс картах

Как сделать

Панорамы (виртуальные туры) по заведениям на картах Google и Яндекс, в VK, Instagram, Youtube и на вашем сайте

Все это — ваша бессрочная реклама на самых популярных ресурсах! Работаем по всей России!

Мы первыми в России получили право размещать панорамы в Google (в мае 2013 года) и вторыми в России – в Яндексе (в ноябре 2016 года) и являемся одной из немногих компаний, которая может официально размещать подобные туры и в Google и в Яндекс. Мы также оказываем широчайший спектр дополнительных услуг, связанных с данным сервисом.

1. Панорамы (виртуальные туры) по заведениям на картах Google и Яндекс.

Значение виртуальных туров на картах Google и Яндекс многие недооценивают, считая их просто красивой игрушкой, особо не приносящей клиентов. Но это распространенное заблуждение — панорамы дают существенный (в 2 и более раз), постоянный и долгосрочный приток новых клиентов с карт Google и Яндекс и это легко объясняется:

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

Цены на создание и БЕССРОЧНОЕ размещение виртуального тура на картах Google и/или Яндекс и варианты размещения:

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

Панорамы Яндекс дороже, чем у Google. Это связано с тем, что у Яндекс, в отличии от Google, более высокиме технические требования к панорамам. Это и требования к самой фото-съемке и обязательная обработка готовых панорам в ручном режиме.

2. Классические виртуальные туры для вашего сайта.

Если по каким-то причинам Вы не хотите, чтобы ваш тур был размещен на Google или Яндекс картах, а только на вашем сайте, мы создадим для вас классические виртуальные туры с расширенным функционалом. Данные виртуальные туры позволяют избежать ограничений, установленных Google и/или Яндекс, если вдруг ваш тур под них подпадает. В этих виртуальных турах мы можем создать для Вас индивидуальный дизайн управления, добавить в виртуальный тур аудио и видео, информационные метки, убрать нежелательные элементы с изображений и многое-многое другое. Подробнее…

3. Съемка и размещение в Google/Яндекс виртуального тура полностью или частично из АЭРОПАНОРАМ

Если вы хотите, чтобы ваш виртуальный тур был значительно эффектнее и интереснее, мы можем как создать тур полностью из аэропанорам, так и добавить аэропанорамы в тур по вашему заведению. Аэропанорамы особенно подойдут жилым комплексам, коттеджным поселкам, загородным отелям, базам отдыха, бизнес-центрам и другим объектам, где важно показать красоту окружающего ландшафта.

Пример Аэропанорам — Бизнес-парк Полюстрово
(тур полностью из аэропанорам)

Пример Аэропанорам — БЦ Бенуа
(аэропанорамы добавлены к туру по помещениям)

Цена на создание и размещение:

4. Дополнительные возможности для ваших виртуальных туров или как сделать их еще удобнее, эффектнее и эффективнее.

Если у вас уже есть виртуальный тур на Google и/или Яндекс картах или вы уже решили его сделать, мы предлагаем вам несколько вариантов решений, как сделать так, чтобы ваш тур увидели еще больше ваших потенциальных клиентов, а сам тур стал еще интереснее и удобнее, а значит эффективнее:

4.1. Размещение виртуального тура на сайте, в т.ч. с добавлением меню навигации, информационных точек, фирменного стиля и др. функций.

Разместите тур на любой подходящей странице вашего сайта. Как правило, страница с виртуальным туром становится самой популярной страницей на сайте. Есть несколько вариантов размещения на сайте:

4.2. Размещение виртуального тура в группе ВКонтакте с поддержкой его работы в приложениях VK на iOS и Андроид (эксклюзивно).

Мы реализовали возможность добавлять виртуальные туры, размещенные на картах Google и Яндекс, а также классические виртуальные туры в группу ВКонтакте. Тур добавляется в группу в виде приложения, работающего на всех устройствах, включая мобильное приложение VK для iOS и Андроид. Это очень важно, так как более половины пользователей ВКонтакте пользуются именно его мобильной версией. Такую реализацию на рынке на данный момент можем предложить только мы! Примеры:

Одиночные виртуальные туры:

Несколько виртуальных туров в одном приложении (для сетевых компаний):

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

Размещение тура во ВКонтакте, во-первых, делает значительно более интересной саму группу — такая «фишка» большая редкость, во-вторых, повышает эффективность уже созданных туров в Google/ Яндекс, так как их увидят еще больше людей.

Цена создания и размещения:

Читайте также:  Как сделать беседка для дачи своими руками

Для добавления приложения в группу потребуется временно добавить нашего специалиста в администраторы группы. Это необходимо только на период добавления приложения. Срок создания приложения и размещения его в группе ВК — 1-2 дня с момента оплаты.


4.3. Размещение виртуального тура в
Instagram и/или YouTube.

Если у вашей фирмы есть страница на этих популярных ресурсах, мы поможем разместить ваш виртуальный тур и на них. Тур размещается в виде минутного видеоролика. Цена – 3000 руб.


5. Фото и видео съемка.

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

5.1. Интерьерная фото съемка. Цена — от 500 руб/фото. Примеры

5.2. АЭРО фотосъемка. Цена от 8000 руб. Примеры

5.3. Интерьерная видео съемка. Цена — от 9000 руб./минута. Пример

5.4. Рекламные видеоролики. Цена — от 20 000 руб. Пример

5.5. АЭРО видеосъемка. Цена — от 10000 руб. Пример

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

Источник

Как делают панорамы Яндекса

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

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

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

В эти выходные мы катались по Свиблово. В планах компании стоит покрытие 90% улиц Москвы.

Съемка ведется одновременно на несколько обыкновенных зеркалок с широкоугольным объективом. Само собой, одним из самых сложных моментов здесь является точнейшая синхронизация срабатывания затворов. В отличие от Street View компании Google, здесь снимается не видео, а фотографии в хорошем качестве. Склейка в панорамы потом ведется в автоматическом режиме с помощью специально разработанного программного обеспечения.

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

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

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

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

Самым большим злом в этом случае выступают поливальные машины…

Вот так процесс съемки выглядит изнутри. На телефоне Яндекс карты с GPS. На ноутбуке сама система.
Куча проводов, под ногами лежит блок, обрабатывающий сигналы от камер, GPS, информацию с колес и т.п.

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

Управление системой на ноутбуке выглядит так.

Зеленые линии – то что надо отснять по плану, красная линия – текущая съемка, черные линии – уже отснятое.
Оператор говорит водителю, с какой скоростью ехать, где останавливаться, куда поворачивать.
С ноутбука задаются параметры съемки, интервал автоматической съемки (в метрах, в данном случае стоит 50 м, на узких улицах может быть и 10 м, а на трассе и 100 м достаточно), коррекция экспозиции и прочая информация о местоположении, длительности текущей съемки и т.п. Показываются последние сделанные камерами кадры.
Параметры регулируются таким образом, чтобы не было сильных перепадов яркости между небом и домами.

Яндекс-панорамы сильно помогают актуализировать карты. За тот час пока мы катались в районе Свиблова целых два раза мы натыкались на неточности в картах: либо переулок закрыли железобетонным блоком и сквозного проезда нет, либо въезд в переулок находится не в том месте, где показан на карте.

Хотя погода была сухая и на улицах грязи не было, линзы все равно приходилось постоянно чистить.

На машину люди реагируют в основном позитивно. Фотографируют и фотографируются с ней часто. Охрана порой смотрит настороженно. Иногда останавливают работники ГИБДД, но в основном из любопытства.
Иногда бывает, что люди возмущаются. И действительно, Google на своих панорамах замазывает все лица и номера, а Яндекс нет.
Почему?
Дело в том, что американские законы требуют замазывать номера и лица без каких либо оговорок, а в российском законодательстве есть оговорка: в принципе человека также снимать нельзя, это также считается вторжением в личную жизнь, но при этом если человек не является основным объектом съемки, то можно.
В данном случае снимаются не люди, а улицы.

Читайте также:  Asus zenfone 6 ремонт своими руками

Это в отличие от случайных приколов, конечно, было подстроено специально.
В планах делать подобные «пасхальные яйца” и в дальнейшем.
Google вообще создал целое сообщество, где выкладывает план съемок и маршруты, а уж интересующиеся люди на местах сами выделывают перед машиной сценки.

Во время одной из съемок на бензоколонке разговорились с мотоциклистом, который предложил «показать класс”. Когда машина поехала снимать дальше мотоциклист пронесся мимо нее на огромной скорости стоя на заднем колесе.

Недавно во время съемки в районе Ходынского поля оператор заметил, что на самом поле происходит какое-то мероприятие. Подъехали, поговорили, получили «добро” и в результате отсняли Фестиваль аэрографии на машинах.

Все это будет на Яндекс картах в новом сезоне.

Я специально спросил, замазать ли номера, на что получил ответ, что машину уже столько раз фотографировали, что смысла просто нет.
На этой машине проводили съемки в Москве и Питере. В планах запустить несколько машин.

Что интересно, в Киеве пришлось ставить оборудование на другую машину. Только по одной причине: в тот момент на Украине проходили выборы и машина с российскими номерами и «шпионской аппаратурой” неизбежно привлекала бы к себе повышенное внимание, поэтому использовалась местная машина.

Спасибо Яндексу и компании Neq4 за возможность сделать этот репортаж и интересный рассказ о тонкостях работы.

Источник

API Яндекс.Панорам: как сделать свою виртуальную прогулку или просто довести человека от метро

Нас очень давно просили сделать API, который позволяет встраивать Панорамы Яндекса на свои сайты, и мы, наконец, смогли это сделать. Даже больше: наш API даёт возможность создавать собственные панорамы.

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

Движок

Сервис панорам запустился на Яндекс.Картах в далеком сентябре 2009 года. Поначалу это были лишь несколько панорам достопримечательностей и работали они, как вы, наверное, догадываетесь, на Flash. С тех пор много воды утекло, панорам стало несколько миллионов, начали быстро расти мобильные платформы, а Flash туда так и не пробрался. Поэтому примерно в 2013 году мы решили, что нам нужна новая технология. И основой для этой технологии стал HTML5.

API, с которого мы начинали, — это Canvas2D. Сейчас это может показаться странным, но в 2013 году этот выбор был вполне разумен. WebGL был стандартизован всего двумя годами раньше, толком еще не добрался до мобильных (в iOS, например, WebGL работал только в уже почти почившем в бозе iAd), да и на десктопах работал не очень стабильно. Читатель может мне возразить, что надо было все делать на CSS 3D, как это было тогда популярно. Но с помощью CSS 3D можно нарисовать только кубическую панораму, в то время как все панорамы Яндекса сферические (хранящиеся в равнопромежуточной проекции).

Это же было и самой главной технической трудностью в разработке. Дело в том, что корректно и точно спроецировать сферическую панораму на экран непросто из-за нелинейности этого преобразования. Наивная реализация такой проекции требовала бы целого вороха тригонометрических вычислений на каждый пиксель экрана — ведь нужно найти соответствующую ему точку в панорамном изображении и определить его цвет. Кроме того, Canvas 2D не предоставляет эффективного способа манипулировать каждым пикселем изображения по отдельности.

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

Как уже было замечено, записывать цвет изображения попиксельно в Canvas2D неудобно, но удобно работать с изображениями и их двумерными трансформациями. Кроме того, такие трансформации фактически реализуют интерполяцию за нас. Именно их и решено было использовать в качестве основы алгоритма рендеринга панорамы. А так как двумерная линейная трансформация однозначно задается двумя триплетами точек, один на экране, а другой на панорамном изображении, то выбор набора точек, для которых мы будем считать проекцию точно, получается сам собой: будем разбивать панорамную сферу на треугольники. Итоговый алгоритм рендеринга получился следующим:

Написав все это и запустив, я увидел нечто, хорошо описываемое словом «слайдшоу». Фреймрейт оказался совершенно неприемлемым. Попрофилировав, я нашел, что больше всего времени отъедают функции save() и restore() Canvas 2D контекста. Откуда они взялись? Из особенности работы с обрезкой в Canvas2D. К сожалению, чтобы иметь возможность сбросить текущую обрезку и выставить новую, необходимо сохранить перед выставлением состояние контекста (это как раз save() ), а после всего необходимого рисования восстановить сохраненное состояние (а это уже restore() ). А так как эти операции работают со всем состоянием
контекста, они недешевы. Кроме того, обрезку-то мы делаем каждый раз совершенно одинаковую (после инициализации разбиение сферы на треугольники и их наложение на панорамное изображение не меняются). Есть смысл это закешировать!

Сказано — сделано. После генерации триангулированной сферы мы «вырезаем» каждый треугольник из панорамного изображения и сохраняем его в отдельном кеше-канвасе. Остальная часть такого кэша при этом остается прозрачной. После такой оптимизации удалось получать 30—60 кадров в секунду даже на мобильных устройствах. Из этого опыта можно извлечь следующий урок: при разработке рендеринга на Canvas 2D все, что можно, кэшируйте и пререндерите. А если что-то вдруг нельзя — делайте так, чтоб было можно, и тоже пререндерите.

Читайте также:  Как сделать сметанный соус с луком

У любого кеширования (как и у многих вещей в этой жизни) есть и обратная сторона: неизбежно растет потребление памяти. Именно это и произошло с рендерингом панорамы. Возросшие аппетиты породили множество проблем. Самыми заметными можно назвать падения браузеров даже на декстопных платформах, а также довольно медленный старт. В конце концов, устав бороться с этими проблемами, мы отказались от репроецирования панорамного изображения на Canvas 2D и пошли другим путем. Но он уже совершенно не интересный 🙂

Однако еще до того мы начали смотреть с сторону WebGL. К этому нас подтолкнули разные причины, главной из которых, пожалуй, была iOS 8, в который WebGL заработал в Safari.

Главной проблемой при разработке WebGL-версии рендеринга был размер панорам. Панорамное изображение целиком не лезло ни в одну текстуру. Эту проблему мы снова решали, руководствуясь принципом «руководствуйся старыми как мир принципами», и разделили панорамную сферу на сектора. Каждому сектору соответствует своя текстура. При этом для экономии памяти и ресурсов GPU невидимые сектора полностью удаляются. Когда они должны на экране появиться вновь, данные для них снова перезагружаются (обычно из кеша браузера).

Встраивание панорам

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

Перед началом работы с панорамами необходимо убедиться, что браузер пользователя поддерживается движком. Это можно сделать с помощью функции ymaps.panorama.isSupported :

Чтобы открыть панораму, нам сначала надо получить ее описание с сервера. Это делается с помощью функции ymaps.panorama.locate :

Еще можно запрашивать воздушные панорамы:

Получив описание панорамы, мы можем создать плеер, который отобразит ее на странице:

И мы увидим на странице:

Самый быстрый и простой способ открыть панораму — это функция ymaps.panorama.createPlayer :

При этом можно указать одну или несколько опций третьим параметром:

После создания плеер предоставляет компактный API для управления отображением панорам и подписки на пользовательские события. Но, как мне кажется, это не самая интересная возможность API панорам.

Свои панорамы

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

Любая панорама начинается со съемки и подготовки панорамного изображения. Для съемки можно воспользоваться специальным устройством, обычным фотоаппаратом или даже смартфоном. Главное, чтобы результатом съемки и склейки была сферическая панорама в равнопромежуточной проекции. Например, стандартное приложение камеры на Android умеет снимать и склеивать панорамы в нужной проекции. Именно им мы и воспользовались для съемки панорам нашего уютного опенспейса.

После того как мы сняли панорамное изображение, необходимо его подготовить к отображению в плеере. Для этого нам нужно разрезать его на тайлы. Кроме того, мы можем подготовить изображения нескольких разных размеров для разных уровней мастабирования. Плеер будет выбирать самый подходящий уровень для текущего размера DOM-элемента, в котором открыт плеер, и угловых размеров видимой области панорамы. А если самый маленький уровень меньше 2048 пикселей по ширине изображения, он будет использован для создания «эффекта прогрессивного джипега». Плеер подгрузит тайлы этого уровня с самым высоким приоритетом и будет показывать их там, где нет тайлов лучшего качества (например, если они еще не загружены или были вытеснены из памяти и пока не перезагрузились).

Для нарезки изображений на тайлы можно воспользоваться любым ПО (при наличии определенной усидчивости — хоть Paint). Размеры тайлов должны быть степенями двойки (те из вас, кто работал с WebGL, думаю, догадываются, откуда растут ноги у этого ограничения). Я воспользовался ImageMagick:

Давайте наконец напишем уже какой-то код для нашей панорамы. API — это система связанных между собой интерфейсов. Эти интерфейсы описывают объект панорамы и все связанные с ним.

Давайте теперь разберем эту картинку по сущностям.

Также нужно реализовать методы, возвращающие позицию панорамы и систему координат, в которой она задана. Эти данные будут использованы плеером для корректного позиционирования в сцене объектов, связанных с панорамой (о них ниже).

На этом минимальное описание панорамы готово, и плеер сможет ее отобразить:

Кстати, такое минимальное описание панорамы можно сделать быстрее и проще с функцией-хелпером ymaps.panorama.Base.createPanorama :

Кроме собственно самой панорамы плеер умеет отображать три вида объектов: маркеры, переходы и связи.

Например, маркер, обозначающий дом. Вот его состояние по умолчанию, состояние при наведенном курсоре и раскрытое состояние:

Переходы — это те самые стрелки, по клику на которые плеер переходит на соседнюю панораму. Объекты, описывающие переходы, должны реализовывать интерфейс IPanoramaThorougfare :

Связи являются своего рода гибридом маркеров и переходов: выглядят они как первые, а ведут себя как последние. В коде они реализуются точно так же, как и маркеры, но с добавлением метода getConnectedPanorama (см. IPanoramaConnection ).

Вместо заключения

API панорам пока что запущен в статусе бета. Встраивайте, тестируйте на своих сайтах и приложениях, рассказывайте нам об этом в клубике, группе во ВКонтакте, Фейсбуке или через поддержку. Вот ЦИАН уже 🙂

Источник

Оцените статью
Как сделать своими руками
Добавить комментарий
Adblock
detector