WebVR과 브라우저 에지 컴퓨팅 혁명

가상현실(VR)이라는 거대한 기술 물결이 도래했습니다. 스마트폰을 처음 들었을 때 느꼈던 것이 무엇이든, VR을 처음 경험하는 것은 컴퓨팅의 모든 측면에서 보다 실질적인 감정적 경험을 제공합니다. 첫 아이폰 이후 12년 만이다. 개념적으로 VR은 훨씬 더 오래 존재했지만 일반 사용자에게 VR을 제공하는 데 필요한 기술은 최근까지 사용할 수 없었습니다.

Oculus Quest는 Facebook의 VR용 소비자 게임 플랫폼입니다. 주요 특징은 PC가 필요하지 않다는 것입니다. 무선 모바일 VR 경험을 제공합니다. 커피숍에서 누군가에게 VR 헤드셋을 건네고 3D 모델을 공유하면 대화 중에 무언가를 검색하는 것과 거의 같은 어색함을 느낄 수 있지만 공유 경험의 결과는 훨씬 더 매력적입니다.

VR은 우리가 일하고, 쇼핑하고, 콘텐츠를 즐기는 방식 등을 변화시킬 것입니다.

이 시리즈에서는 WebVR 및 브라우저 에지 컴퓨팅을 가능하게 하는 현재 브라우저 기술을 살펴봅니다. 이 첫 번째 게시물은 시뮬레이션을 위한 이러한 기술과 아키텍처를 강조합니다.

다음 기사에서는 코드에서 몇 가지 고유한 과제와 기회를 강조할 것입니다. 이 기술을 살펴보기 위해 Canvas 및 WebVR 데모를 만들고 GitHub에 코드를 게시했습니다.

VR이 UX에 의미하는 것

Toptal 개발자로서 저는 기업이 아이디어에서 사용자와 함께 베타 테스트에 이르는 프로젝트를 돕습니다. 그렇다면 VR은 비즈니스 웹 애플리케이션과 어떤 관련이 있습니까?

엔터테인먼트 콘텐츠는 모바일에서와 같이 가상 현실의 도입을 이끌 것입니다. 그러나 VR이 모바일처럼 주류가 되면 "VR 우선 디자인"이 예상되는 경험이 될 것입니다("모바일 우선"과 유사).

'모바일 퍼스트'는 패러다임의 전환이었고, '오프라인 퍼스트'는 현재의 패러다임 전환이었고, 'VR 퍼스트'는 곧 도래했습니다. VR은 완전히 다른 디자인 패러다임이기 때문에 디자이너와 개발자에게 매우 흥미로운 시기입니다. 잡을 수 없다면 VR 디자이너가 아닙니다.

VR은 PC(Personal Computing) 혁명에서 시작되었지만 모바일 혁명의 다음 단계로 도래하고 있습니다. Facebook의 Oculus Quest는 Qualcomm의 Snapdragon 835 SoC(System-on-Chip), 헤드셋 추적(모바일 카메라 사용)을 사용하는 Google Cardboard를 기반으로 하며 Android에서 실행됩니다. 이 모든 것은 얼굴의 부드러운 감각 기관에 편안하게 장착할 수 있도록 패키지되어 있습니다.

$400 Oculus Quest에는 친구들과 공유할 수 있는 놀라운 경험이 있습니다. 새로운 1,000달러짜리 iPhone은 더 이상 누구에게도 감동을 주지 않습니다. 인류는 VR 후크를 침을 뱉지 않을 것입니다.

VR 산업 응용

VR은 수많은 산업과 컴퓨팅 분야에서 그 존재감을 느끼기 시작했습니다. 언론 보도가 많은 콘텐츠 소비와 게임 외에도 VR은 건축에서 의료에 이르기까지 산업을 천천히 변화시키고 있습니다.

• 건축 및 부동산 은 (디지털에 비해) 엄청난 비용으로 물리적 현실의 가치를 창출하므로 건축가와 부동산 중개인이 고객에게 가상 현실을 통해 경험을 보여 주는 것은 자연스러운 일입니다. VR은 2억 달러 규모의 경기장에 대한 "베타 테스트" 또는 전화로 가상 연습을 제공합니다.
• VR의 학습 및 교육 은 이미지나 비디오로 복제할 수 없는 경험을 전달합니다.
• 자동차 회사는 설계 및 안전에서 교육 및 마케팅에 이르기까지 VR의 이점을 누리고 있습니다.
• Stanford's Lucile Packard Children's Hospital의 의료 전문가들은 VR을 사용하여 심장 수술을 계획하여 단일 절개를 만들기 전에 환자의 해부학을 이해할 수 있도록 했습니다. VR은 통증 완화를 위한 의약품도 대체하고 있습니다.
• 소매, 마케팅 및 접객업 은 이미 제품 및 장소에 대한 가상 둘러보기를 제공합니다. 소매업체가 자신의 쇼핑 경험이 얼마나 매력적인지 이해하기 시작하면서 소매 혁신가는 오프라인 쇼핑 관에 최종 못을 박을 것입니다.

기술이 발전함에 따라 다양한 산업 분야에서 채택이 증가하는 것을 보게 될 것입니다. 이제 문제는 이러한 변화가 얼마나 빨리 일어나고 어떤 산업이 가장 큰 영향을 받을 것인가입니다.

웹 및 에지 컴퓨팅에서 VR이 의미하는 것

"에지 컴퓨팅"은 컴퓨팅을 주 애플리케이션 서버 클러스터에서 최종 사용자에게 더 가깝게 이동시킵니다. 호스팅 회사가 모든 도시에서 대기 시간이 짧은 서버를 임대하기를 기다릴 수 없기 때문에 마케팅 버즈가 있습니다.

B2C 에지 컴퓨팅의 예로는 Google 서버에서 CPU/GPU 집약적인 게임 워크로드를 실행한 다음 Netflix와 같은 장치로 게임을 보내는 Google의 Stadia 서비스가 있습니다. 멍청한 Netflix Chromebook은 갑자기 고급 게임용 컴퓨터와 같은 게임을 할 수 있습니다. 이것은 또한 긴밀하게 통합된 모놀리식 멀티플레이어 게임의 새로운 아키텍처 옵션을 생성합니다.

B2B 에지 컴퓨팅의 예로는 Nvidia GPU 지원 가상 원격 워크스테이션을 저렴한 Netflix급 장치에 제공하는 Nvidia의 GRID가 있습니다.

질문: 엣지 컴퓨팅을 데이터 센터에서 브라우저로 옮기지 않는 이유는 무엇입니까?

브라우저 에지 컴퓨팅의 사용 사례는 하루에 걸친 프로세스를 수천 대의 컴퓨터가 몇 분 안에 처리할 수 있는 덩어리로 나누어 3D 영화를 렌더링하는 컴퓨터의 "애니메이션 렌더 팜"입니다.

Electron 및 NW.js와 같은 기술은 웹 프로그래밍을 데스크탑 애플리케이션에 도입했습니다. PWA와 같은 새로운 브라우저 기술은 웹 애플리케이션 배포 모델(SaaS는 배포에 관한 것임)을 데스크톱 컴퓨팅으로 다시 가져오고 있습니다. 예를 들면 SETI@Home, Folding@Home(단백질 접기) 또는 다양한 렌더 팜과 같은 프로젝트가 있습니다. 설치 프로그램을 다운로드할 필요 없이 이제 웹 사이트를 방문하기만 하면 컴퓨팅 팜에 가입할 수 있습니다.

질문: WebVR은 "실제"입니까, 아니면 VR 콘텐츠가 "앱 스토어"와 벽으로 둘러싸인 정원으로 분주할 것입니까?

Toptal 프리랜서이자 기술자로서 아는 것이 제 일입니다. 그래서 나는 내 자신의 질문에 답하기 위해 기술 프로토타입을 만들었습니다. 내가 찾은 답변은 매우 흥미로웠고 여러분과 공유하기 위해 이 블로그 시리즈를 작성했습니다.

스포일러: 예, WebVR은 실제입니다. 예, 브라우저 에지 컴퓨팅은 동일한 API를 사용하여 WebVR을 활성화하는 컴퓨팅 성능에 액세스할 수 있습니다.

쓰기 매우 재미있습니다! 개념 증명을 구축하자

이것을 테스트하기 위해 우리는 n체 문제에 대한 천체 물리학 시뮬레이션을 만들 것입니다.

Astronavigators는 방정식을 사용하여 두 물체 사이의 중력을 계산할 수 있습니다. 그러나 알려진 우주의 모든 시스템인 불편하게도 3개 이상의 몸체를 가진 시스템에 대한 방정식은 없습니다. 과학!

n체 문제에는 분석적 해(방정식)가 없지만 계산 솔루션(알고리즘)은 O(n²)입니다. O(n²)은 거의 가능한 최악의 경우지만, 우리가 원하는 것을 얻는 방법과 Big O 표기법이 처음에 발명된 이유입니다.

그림 2: "위쪽과 오른쪽? 글쎄, 나는 엔지니어는 아니지만 성능은 나에게 좋아 보인다!”

Big O 기술을 털어내고 있다면 Big O 표기법은 알고리즘이 작동하는 데이터의 크기에 따라 알고리즘의 작업이 "확장"되는 방식을 측정한다는 것을 기억하십시오.

컬렉션은 시뮬레이션의 모든 바디입니다. 새 본체를 추가한다는 것은 세트의 모든 기존 본체에 대해 새로운 2체 중력 계산을 추가하는 것을 의미합니다.

내부 루프는 < 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 시각화를 만듭니다.

마지막으로 WebVR 버전용 Canvas 시각화를 교체합니다.

참을성이 없다면 프로젝트의 코드로 바로 이동할 수 있습니다.

웹 작업자, WebAssembly, AssemblyScript, 캔버스, 롤업, WebVR, Aframe

최신 모바일 브라우저(Safari가 아니라 죄송합니다)에 이미 적용된 새로운 기술 클러스터를 통해 액션으로 가득 차고 재미있는 놀이를 즐기십시오.

• 웹 작업자 를 사용하여 시뮬레이션을 자체 CPU 스레드로 이동하여 인식 및 실제 성능을 향상시킵니다.
• WebAssembly 를 사용하여 새 스레드에서 고성능(C/C++/Rust/AssemblyScript/etc.) 컴파일된 코드에서 O(n²) 알고리즘을 실행합니다.
• Canvas 를 사용하여 시뮬레이션을 2D로 시각화합니다.
• Webpack의 경량 대안으로 Rollup과 Gulp 를 사용할 것입니다.
• 마지막으로 WebVR 과 Aframe 을 사용하여 휴대폰용 가상 현실을 만듭니다.

코드에 뛰어들기 전의 냅킨 아키텍처

직장에서 이 글을 읽고 있을 것이므로 Canvas 버전부터 시작하겠습니다.

처음 몇 개의 게시물에서는 기존 브라우저 API를 사용하여 사용자 경험을 저하시키지 않으면서 CPU 집약적인 시뮬레이션을 생성하는 데 필요한 컴퓨팅 리소스에 액세스할 것입니다.

그런 다음 Canvas를 사용하여 브라우저에서 이를 시각화하고 마지막으로 Aframe을 사용하여 Canvas 시각화를 WebVR로 교체합니다.

API 설계 및 시뮬레이션 루프

우리의 n체 시뮬레이션은 중력을 사용하여 천체의 위치를 ​​예측합니다. 방정식으로 두 물체 사이의 정확한 힘을 계산할 수 있지만 세 개 이상의 물체 사이의 힘을 계산하려면 시뮬레이션을 작은 시간 세그먼트로 나누고 반복해야 합니다. 우리의 목표는 30프레임/초(동영상 속도) 또는 ~33ms/프레임입니다.

방향을 잡기 위해 다음은 코드에 대한 간략한 개요입니다.

1. 브라우저 GET의 index.html
2. 아래 코드와 같이 main.js 를 실행합니다. import 는 Webpack의 대안인 Rollup으로 처리됩니다.
3. 새로운 nBodySimulator() 생성
4. 외부 API가 있는 항목:
   1. sim.add시각화()
   2. sim.addBody()
   3. sim.start()

 // 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))) } }) }

두 소행성은 질량이 0이므로 중력의 영향을 받지 않습니다. 그들은 우리의 2D 시각화를 최소 30x30으로 축소한 상태로 유지합니다. 코드의 마지막 비트는 약간의 재미를 위해 10개의 작은 내부 행성을 추가하는 "혼란" 버튼입니다!

다음은 "시뮬레이션 루프"입니다. 33ms마다 다시 계산하고 다시 칠합니다. 재미있으면 "게임 루프"라고 부를 수 있습니다. 루프를 구현하기 위해 작동할 수 있는 가장 간단한 것은 setTimeout() 이며 이는 내 목적을 달성했습니다. 대안은 requestAnimationFrame()일 수 있습니다.

sim.start() 는 33ms(초당 약 30프레임)마다 sim.step() 을 호출하여 작업을 시작합니다.

 // 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. 우리는 웹 워커를 사용하여 더 나은 인식 및 실제 성능을 위해 메인 스레드 밖으로 이동합니다.
2. trimDebris() 는 더 이상 관심이 없는(그리고 시각화를 축소하는) 파편을 제거합니다. 켜짐)
3. applyForces() 는 계산된 힘을 바디에 적용합니다. 켜짐)
   1. 작업자가 이미 사용 중이기 때문에 computeForces()를 건너뛴 경우 이전 힘을 재사용합니다. 이것은 정확도를 희생시키면서 인지된 성능(지터 제거)을 향상시킵니다.
   2. 메인 UI 스레드는 계산이 33ms보다 오래 걸리더라도 오래된 힘을 그릴 수 있습니다.
4. visualize() 은 바디 배열을 각 시각화 도우미에 전달하여 페인트합니다. 켜짐)

그리고 모든 일이 33ms 안에 일어납니다! 이 디자인을 개선할 수 있습니까? 네. 궁금하거나 제안 사항이 있으십니까? 아래 댓글을 확인하세요. 고급 현대식 디자인 및 구현을 찾고 있다면 오픈 소스 Matter.js를 확인하십시오.

폭발!

저는 이것을 만드는 것이 너무 즐거웠고 여러분과 공유하게 되어 기쁩니다. 점프 후 만나요!

1. 소개 - 이 페이지
2. 웹 작업자 - 여러 스레드에 액세스
3. WebAssembly - JavaScript 없이 브라우저 컴퓨팅
4. Rollup 및 Gulp - WebPack의 대안
5. Canvas - Canvas API 및 "sim 루프"로 그리기
6. WebVR - WebVR 및 Aframe용 Canvas 시각화 도우미 교체

엔터테인먼트는 (모바일과 같은) 가상 현실에서 콘텐츠를 주도할 것이지만 VR이 (모바일과 같은) 일반화되면 예상되는 소비자 및 생산성 경험(모바일과 같은)이 될 것입니다.

우리는 인간의 경험을 창조하는 데 더 많은 권한을 부여받았습니다. 디자이너와 개발자에게 이보다 더 흥미로운 시간은 없었습니다. 웹 페이지는 잊어버리세요 - 우리는 세상을 만들 것입니다.

우리의 여정은 겸손한 웹 작업자와 함께 시작되므로 WebVR 시리즈의 다음 부분을 계속 지켜봐 주십시오.