WebVR и революция периферийных вычислений в браузере

Пришла огромная технологическая волна - Виртуальная реальность (VR). Что бы вы ни чувствовали, когда впервые взяли смартфон в руки, первое знакомство с виртуальной реальностью дает более существенный эмоциональный опыт во всех аспектах работы с компьютером. Прошло всего 12 лет с момента появления первого iPhone. Как концепция, виртуальная реальность существует еще дольше, но технология, необходимая для того, чтобы донести виртуальную реальность до обычных пользователей, была недоступна до недавнего времени.

Oculus Quest — это потребительская игровая платформа Facebook для виртуальной реальности. Его главная особенность в том, что ему не нужен ПК. Он обеспечивает беспроводную мобильную виртуальную реальность. Вы можете вручить кому-то гарнитуру VR в кафе, чтобы поделиться 3D-моделью примерно с той же неловкостью, что и гуглить что-то в разговоре, но отдача от общего опыта намного более убедительна.

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

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

В следующих статьях мы расскажем о некоторых уникальных проблемах и возможностях кода. Чтобы изучить эту технологию, я сделал демонстрацию Canvas и WebVR и опубликовал код на GitHub.

Что означает VR для UX

Как разработчик Toptal, я помогаю компаниям доводить проекты от идеи до бета-тестирования с пользователями. Так какое же отношение VR имеет к бизнес-веб-приложениям?

Развлекательный контент приведет к распространению виртуальной реальности (как это произошло на мобильных устройствах). Однако, как только виртуальная реальность станет такой же популярной, как мобильные устройства, ожидаемым опытом станет «дизайн, ориентированный на виртуальную реальность» (по аналогии с «сначала мобильные устройства»).

«Сначала мобильные» были сменой парадигмы, «сначала офлайн» — это текущая смена парадигмы, а «сначала виртуальная реальность» не за горами. Это очень захватывающее время для дизайнера и разработчика, потому что виртуальная реальность — это совершенно другая парадигма дизайна (мы рассмотрим это в последней статье серии). Вы не VR-дизайнер, если не можете схватиться.

Виртуальная реальность началась с революции персональных компьютеров (ПК), но становится следующим шагом в мобильной революции. Oculus Quest от Facebook основан на Google Cardboard с использованием системы-на-чипе (SoC) Qualcomm Snapdragon 835, отслеживания гарнитуры (с использованием мобильных камер) и работает на Android — все это упаковано для удобного крепления на нежных органах чувств вашего лица.

Oculus Quest за 400 долларов содержит потрясающие впечатления, которыми я могу поделиться со своими друзьями. Новый iPhone за 1000 долларов уже никого не впечатляет. Человечество не собирается отказываться от виртуальной реальности.

Промышленные приложения виртуальной реальности

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

• Архитектура и недвижимость создают ценность физической реальности при экстраординарных затратах (по сравнению с цифровыми), поэтому для архитекторов и агентов по недвижимости вполне естественно проводить клиентов через виртуальную реальность, чтобы показать свой опыт. VR предлагает «бета-тест» вашего стадиона стоимостью 200 миллионов долларов или виртуальное прохождение по телефону.
• Обучение и образование в виртуальной реальности передают опыт, который иначе было бы невозможно воспроизвести с помощью изображений или видео.
• Автомобильные компании извлекают выгоду из VR, от дизайна и безопасности до обучения и маркетинга.
• Медицинские работники из детской больницы Люсиль Паккард в Стэнфорде используют виртуальную реальность для планирования операций на сердце, что позволяет им понять анатомию пациента до того, как сделать один разрез. VR также заменяет фармацевтические препараты для облегчения боли.
• Розничная торговля, маркетинг и гостиничный бизнес уже предлагают виртуальные туры по продуктам и местам. По мере того, как ритейлеры начинают понимать, насколько убедительным может быть их покупательский опыт, новаторы в сфере розничной торговли забивают последний гвоздь в гроб обычных магазинов.

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

Что означает виртуальная реальность для Интернета и периферийных вычислений

Edge Computing переносит вычисления из вашего основного кластера серверов приложений ближе к конечному пользователю. Это вызвало маркетинговый ажиотаж, потому что хостинговые компании не могут дождаться, чтобы арендовать вам сервер с малой задержкой в ​​каждом городе.

Примером граничных вычислений B2C является сервис Google Stadia, который запускает игровые нагрузки с интенсивным использованием ЦП/ГП на серверах Google, а затем отправляет игру на устройство, такое как Netflix. Любой тупой хромбук Netflix может внезапно играть в игры, как высококлассный игровой компьютер. Это также создает новые варианты архитектуры тесно интегрированных монолитных многопользовательских игр.

Примером граничных вычислений B2B является GRID от Nvidia, который предоставляет виртуальные удаленные рабочие станции с поддержкой графического процессора Nvidia для дешевых устройств класса Netflix.

Вопрос: Почему бы не перенести граничные вычисления из центра обработки данных в браузер?

Вариант использования вычислений на границе браузера — это «ферма рендеринга анимации» из компьютеров, которые рендерят 3D-фильмы, разбивая дневной процесс на куски, которые тысячи компьютеров могут обработать за несколько минут.

