WebVRとブラウザエッジコンピューティング革命

公開: 2022-03-11

巨大なテクノロジーの波が到来しました-バーチャルリアリティ（VR）。 スマートフォンを初めて持ったときに感じたものが何であれ、VRを初めて体験することで、コンピューティングのあらゆる側面でより実質的な感情的な体験がもたらされます。 最初のiPhoneからわずか12年です。 コンセプトとして、VRはさらに長く存在しますが、VRを平均的なユーザーに提供するために必要なテクノロジーは、最近まで利用できませんでした。

Oculus Questは、FacebookのVR向けコンシューマーゲームプラットフォームです。 その主な特徴は、PCを必要としないことです。 ワイヤレスのモバイルVR体験を提供します。 コーヒーショップで誰かにVRヘッドセットを渡して、会話で何かをググるのとほぼ同じ厄介な3Dモデルを共有することができますが、共有された体験の見返りははるかに説得力があります。

VRは、私たちの仕事、買い物、コンテンツの楽しみ方などを変えます。

このシリーズでは、WebVRとブラウザーエッジコンピューティングを可能にする現在のブラウザーテクノロジーについて説明します。 この最初の投稿では、これらのテクノロジーとシミュレーションのアーキテクチャに焦点を当てています。

次の記事では、コードにおけるいくつかの固有の課題と機会に焦点を当てます。 この技術を探求するために、CanvasとWebVRのデモを作成し、GitHubでコードを公開しました。

ALT_TEXT
詳細については、Canvasデモ、WebVRデモ、およびサンプルコードを参照してください。

VRがUXにとって何を意味するか

Toptal Developerとして、私は企業がプロジェクトをアイデアからユーザーとのベータテストに移すのを支援します。 では、VRはビジネスWebアプリケーションとどのように関連していますか？

エンターテインメントコンテンツは、（モバイルで行ったように）バーチャルリアリティの普及をリードします。 ただし、VRがモバイルのように主流になると、「VRファーストデザイン」が期待されるエクスペリエンスになります（「モバイルファースト」と同様）。

「モバイルファースト」はパラダイムシフトであり、「オフラインファースト」は現在のパラダイムシフトであり、「VRファースト」は間近に迫っています。 VRはまったく異なる設計パラダイムであるため、これは設計者および開発者にとって非常にエキサイティングな時期です（これについては、シリーズの最後の記事で説明します）。 あなたが握ることができないならば、あなたはVRデザイナーではありません。

VRはパーソナルコンピューティング（PC）革命で始まりましたが、モバイル革命の次のステップとして登場しています。 FacebookのOculusQuestは、QualcommのSnapdragon 835システムオンチップ（SoC）、ヘッドセットトラッキング（モバイルカメラを採用）を使用してGoogle Cardboard上に構築され、Android上で実行されます。これらはすべて、顔の柔らかい感覚器官に快適にマウントできるようにパッケージ化されています。

400ドルのOculusQuestには、友達と共有できる素晴らしい体験があります。 新しい1,000ドルのiPhoneはもう誰にも感銘を与えません。 人類はVRフックを吐き出すつもりはありません。

VR業界のアプリケーション

VRは、コンピューティングの多くの業界や分野でその存在感を示し始めています。 多くの報道を得る傾向があるコンテンツの消費とゲームを除いて、VRは建築からヘルスケアに至るまでゆっくりと変化している業界です。

  • 建築と不動産は（デジタルと比較して）並外れたコストで物理的な現実の価値を生み出すので、建築家や不動産業者が仮想現実を通してクライアントに体験を見せることは当然のことです。 VRは、2億ドルのスタジアムの「ベータテスト」、または電話による仮想ウォークスルーを提供します。
  • VRでの学習と教育は、画像やビデオでは再現できない体験を伝えます。
  • 自動車会社は、設計と安全性からトレーニングとマーケティングまで、VRの恩恵を受けています。
  • スタンフォード大学のLucilePackardChildren's Hospitalの医療専門家は、VRを使用して心臓手術を計画し、1回の切開を行う前に患者の解剖学的構造を理解できるようにしています。 VRはまた、痛みを和らげるために医薬品に取って代わりつつあります。
  • 小売、マーケティング、ホスピタリティは、すでに製品や場所のバーチャルツアーを提供しています。 小売業者が自分たちのショッピング体験がいかに魅力的であるかを理解し始めると、小売イノベーターは最終的な釘を実店舗のショッピング棺に入れます。

