Google maps ( карты google )

WebGL

WebGL 1.0 поддерживается везде

2D vs 3D 

Вершинный шейдер

Фрагментный шейдер

Программа

Вершинный буфер

отрисовать

низкоуровневыйThree.jsудобные абстракцииReadme Three.js

  • У нас есть некая сцена () — это виртуальное пространство. Этих сцен может быть несколько, но обычно она одна. Если сцен несколько, то они существуют как параллельные миры.
  • Есть камера () — та точка, откуда мы будем снимать и получать картинку на экран.
  • Далее идет участок кода, где мы создаем объект. Тут создается геометрия куба () и его материал (), в данном случае просто плоского красного цвета. Когда мы объединяем каркас куба и накладываем на него материал, то получаем красный куб (), который далее помещаем на сцену (наше виртуальное пространство).
  • Следующий этап — создается объект renderer, в нем создается объект canvas и происходит взаимодействие с WebGL. В данном случае мы задаем размер, чтобы отрисовка происходила во весь экран, и добавляем canvas в body на страницу.
  • После чего нам просто нужно вызывать функцию , которая по  вызывает сама себя — плюс кубик вращается.

готовый exporterOrbitControlsexamples

пример

Сервисы для просмотра спутниковых карт

Instant Street View

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

Скриншот карты с сервиса instantstreetview.com (переключение в режим просмотра улиц)

Далее в левом углу экрана вы сможете наблюдать небольшую карту с видом сверху (на ней можно быстро найти определенный адрес), а на основном — будет отображаться улица так, как будто вы на ней сами (в 3D, см. фото ниже). Режим позволяет очень быстро сориентироваться в любом незнакомом городе/улице.

Просмотр улиц глазами реального человека

Есть и более привычный вариант просмотра — вид сверху

Обратите внимание, что если у вас на смартфоне включена и работает геолокация — вы сможете на спутниковом снимке увидеть, где вы сейчас находитесь (узнать координаты)

Снимок со спутника

Google Maps

Сервис Google Maps (карты от Google) — один из самых известных и популярных в Мире. Многие другие агрегаторы используют их снимки для представления результатов.

Что касается представления нашей страны — то в Google Maps можно просмотреть карту практически любого города (пожалуй, исключением здесь будут небольшие районные центры, села).

Вид на землю со спутника (Google Maps)

Причем, Google «знает» достопримечательности всех крупных городов (см. скрин ниже), подскажет с выбором гостиницы, кафе, проложит маршрут как добраться до того или иного места. Весьма удобно!

Вид сверху (город Волгоград)

Ну и нельзя на отметить 3D панорамные снимки — они позволяют просмотреть только самые известные достопримечательности и основные улицы города. Если ваш дом находится где-нибудь рядом с большим проспектом или шоссе (например) — наверняка вы сможете найти и его…

3D просмотр достопримечательностей

Zoom Earth

Этот сервис уникальный в своем роде и весьма интересный. Дело в том, что снимки Земли к нему приходят с нескольких спутников (если верить описанию, то NASA поставляет изображение со спутников «VIIRS», «Terra» и «Aqua»).

Не могу не отметить, что на сервисе Zoom Earth собраны не только текущие снимки, но и сделанные 3-5 и более лет назад. Это позволяет сравнить как изменилась местность за прошедшие года.

Скрин с сайта Zoom Earth

Zoom Earth позволяет искать города, улицы, отображает координаты (широту, долготу), позволяет менять масштаб (от просмотра всей планеты — до просмотра конкретного дома).

Yandex Maps

Это карты от самого известного российского поисковика. Позволяют в 2-к клика мышкой найти любую улицу и здание в любом российском городе. Также карты позволяют построить ближайший маршрут из точки А в точку Б, включить панорамный вид улицы, узнать где какие магазины, кафе, заправки и т.д. В общем, целый большой справочник…

Яндекс-карты — просмотр панорамы

Примечание: если вы не запретили Яндексу определять вашу геолокацию — сервис автоматически определит ваше текущее местоположение и подсветит его на карте.

Панорамный вид (Яндекс-карты)

Map Quest

Бесплатный американский сервис, предоставляющий доступ к спутниковым картам всем желающим. По точности детализации сервис конкурирует с Google Maps (по крайней мере в США). Также отмечу, что сервис регулярно проводит обновление карт, улучшает детализацию, повышает качество снимков.

Map Quest — скриншоты карты

Для переключения карты на снимки со спутника —обратите внимание на панельку справа. Она не только позволяет менять масштаб, но распечатать карту, построить маршрут, изменить вид и др

Панелька для настройки карт (например, переключение на вид со спутника)

Rand Mc Nally

С одной стороны достаточно простой сервис, с другой — с помощью него мне удалось просмотреть детальные снимки даже небольших деревенек в России, Белоруссии, Украине. Качество снимков весьма и весьма достойное, рекомендую всем, кто что-то не находит в предыдущих сервисах.

Скриншот работы сервиса and Mc Nally

Кстати, весьма интересный вид открывается взору, если подняться на максимальную высоту (изменить масштаб). Сервис очень красочно показывает не только карту, но и наличие пустынь, лесов, морей и т.д. (если у вас большой и яркий монитор — карта завораживает…).

Еще один скрин

Удачной прогулки!

Что такое Google просмотр улиц

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