Такие технологии, как Electron и NW.js, привнесли веб-программирование в настольные приложения. Новые браузерные технологии (например, PWA) возвращают модель распространения веб-приложений (SaaS — это распространение) обратно на настольные компьютеры. Примеры включают такие проекты, как SETI@Home, Folding@Home (свертывание белков) или различные фермы рендеринга. Вместо загрузки установщика теперь можно присоединиться к вычислительной ферме, просто посетив веб-сайт.

Вопрос: Является ли WebVR «реальной вещью» или VR-контент будет вытеснен в «магазины приложений» и огороженные сады?

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

Спойлер: да, WebVR — это реально. И да, браузерные периферийные вычисления могут использовать тот же API для доступа к вычислительной мощности, которая обеспечивает WebVR.

Очень весело писать! Давайте создадим доказательство концепции

Чтобы проверить это, мы проведем астрофизическую симуляцию задачи n тел.

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

Хотя задача n тел не имеет аналитического решения (уравнений), у нее есть вычислительное решение (алгоритмы), равное O(n²). O(n²) — это наихудший возможный случай, но это то, как получить то, что мы хотим, и почему в первую очередь была изобретена нотация Big O.

Рисунок 2: «Вверх и вправо? Ну, я не инженер, но производительность мне кажется хорошей!»

Если вы стряхиваете пыль со своих навыков работы с Big O, помните, что нотация Big O измеряет, как работа алгоритма «масштабируется» в зависимости от размера данных, с которыми он работает.

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

Хотя наш внутренний цикл < n, он не <= O (log n), поэтому весь алгоритм равен O (n²). Это перерывы, никаких дополнительных кредитов.

 for (let i: i32 = 0; i < numBodies; i++) { // n // Given body i: pair with every body[j] where j > i for (let j: i32 = i + 1; j < numBodies; j++) { // 1/2 n is > log n, so n. // Calculate the force the bodies apply to one another stuff = stuff } }

Решение n-body также отправляет нас прямо в мир физических/игровых движков и позволяет исследовать технологии, необходимые для WebVR.

Для нашего прототипа, когда мы создадим симуляцию, мы сделаем 2D-визуализацию.

Наконец, мы заменим визуализацию Canvas на версию WebVR.

Если вы нетерпеливы, вы можете сразу перейти к коду проекта.

Web Workers, WebAssembly, AssemblyScript, Canvas, Rollup, WebVR, Aframe

Пристегнитесь и насладитесь динамичной и веселой игрой с новыми технологиями, которые уже появились в вашем современном мобильном браузере (извините, не в Safari):

• Мы будем использовать Web Workers , чтобы переместить симуляцию в отдельный поток ЦП, что улучшит воспринимаемую и фактическую производительность.
• Мы будем использовать WebAssembly для запуска алгоритма O(n²) в высокопроизводительном (C/C++/Rust/AssemblyScript/и т. д.) скомпилированном коде в этом новом потоке.
• Мы будем использовать Canvas для визуализации нашей симуляции в 2D.
• Мы будем использовать Rollup и Gulp как облегченную альтернативу Webpack.
• Наконец, мы будем использовать WebVR и Aframe для создания виртуальной реальности для вашего телефона.

Архитектура обратной стороны салфетки перед погружением в код

Мы начнем с версии Canvas, потому что вы, вероятно, читаете это на работе.

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

Затем мы визуализируем это в браузере с помощью Canvas, наконец, заменив нашу визуализацию Canvas на WebVR с помощью Aframe.

Цикл проектирования и моделирования API

Наша симуляция n тел предсказывает положение небесных объектов, используя силы гравитации. Мы можем рассчитать точную силу между двумя объектами с помощью уравнения, но для расчета сил между тремя или более объектами нам нужно разбить симуляцию на небольшие временные сегменты и выполнить итерацию. Наша цель — 30 кадров в секунду (скорость видео) или ~33 мс/кадр.

Чтобы сориентироваться, вот краткий обзор кода:

1. Браузер GET index.html
2. Который запускает main.js как код ниже. import обрабатывается с помощью Rollup, альтернативы Webpack.
3. Что создает новый nBodySimulator()
4. Который имеет внешний API:
   1. sim.addВизуализация()
   2. sim.addBody()
   3. сим.старт()

 // src/main.js import { nBodyVisPrettyPrint, nBodyVisCanvas } from "./nBodyVisualizer" import { Body, nBodySimulator } from "./nBodySimulator" window.onload = function() { // Create a Simulation const sim = new nBodySimulator() // Add some visualizers sim.addVisualization(new nBodyVisPrettyPrint(document.getElementById("visPrettyPrint"))) sim.addVisualization(new nBodyVisCanvas(document.getElementById("visCanvas"))) // This is a simulation, using opinionated G = 6.674e-11 // So boring values are allowed and create systems that collapse over billions of years. // For spinny, where distance=1, masses of 1e10 are fun. // Set Z coords to 1 for best visualization in overhead 2D Canvas. // lol, making up stable universes is hard // name color xyzm vz vy vz sim.addBody(new Body("star", "yellow", 0, 0, 0, 1e9)) sim.addBody(new Body("hot jupiter", "red", -1, -1, 0, 1e4, .24, -0.05, 0)) sim.addBody(new Body("cold jupiter", "purple", 4, 4, -.1, 1e4, -.07, 0.04, 0)) // A couple far-out asteroids to pin the canvas visualization in place. sim.addBody(new Body("asteroid", "black", -15, -15, 0, 0)) sim.addBody(new Body("asteroid", "black", 15, 15, 0, 0)) // Start simulation sim.start() // Add another sim.addBody(new Body("saturn", "blue", -8, -8, .1, 1e3, .07, -.035, 0)) // That is the extent of my effort to handcraft a stable solar system. // We can now play in that system by throwing debris around (inner plants). // Because that debris will have significantly smaller mass, it won't disturb our stable system (hopefully :-) // This requires we remove bodies that fly out of bounds past our 30x30 space created by the asteroids. // See sim.trimDebris(). It's a bit hacky, but my client (me) doesn't want to pay for it and wants the WebVR version. function rando(scale) { return (Math.random()-.5) * scale } document.getElementById("mayhem").addEventListener('click', () => { for (let x=0; x<10; x++) { sim.addBody(new Body("debris", "white", rando(10), rando(10), rando(10), 1, rando(.1), rando(.1), rando(.1))) } }) }

Два астероида имеют нулевую массу, поэтому на них не действует гравитация. Они уменьшают масштаб нашей 2D-визуализации как минимум до 30x30. Последний фрагмент кода — это наша кнопка «беспредел», позволяющая добавить 10 маленьких внутренних планет для веселья!

Дальше наш «цикл симуляции» — каждые 33 мс пересчитывать и перекрашивать. Если вам весело, мы могли бы назвать это «игровым циклом». Самая простая вещь, которая могла бы работать для реализации нашего цикла, — это setTimeout() — и это выполнило мою задачу. Альтернативой может быть requestAnimationFrame().

sim.start() запускает действие, вызывая sim.step() каждые 33 мс (около 30 кадров в секунду).

 // Methods from class nBodySimulator // The simulation loop start() { // This is the simulation loop. step() calls visualize() const step = this.step.bind(this) setInterval(step, this.simulationSpeed) } // A step in the simulation loop. async step() { // Skip calculation if worker not ready. Runs every 33ms (30fps), so expect skips. if (this.ready()) { await this.calculateForces() } else { console.log(`Skipping: ${this.workerReady}, ${this.workerCalculating}`) } // Remove any "debris" that has traveled out of bounds - this is for the button this.trimDebris() // Now Update forces. Reuse old forces if we skipped calculateForces() above this.applyForces() // Ta-dah! this.visualize() }

Ура! Мы переходим от дизайна к реализации. Мы реализуем физические расчеты в WebAssembly и запускаем их в отдельном потоке Web Worker.

nBodySimulator оборачивает эту сложность реализации и разбивает ее на несколько частей:

1. calculateForces() обещает вычислить прилагаемые силы.
   1. В основном это операции с плавающей запятой, которые выполняются в WebAssembly.
   2. Эти вычисления составляют O(n²) и являются нашим узким местом в производительности.
   3. Мы используем Web Worker, чтобы вывести их из основного потока для лучшей воспринимаемой и фактической производительности.
2. trimDebris() удаляет любой мусор, который больше не представляет интереса (и уменьшит нашу визуализацию). На)
3. applyForces() применяет вычисленные силы к телам. На)
   1. Мы повторно используем старые силы, если пропустили calculateForces(), потому что рабочий процесс уже был занят. Это улучшает воспринимаемую производительность (удаляя джиттер) за счет точности.
   2. Основной поток пользовательского интерфейса может рисовать старые силы, даже если расчет занимает больше 33 мс.
4. visualize() передает массив тел каждому визуализатору для рисования. На)

И все это происходит за 33 мс! Можем ли мы улучшить этот дизайн? да. Любопытно или есть предложение? Проверьте комментарии ниже. Если вы ищете продвинутый современный дизайн и реализацию, ознакомьтесь с Matter.js с открытым исходным кодом.

Взлетать!

Мне было так весело создавать это, и я рад поделиться этим с вами. Увидимся после прыжка!

1. Введение - эта страница
2. Web Workers — доступ к нескольким потокам
3. WebAssembly — браузерные вычисления без JavaScript
4. Rollup и Gulp — альтернатива WebPack
5. Canvas — рисование с помощью Canvas API и «симуляционный цикл»
6. WebVR — замена нашего визуализатора Canvas на WebVR и Aframe

Развлечения будут лидировать в контенте виртуальной реальности (например, в мобильных устройствах), но как только виртуальная реальность станет нормальной (например, в мобильных устройствах), она станет ожидаемым потребителем и продуктивным опытом (как в мобильных устройствах).

Мы никогда не были более уполномочены создавать человеческий опыт. Никогда еще не было более захватывающего времени для дизайнера и разработчика. Забудьте о веб-страницах — мы будем строить миры.

Наше путешествие начинается со скромного Web Worker, так что следите за следующей частью нашей серии WebVR.