技術が進歩するにつれて、さまざまな業界で採用が増えるでしょう。 ここで問題となるのは、このシフトがどれだけ早く発生し、どの業界が最も影響を受けるかということです。

WebおよびエッジコンピューティングにとってVRが意味するもの

「エッジコンピューティング」は、コンピューティングをメインのアプリケーションサーバークラスターからエンドユーザーに近づけます。 ホスティング会社はすべての都市で低遅延サーバーをレンタルするのを待つことができないため、マーケティングの話題があります。

B2Cエッジコンピューティングの例は、GoogleのStadiaサービスです。このサービスは、GoogleのサーバーでCPU / GPUを多用するゲームワークロードを実行し、ゲームをNetflixなどのデバイスに送信します。 ばかげたNetflixChromebookなら、突然ハイエンドのゲーミングコンピュータのようなゲームをプレイできます。 これにより、緊密に統合されたモノリシックマルチプレイヤーゲームの新しいアーキテクチャオプションも作成されます。

B2Bエッジコンピューティングの例は、NvidiaのGRIDです。これは、NvidiaGPU対応の仮想リモートワークステーションを安価なNetflixクラスのデバイスに提供します。

質問：エッジコンピューティングをデータセンターからブラウザに移してみませんか？

ブラウザエッジコンピューティングの使用例は、1日のプロセスを数千台のコンピュータが数分で処理できるチャンクに分割することにより、3Dムービーをレンダリングするコンピュータの「アニメーションレンダーファーム」です。

ElectronやNW.jsなどのテクノロジーは、デスクトップアプリケーションにWebプログラミングをもたらしました。 新しいブラウザテクノロジ（PWAなど）により、Webアプリケーション配布モデル（SaaSは配布に関するもの）がデスクトップコンピューティングに戻ってきています。 例としては、SETI @ Home、Folding @ Home（タンパク質フォールディング）、またはさまざまなレンダーファームなどのプロジェクトがあります。 インストーラーをダウンロードする代わりに、Webサイトにアクセスするだけでコンピューティングファームに参加できるようになりました。

質問： WebVRは「本物」ですか、それともVRコンテンツは「アプリストア」や壁に囲まれた庭に押し込められますか？

Toptalのフリーランサー兼技術者として、知るのが私の仕事です。 そこで、私は自分の質問に答えるために技術プロトタイプを作成しました。 私が見つけた答えは非常にエキサイティングです、そして私はあなたとそれらを共有するためにこのブログシリーズを書きました。

ネタバレ：はい、WebVRは本物です。 そして、はい、ブラウザエッジコンピューティングは同じAPIを使用して、WebVRを可能にする計算能力にアクセスできます。

書くのがとても楽しい！ 概念実証を構築しましょう

これをテストするために、n体問題の天体物理シミュレーションを行います。

Astronavigatorsは、方程式を使用して2つのオブジェクト間の重力を計算できます。 ただし、3つ以上の物体を持つシステムの方程式はありません。これは、既知の宇宙のすべてのシステムにとって不便です。 化学！

多体問題には分析解（方程式）はありませんが、O（n²）である計算解（アルゴリズム）はあります。 O（n²）はほとんど最悪のケースですが、それは私たちが望むものを取得する方法であり、そもそもBigO表記法が発明された理由の一種です。

O（n²）パフォーマンス

図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ビジュアライゼーションを作成します。

最後に、CanvasビジュアライゼーションをWebVRバージョンに交換します。

せっかちな場合は、プロジェクトのコードに直接ジャンプできます。

Webワーカー、WebAssembly、AssemblyScript、Canvas、Rollup、WebVR、Aframe

最新のモバイルブラウザ（Safariではなく申し訳ありません）にすでに登場している新しいテクノロジーのクラスターを介して、アクション満載で楽しいものに身を任せてください。

  • Webワーカーを使用して、シミュレーションを独自の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体シミュレーションは、重力を使用して天体の位置を予測します。 方程式を使用して2つのオブジェクト間の正確な力を計算できますが、3つ以上のオブジェクト間の力を計算するには、シミュレーションを小さな時間セグメントに分割して反復する必要があります。 私たちの目標は、30フレーム/秒（映画の速度）または約33ミリ秒/フレームです。

方向性を理解するために、コードの概要を次に示します。

  1. ブラウザGETのindex.html
  2. 以下のコードとしてmain.jsを実行します。 importは、Webpackの代わりにRollupで処理されます。
  3. これにより、新しいnBodySimulator（）が作成されます
  4. 外部APIがあります：
    1. sim.addVisualization（）
    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))) } }) }

2つの小惑星は質量がゼロであるため、重力の影響を受けません。 彼らは私たちの2D視覚化を少なくとも30x30にズームアウトし続けます。 コードの最後のビットは、いくつかのとげのある楽しみのために10個の小さな内惑星を追加するための「騒乱」ボタンです！

次は「シミュレーションループ」です。33msごとに、再計算して再ペイントします。 楽しんでいるなら、それを「ゲームループ」と呼ぶことができます。 ループを実装するために機能する可能性のある最も単純なものはsetTimeout()であり、これで私の目的は達成されました。 別の方法として、requestAnimationFrame（）を使用できます。

sim.start()は、33ミリ秒ごとにsim.step sim.step()を呼び出すことによってアクションを開始します（毎秒約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に実装し、それらを別のWebWorkerスレッドで実行します。

nBodySimulatorは、その実装の複雑さをラップし、いくつかの部分に分割します。

  1. calculateForces()は、適用する力を計算することを約束します。
    1. これらは主に浮動小数点演算であり、WebAssemblyで実行されます。
    2. これらの計算はO（n²）とパフォーマンスのボトルネックです。
    3. Webワーカーを使用して、それらをメインスレッドから移動し、より適切に認識された実際のパフォーマンスを実現します。
  2. trimDebris()は、興味がなくなった（そして視覚化をズームアウトする）デブリを削除します。 オン）
  3. applyForces()は、計算された力をボディに適用します。 オン）
    1. ワーカーがすでにビジーであるためにcalculateForces（）をスキップした場合は、古いフォースを再利用します。 これにより、精度が犠牲になりますが、知覚されるパフォーマンスが向上します（ジッターが除去されます）。
    2. 計算に33ミリ秒以上かかる場合でも、メインUIスレッドは古い力をペイントできます。
  4. visualize()は、ボディの配列を各ビジュアライザーに渡してペイントします。 オン）

そしてそれはすべて33msで起こります！ このデザインを改善できますか？ はい。 興味がありますか、提案がありますか？ 以下のコメントを確認してください。 高度でモダンなデザインと実装をお探しの場合は、オープンソースのMatter.jsをご覧ください。

飛び立つ！

私はこれを作成するのがとても楽しかったです、そしてあなたとそれを共有することに興奮しています。 ジャンプしてお会いしましょう！

  1. イントロ-このページ
  2. Webワーカー-複数のスレッドにアクセスする
  3. WebAssembly-JavaScriptを使用しないブラウザコンピューティング
  4. RollupandGulp-WebPackの代替
  5. Canvas-CanvasAPIと「simループ」への描画
  6. WebVR-CanvasビジュアライザーをWebVRとAframeに交換

エンターテインメントはバーチャルリアリティ（モバイルなど）でコンテンツをリードしますが、VRが正常になると（モバイルなど）、消費者と生産性のエクスペリエンスが期待されます（モバイルなど）。

私たちは、人間の経験を生み出す力をこれまで以上に与えられたことはありません。 デザイナーや開発者になるのにこれほどエキサイティングな時期はありませんでした。 Webページを忘れてください-私たちは世界を構築します。

私たちの旅は謙虚なWebワーカーから始まりますので、WebVRシリーズの次のパートにご期待ください。