Для того чтобы начать виртуальную прогулку по улицам города, необходимо:

  • Зайти в Google Карты и найти нужную улицу.
  • Зажать мышкой значок в виде человечка и перенести его на карту. После этого улицы подсветятся синими линиями. При наведении человечка в нужное место, откроется панорама улицы. Такую фотографию можно вращать во все стороны и перемещаться далее с помощью стрелок.

Панорамы улиц на Google Карте

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

Панорамы для бизнеса на Google Карте

Зачем нужно загружать панорамы в карты Гугл

Для владельцев заведений загрузка панорам в Google станет отличной рекламой и средством продвижения бизнеса. Особенно приятным является то, что за размещение на картах не нужно платить. Такая реклама будет работать круглые сутки семь дней в неделю.

Все тормозит

в тормозах в Safariвидеоаппаратное сглаживаниекулер компьютера начинает неистово крутитьсязазря мучаем видеокартуне рендерить, когда не нужно

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

Instancing дало самый большой прирост производительности

  • Он сильно повышает производительность. Если у вас есть много однотипных предметов и все тормозит, скорее всего, он даст большой прирост.
  • Но это сложно. Примеры из Three.js можно посмотреть здесь.

не хватает видеопамяти

Сжатые текстуры

  • Разные форматы (DXT — поддерживается только на десктопе, PVRTC — на iOS, ETC — на Android). В общем случае, скорее всего, вам придется держать 4 разные текстуры ( под каждый формат, и четвертую несжатую) и проверять, какой формат поддерживает ваша система. Если ни один форматов не поддерживается, то уже использовать оригинальную несжатую текстуру.
  • Ухудшение картинки. Степень искажения зависит от исходной картинки.
  • Проблемы с прозрачностью, когда на границе прозрачной области появляются артефакты.
  • Больший объем файлов (но можно применить gzip). Полностью черная PNG картинка размером 1024*1024 скачается мгновенно, но на видеопамяти каждая точка будет отжирать память. С сжатыми картинками наблюдается обратная ситуация — сам файл текстур может весить больше, но на видеопамяти он будет меньше занимать места.

не гонитесь за реализмомне делайте проект в одиночку

Загрузка панорам через приложение Просмотр улиц

Настройка приложения Просмотр улиц

Ознакомимся с основными настройками:

Настройки приложения Google Просмотр улиц

  • Автодобавление переходов – автоматическое объединение панорам. Эта функция работает только при близком расположении точек съемки (не более 2 метров).
  • Автоматический геотег – автоматическая расстановка панорам на карте при наличии соответствующих exif-данных в фотографиях.
  • Загрузка только по Wi-Fi – исключает загрузку панорам через мобильный интернет.
  • Автоматический поиск лиц на панорамах – автоматическое распознание лиц и их скрытие. Данная функция работает не всегда.

Загрузка панорам

Теперь можно преступить к загрузке наших 3D панорам. Нажимаем на оранжевую кнопку в нижнем правом углу, появится три варианта:

  • Подключить внешнюю – возможность подключить камеру 360 с функцией беспроводного подключения по Wi-Fi. Отснятые панорамы будут автоматически передаваться на смартфон.
  • Импортировать панорамы – загрузить панорамы из хранилища телефона.
  • Создать панораму 360 – сфотографировать панорамное изображение при помощи камеры смартфона.

Импорт панорам в приложение Просмотр улиц

Выбираем «Импортировать панорамы» — откроется проводник, в котором нужно найти и отметить панорамные фотографии для загрузки. Далее жмем «Открыть», запустится процесс загрузки. После окончания импорта, панорамы отобразятся на вкладке «Личное». Здесь они видны только автору.

Привязка фото к месту на картах

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

Привязка панорам к месту съемки на картах

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

Размытие лиц на фотографиях

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

Размытие лиц

Публикация панорам

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

Публикация 3D тура в Google

Перемещение панорам и добавление переходов

После публикации группа панорам будет находиться на вкладке «Профиль». Теперь фотографии доступны всем пользователям и вскоре появятся на картах Google.

Включение режима перемещения панорам

Остается только расставить панорамы на карте и объединить их между собой. Заходим в группу, далее «Выбрать – Выбрать все». Затем жмем на три точки и выбираем «Перемещение и объединение фото».

Изначально, все панорамы размещены в одной точке. Нужно расставить их по карте на свои места. Для перемещения нужно зажать метку и двигать ее в любом напрвлении. Чтобы понять под каким номером нужная панорама, выбираем любую отметку и видим в нижней части экрана саму панораму.

Перемещение панорам

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

Объединение снимков

Остается только развернуть панорамы относительно карты. Если при сборке они были ориентированы на север, необходимости в этом шаге не будет.

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

  • Направление радара на карте;
  • Расположение переходов в самой панораме (кружки с цифрами). Они должны занять свои места так, чтобы при перемещении в следующую панораму, направление обеих точек совпадало.

Сохранение и просмотр результата

Для сохранения 3D тура нажимаем на галочку в верхнем меню. После этого появиться предложение посмотреть результат.

Сохранение настроек виртуального тура в Гугл Картах

Полученный виртуальный тур можно найти как на самой Карте Гугл, так и в бизнес карточке заведения в разделе фотографии на вкладке «Панорамы и просмотр улиц».

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий