Обичам проектите да се „правят“. Пристигнахме в края на нашето пътуване - и раждането на нашата симулация на небесната гравитация в WebVR.

В тази последна публикация ще включим нашия симулационен код с висока производителност (членове 1,2,3) във визуализатор WebVR въз основа на визуализатора на платното (член 4).

1. “Проблем с n-тялото” Интро и архитектура
2. Работници в мрежата вземете ни допълнителни нишки на браузъра
3. WebAssembly и AssemblyScript за нашия O (n²) код за ограничено изпълнение
4. Визуализация на данните на платното
5. Визуализация на данни от WebVR

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

Проучваме промяната на парадигмата на браузъра от еднонишко JavaScript изпълнение към многонишково (уеб работници) време за изпълнение с висока производителност (WebAssembly). Тези функции за настолни компютри с производителност са налични в Progressive Web Apps и модела за разпространение на SaaS.

VR ще създаде завладяваща среда за продажби и маркетинг без разсейване, за да комуникира, убеждава и измерва ангажираността (проследяване на очите и взаимодействие). Данните все още ще бъдат нули и единици, но очакваното резюме и потребителското изживяване ще бъдат WebVR - точно както днес изграждаме опит за мобилно табло за плоската мрежа.

Тези технологии също позволяват разпределени ръбови изчисления на браузъра. Например, бихме могли да създадем уеб-базирано приложение, което да стартира нашите изчисления WebAssembly за милиони звезди в симулация. Друг пример е приложение за анимация, което прави творенията на други потребители, докато редактирате вашите собствени.

Развлекателното съдържание води до усвояването на виртуалната реалност, точно както развлеченията, водени от мобилни устройства. След като обаче VR е нормално (както днес е дизайнът за първи път за мобилни устройства), това ще бъде очакваното изживяване (дизайнът за първи път за VR). Това е много вълнуващо време да бъдете дизайнер и разработчик - а VR е съвсем различна дизайнерска парадигма.

Вие не сте VR дизайнер, ако не можете захват . Това е смело твърдение и днес е дълбокото гмуркане в дизайна на VR. Това поле е измислено, докато четете това. Целта ми е да споделя моя опит в софтуера и филмите, за да поставя началото на разговора „Първият дизайн на VR“. Всички се учим един от друг.

Имайки предвид тези грандиозни прогнози, исках да завърша този проект като професионална технологична демонстрация - WebVR е чудесен избор за това!

WebVR и Google A-Frame

The WebVR git репо е разклонение на версията на платното по няколко причини. Това улеснява хостването на проекта на страниците на Github и WebVR изисква няколко промени, които биха затрупали версията на платното и тези статии.

Ако си спомняте първата ни публикация за архитектурата , делегирахме цялата симулация на nBodySimulator.

The публикация на уеб работник показа nBodySimulator има step() функция, наречена на всеки 33ms от симулацията. step() обаждания calculateForces() за да стартираме нашия O (n²) Код за симулация на WebAssembly (член 3), след това актуализира позициите и пребоядисанията. В нашата предишна публикация създаване на визуализация на платно , внедрихме това с елемент на платно, започвайки от този основен клас:

/** * Base class that console.log()s the simulation state. */ export class nBodyVisualizer { constructor(htmlElement) { this.htmlElement = htmlElement this.resize() this.scaleSize = 25 // divided into bodies drawSize. drawSize is log10(mass) // This could be refactored to the child class. // Art is never finished. It must be abandoned. } resize() {} paint(bodies) { console.log(JSON.stringify(bodies, null, 2)) } }

Определете предизвикателството за интеграция

Имаме симулацията. Сега искаме да се интегрираме с WebVR - без да архитектираме нашия проект. Каквито и корекции да направим в симулацията, се случват на всеки 33 ms в основната нишка на потребителския интерфейс във функцията paint(bodies)

Ето как ще измерим „готово“. Вълнувам се - да се захващаме за работа!

Как да направим виртуална реалност

Първо, ние се нуждаем от дизайн:

• Какво е VR направен от ?
• Как е дизайнът на WebVR изразено ?
• Как можем взаимодействат с него?

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

Можем да умножим 10 пъти историята си с лагерния огън, като добавим 3D стереоскопични изображения и аудио. Моят инструктор по бюджетиране на филми казваше, „Плащаме само за плаката. Ние не изграждаме реалността. '

Ако сте запознати с DOM на браузъра, ще знаете, че той създава дървовидна йерархична структура.

Имплицитно в дизайна на мрежата е зрителят, който гледа отпред. Поглеждането отстрани ще разкрие елементите на DOM като линии, а отзад просто ще видим тега, защото той закрива децата си.

Част от завладяващото преживяване на VR позволява на потребителя да контролира своята гледна точка, стил, темпо и ред на взаимодействия. Те не трябва да обръщат внимание на нищо конкретно. Ако програмно преместите или завъртите камерата, те ще го направят буквално бълва от VR болест.

Моля, обърнете внимание, че VR болестта не е шега. Както нашите очи, така и вътрешните уши откриват движение. Много е важно за животно, което ходи изправено. Когато тези сензори за движение не са съгласни, мозъкът ни естествено приема, че устата ни отново яде глупости и повръща. Всички бяхме деца веднъж. За този инстинкт за оцеляване във VR вече е писано много. Заглавието „Epic Fun“ е безплатно в Steam, а американските влакчета са най-добрата демонстрация на VR болест, която съм намерил.

Виртуалната реалност се изразява като „графика на сцената“. Графиката на сцената има същия дървовиден модел като DOM, за да скрие детайлите и сложността на убедителна 3D среда. Въпреки това, вместо да превъртаме и маршрутизираме, ние позиционираме зрителя там, където иска да привлече преживяването към тях.

Ето графиката на сцената на Hello World от A-Frame WebVR Framework на Google:

Hello, WebVR! • A-Frame

Този HTML документ създава DOM в браузъра. Теговете са част от рамката A-Frame и са коренът на графиката на сцената. Тук виждаме четири 3D примитива, показани в сцената.

Първо, забележете, че гледаме сцената от плосък уеб браузър. Малката маска в долния десен кани потребителя да премине в 3D стереоскопичен режим.

На теория би трябвало да можете:

1. Отворете това на телефона си
2. Дръжте телефона си до лицето си
3. Насладете се на великолепието на нова реалност!

Никога не съм успявал да работи без фантастичните лещи на VR слушалки. Можете да вземете VR слушалки за телефон с Android на евтино (основно устройство, базирано на Google Cardboard), но за разработване на съдържание предлагам самостоятелен HMD (Head Mounted Display) като Oculus Quest.

Подобно на подводното гмуркане или скачането с парашут, Виртуалната реалност е спортен спорт.

Обучение „Клиф“ на VR дизайнери

Забележете, че сцената A-Frame Hello World има осветление по подразбиране и камера:

• Лицата на куба са в различни цветове - кубът се самозасенчва.
• Кубът хвърля сянка върху равнината - има насочена светлина.
• Между куба и равнината няма пролука - това е свят с гравитация.

Това са критични реплики, които казват на зрителя, 'Спокойно, това нещо на лицето ти е напълно нормално.'

Също така забележете, че тази настройка по подразбиране е имплицитна в горния код на сцена на Hello World. A-Frame разумно осигурява разумно подразбиране, но имайте предвид - камерата и осветлението са пропастта, които дизайнерите на плоските уеб трябва да пресекат, за да създадат VR.

Приемаме настройката за осветление по подразбиране за даденост. Например бутони:

Забележете колко разпространено е това неявно осветление в дизайна и фотографията. Дори бутонът „плосък дизайн“ не може да избегне осветлението по подразбиране в мрежата - хвърля сянка надолу и надясно.

Проектирането, комуникацията и внедряването на настройки за осветление и камери са учебната скала на WebVR дизайнера. The „Език на филма“ е колекция от културни норми - изразени като различни настройки на камерата и осветлението - които емоционално предават историята на публиката. Професионалистите във филма, които проектират / преместват светлини и камера около сцена, са отдел за хващане .

Обратно към нашата виртуална реалност

Сега, нека се върнем на работа. Нашата небесна сцена WebVR има подобен модел: