Как Facebook оптимизирует и делает 360 фотографий так быстро?

Мне очень нравится, как Facebook делает 360-градусные панорамы такими быстрыми и эффективными при просмотре на сайт Facebook. Я хочу понять, какие технологии/библиотеки они используют, чтобы сделать что-то на моем собственном сайте.

Есть ли какие-либо технические документы о производительности 360 фотографий или дайте мне несколько советов, как это сделать?


person Erik    schedule 28.06.2016    source источник


Ответы (1)


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

  • Сфотографировать
  • Поэкспериментируйте с фильтрами, цветом и кадрированием
  • Нажмите Отправить
  • Удивитесь, как быстро это было!

Что произошло:

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

Есть и другие хитрости:

  • Сначала сделайте видимое. Например, вычислите некоторые результаты с пониженной частотой дискретизации, когда пользователь прикасается к элементу управления. Вы можете визуально «применить» результаты при перетаскивании, но реально только и изображение 320x180. Точно так же электронная таблица сначала обновляет видимую страницу, а затем беспокоится о будущем.
  • Изучите аппаратное обеспечение. Применение простой матрицы преобразования 4x4 для поворота и растяжения 3D-графики требует около 16 миллионов операций на изображении 1000x1000. Или 1 миллион по правильной инструкции. Или 1, используя правильную видеоинструкцию.

Это прекрасное, большое поле. Стремление только к одному эффекту может дать вам больше, чем попытка изучить поле и отследить, что дает вам эффект.

person Charles Merriam    schedule 11.07.2016
comment
Спасибо за ответ. Знаете ли вы, какая технология/фреймворк лежит в основе просмотра панорамных фотографий 360°? У меня есть планы сделать такую ​​же функцию на моем сайте. - person Erik; 12.07.2016
comment
Фраза, которую вы ищете, — это сшивание или распознавание краевых артефактов для выравнивания. Я думаю, что FB использует доморощенную версию, но начните с OpenCV (не зависит от языка) по адресу docs.opencv.org/2.4/modules/stitching/doc/stitching.html - person Charles Merriam; 12.07.2016
comment
О, и видео легче для мозга: youtube.com/watch?v=QapSxGnUWtY - person Charles Merriam; 12.07.2016
comment
прошивать из чего? Мы сначала загружаем 360-градусную панораму на Facebook, а затем обрезаем ее, чтобы потом сшить? - person Erik; 12.07.2016
comment
Привет Эрик. Похоже, вы хотите поговорить. Грубо говоря, вы либо используете камеру 360 и сшиваете (см. Bamboo, переименованный в iPix для оригинального продукта на рынке недвижимости), либо сшиваете менее выровненные фотографии. Если вы находитесь в Силиконовой долине, мы можем выпить кофе. - person Charles Merriam; 12.07.2016
comment
Ваше предложение о кофе интересно, но, к сожалению, меня там нет :( Меня просто интересует следующее: скажем, посмотрите на следующий пост в Facebook facebook.com/panoq/photos/ Как видите, это технология WebGL. С помощью инспектора dom мы обнаружили следующее изображение scontent. xx.fbcdn.net/t31.7935-8/ Создают ли они холст webgl на основе этого изображения? - person Erik; 12.07.2016
comment
Привет Эрик. Загляни ко мне в следующую поездку в долину. Да, это прошивка. Похоже, React использует события движения мыши и сшивает новый холст из серии преобразований клипов отдельных изображений. В этом случае изображения были предварительно сшиты, что означает, что они идеально выровнены, и вы просто наблюдаете за событиями мыши холста, чтобы перерисовать холст серией преобразований svg, которые обновляют холст. То есть они используют SVG для вывода на холст. SVG отображается в DOM. Кажется, вам просто нужен окончательный пакет. Удачи. - person Charles Merriam; 13.07.2016
comment
Да, я ищу окончательный пакет, чтобы сделать то же самое на моем сайте. Хорошо, спасибо за ответ, и вам удачи :)) - person Erik; 13.07.2016
comment
Спасибо. Для готового решения попробуйте kaideoscope.js или js-360. Я тоже не использовал. npmjs.com/package/kaleidoscopejs, npmjs.com/browse/keyword/360 - person Charles Merriam; 15.07.2016