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

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

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

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

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

UXにとってVRの意味

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

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

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

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

購入者は価格に非常に敏感です

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

図2： 「右上？私はエンジニアではありませんが、パフォーマンスは私には良さそうです！」

ほこりを払っている場合 ビッグOスキル 、Big O表記は、アルゴリズムが操作しているデータのサイズに基づいて、アルゴリズムの動作がどのように「スケーリング」するかを測定することを忘れないでください。

私たちのコレクションは、シミュレーションのすべてのボディです。新しいボディを追加するということは、セット内の既存のすべてのボディに対して新しい2体重力計算を追加することを意味します。

私たちの内側のループは for (let i: i32 = 0; i i for (let j: i32 = i + 1; j log n, so n. // Calculate the force the bodies apply to one another stuff = stuff } }

n-bodyソリューションは、物理学/ゲームエンジンの世界に私たちを正しく導き、WebVRに必要な技術の探求にもつながります。

プロトタイプの場合、シミュレーションを作成したら、 2D視覚化 。

SQLデータベース設計のベストプラクティス

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

せっかちな場合は、プロジェクトの コード 。

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

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

• 使用します Webワーカー シミュレーションを独自のCPUスレッドに移動し、知覚および実際のパフォーマンスを向上させます。
• 使用します WebAssembly その新しいスレッドで高性能（C / C ++ / Rust / AssemblyScript /etc。）コンパイルされたコードでO（n²）アルゴリズムを実行します。
• 使用します キャンバス シミュレーションを2Dで視覚化します。
• 使用します ロールアップと一口 Webpackの軽量な代替品として。
• 最後に、 WebVR そして フレーム お使いの携帯電話のバーチャルリアリティを作成します。

コードに飛び込む前のナプキンアーキテクチャの裏側

おそらく職場でこれを読んでいるので、Canvasバージョンから始めます。

最初のいくつかの投稿では、既存のブラウザAPIを使用して、ユーザーエクスペリエンスを低下させることなくCPUを集中的に使用するシミュレーションを作成するために必要なコンピューティングリソースにアクセスします。

@media screen and（max-width：

次に、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 x y z m 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() sim.step()を呼び出してアクションを開始します33msごと（毎秒約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. Rollup andGulp-WebPackの代替
5. Canvas-CanvasAPIと「simloop」への描画
6. WebVR-CanvasビジュアライザーをWebVRとAframeに交換

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

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

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

基本を理解する

VRはどのように機能しますか？

VRは、人が画面を顔に固定したときに発生し、実際にそこにいるふりをする「偽りの」許可を与える没入型の体験を生み出します。

WebベースのVRとは何ですか？

WebベースのVRは、広告、SEOランキング、キャットミーム（通称「Web」）の奇妙な現実を使用して、人間の精神により魅力的な仮想現実を提供しますが、厳格な「情報」の外側には、本のパラダイムのページがあります。 WebVRはVRコモンズです。

どのブラウザがVRをサポートしていますか？

スキューバギアなしのスキューバダイビングは、溺死またはシュノーケリングと呼ばれます。スキューバと同様に、VRも「ギアスポーツ」であり、すべてのギアがWebVRをサポートしています。 Ludditesは、高品質のワイヤレスVRヘッドセット（400ドル）を購入する前に、1500ドルのデスクトップまたは700ドルの携帯電話で最新のWebブラウザーを使用して「2Dシュノーケル」VRを行うことができます。

エッジコンピューティングとはどういう意味ですか？

「エッジコンピューティング」は、新しいデバイスをレンタルする前に、アプリを実行しているすべてのエッジデバイスのコンピューティング能力を利用しています。