WebVRパート5：設計と実装

公開: 2022-03-11

プロジェクトを「完了」させるのが大好きです。私たちは旅の終わりに到達しました-そしてWebVRでの天体重力シミュレーションの誕生です。

この最後の投稿では、高性能シミュレーションコード（第1、2、3条）をキャンバスビジュアライザー（第4条）に基づくWebVRビジュアライザーにプラグインします。

「n体問題」のイントロとアーキテクチャ
Webワーカーは、追加のブラウザースレッドを取得します
O（n²）パフォーマンスボトルネックコード用のWebAssemblyとAssemblyScript
キャンバスデータの視覚化
WebVRデータの視覚化

これは長い記事なので、前に説明した技術的な詳細はスキップします。オリエンテーションが必要な場合は、以前の投稿を確認するか、危険な状態で読んでください。

私たちは、シングルスレッドのJavaScriptランタイムからマルチスレッド（Webワーカー）の高性能ランタイム（WebAssembly）へのブラウザーのパラダイムシフトを調査してきました。これらのパフォーマンスデスクトップコンピューティング機能は、プログレッシブWebアプリとSaaS配布モデルで利用できます。

VRは、エンゲージメント（視線追跡とインタラクション）を伝達、説得、測定するための魅力的な気晴らしのない販売およびマーケティング環境を作成します。データは引き続き0と1になりますが、期待されるエグゼクティブサマリーとコンシューマーエクスペリエンスはWebVRになります。これは、今日のフラットWeb用のモバイルダッシュボードエクスペリエンスを構築するのと同じです。

これらのテクノロジーは、分散ブラウザーエッジコンピューティングも可能にします。たとえば、シミュレーションで数百万の星に対してWebAssembly計算を実行するWebベースのアプリケーションを作成できます。もう1つの例は、自分の作品を編集しているときに他のユーザーの作品をレンダリングするアニメーションアプリケーションです。

エンターテインメントコンテンツは、モバイルで主導されるエンターテインメントと同じように、バーチャルリアリティの普及をリードしています。ただし、VRが正常になると（今日のモバイルファーストデザインのように）、期待されるエクスペリエンスになります（VRファーストデザイン）。これは、デザイナーと開発者にとって非常にエキサイティングな時期です。VRは、まったく異なるデザインパラダイムです。

あなたが握ることができないならば、あなたはVRデザイナーではありません。それは大胆な発言であり、今日はVRデザインの詳細です。あなたがこれを読んでいるときに、この分野は発明されています。私の目的は、ソフトウェアと映画での私の経験を共有して、「VRファーストデザイン」の会話を盛り上げることです。私たちは皆、お互いから学びます。

これらの壮大な予測を念頭に置いて、私はこのプロジェクトをプロの技術デモとして完成させたかったのです。WebVRはそのための素晴らしい選択です！

WebVRとGoogleA-Frame

WebVR gitリポジトリは、いくつかの理由でキャンバスバージョンのフォークです。これにより、Githubページでのプロジェクトのホスティングが容易になり、WebVRには、キャンバスバージョンとこれらの記事を乱雑にするいくつかの変更が必要でした。

アーキテクチャに関する最初の投稿を覚えているなら、シミュレーション全体をnBodySimulatorに委任しました。

Webワーカーの投稿によると、 nBodySimulatorにはシミュレーションの33ミリ秒ごとに呼び出されるstep()関数があります。 step()はcalculateForces()を呼び出してO（n²）WebAssemblyシミュレーションコード（記事3）を実行し、位置を更新して再描画します。キャンバスの視覚化を作成する前回の投稿では、この基本クラスから始めて、canvas要素を使用してこれを実装しました。

 /** * 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と統合したいと考えています。シミュレーションに加える調整はすべて、関数paint(bodies)のメインUIスレッドで33ミリ秒ごとに行われます。

これが「完了」の測定方法です。私は興奮しています-仕事に取り掛かりましょう！

バーチャルリアリティを作る方法

まず、設計が必要です。

VRは何でできていますか？
WebVRデザインはどのように表現されていますか？
どうすればそれと対話できますか？

バーチャルリアリティは時間の夜明けに戻ります。すべてのキャンプファイヤーの物語は、些細な詳細によって紙に書かれた風変わりな誇張の小さな仮想世界です。

3D立体映像と音声を追加することで、キャンプファイヤーのストーリーを10倍にすることができます。私の映画製作予算のインストラクターは、 「私たちはポスターの代金を払っているだけです。 私たちは現実を構築していません。」

ブラウザのDOMに精通している場合は、それがツリーのような階層構造を作成することをご存知でしょう。

Webのデザインには、「正面」から見ている視聴者が含まれています。側面から見ると、DOM要素が線として表示され、背面から見ると、子が隠されているため、 <body>タグが表示されます。

VRの没入型体験の一部は、ユーザーが自分の視点、スタイル、ペース、インタラクションの順序を制御できるようにすることです。特に注意を払う必要はありません。プログラムでカメラを動かしたり回転させたりすると、文字通りVR酔いから吐き出されます。

VR酔いは冗談ではないことに注意してください。私たちの目と内耳の両方が動きを検出します。直立して歩く動物にとっては非常に重要です。これらのモーションセンサーが一致しない場合、私たちの脳は自然に私たちの口が再びナンセンスを食べていると想定して嘔吐します。私たちはかつて子供でした。 VRにおけるこの生存本能についてはすでに多くのことが書かれています。「EpicFun」のタイトルはSteamで無料で、ジェットコースターは私が見つけた中で最高のVR酔いのデモです。

バーチャルリアリティは「シーングラフ」として表現されます。シーングラフには、説得力のある3D環境の詳細と複雑さを隠すために、DOMと同じツリーのようなパターンがあります。ただし、スクロールしてルーティングする代わりに、エクスペリエンスを引き寄せたい場所にビューアを配置します。

GoogleのA-FrameWebVRFrameworkのHelloWorldシーングラフは次のとおりです。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, WebVR! • A-Frame</title> <meta name="description" content="Hello, WebVR! • A-Frame"> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> </head> <body> <a-scene background="color: #FAFAFA"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> </body> </html>

このHTMLドキュメントは、ブラウザにDOMを作成します。 <a-*>タグはA-Frameフレームワークの一部であり、 <a-scene>はシーングラフのルートです。ここでは、シーンに4つの3Dプリミティブが表示されています。

まず、フラットWebブラウザからシーンを表示していることに注意してください。右下の小さなマスクは、ユーザーを3D立体視モードに切り替えるように促します。

理論的には、次のことができるはずです。

お使いの携帯電話でこれを開きます
スマートフォンを顔にかざします
新しい現実の素晴らしさを楽しんでください！

VRヘッドセットの派手なレンズなしでそれが機能するようになったことがありません。 Androidフォン用のVRヘッドセットは安価（Google Cardboardベースの基本デバイス）で入手できますが、コンテンツの開発には、Oculus QuestなどのスタンドアロンHMD（ヘッドマウントディスプレイ）をお勧めします。

スキューバダイビングやスカイダイビングと同じように、バーチャルリアリティはギアスポーツです。

VRデザイナーの学習「崖」

A-FrameHelloWorldシーンにはデフォルトの照明とカメラがあることに注意してください。

立方体の面はさまざまな色です-立方体はセルフシャドウイングです。
立方体が平面に影を落としています-指向性ライトがあります。
立方体と平面の間に隙間はありません-これは重力のある世界です。

これらは、視聴者に「リラックスしてください、あなたの顔のこのことは完全に正常です」と言う重要な手がかりです。

また、このデフォルト設定は、上記のHelloWorldシーンのコードに暗黙的に含まれていることに注意してください。 A-Frameは賢明なデフォルトを提供しますが、注意してください-カメラと照明は、VRを作成するためにフラットウェブデザイナーが交差しなければならない溝です。

デフォルトの照明設定を当然のことと考えています。たとえば、ボタン：

この暗黙の照明がデザインと写真にどれほど浸透しているかに注目してください。「フラットなデザイン」ボタンでさえ、ウェブのデフォルトの照明から逃れることはできませんでした。それは、影を右下に投げています。

照明とカメラのセットアップの設計、通信、および実装は、WebVR設計者の学習の崖です。 「LanguageofFilm」は、さまざまなカメラと照明のセットアップとして表現された文化的規範のコレクションであり、観客に物語を感情的に伝えます。シーンの周りでライトとカメラを設計/移動する映画の専門家は、グリップ部門です。

バーチャルリアリティに戻る

それでは、仕事に戻りましょう。私たちの天体のWebVRシーンにも同様のパターンがあります。

 <!DOCTYPE> <html> <head> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script> <script src="main.js"></script> </head> <body> <a-scene> <a-sky color="#222"></a-sky> <a-entity geometry="primitive: circle; radius: 12" position="0 0 -.5" material="color: #333; transparent: true; opacity: 0.5"> <a-sphere color="black" radius=."02"></a-sphere> </a-entity> <a-entity></a-entity> <a-entity geometry="primitive: plane; width: 2; height: auto" position="0 -10 .3" rotation="55 0 0" material="color: blue" text="value: Welcome Astronaut!..."> </a-entity> <a-entity position="0 -12 .7" rotation="55 0 0"> <a-camera> <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor> </a-camera> </a-entity> </a-scene> </body> </html>

このHTMLドキュメントは、A-Frameフレームワークとインタラクションプラグインをロードします。私たちのシーンは<a-scene>から始まります。

内部では、 <a-sky color="#222"></a-sky>要素から始めて、シーンで定義していないものすべてを背景色にします。

次に、私たちは、視聴者が私たちの奇妙で未知の世界を飛ぶときに「つかむ」ための「軌道面」を作成します。これをディスクと（0,0,0）の小さな黒い球として作成します。これがなければ、向きを変えることは私にとって「根拠のない」と感じました。

 <a-entity geometry="primitive: circle; radius: 12" position="0 0 -.5" material="color: #333; transparent: true; opacity: 0.5"> <a-sphere color="black" radius=."02"></a-sphere> </a-entity>

次に、A-Frameエンティティを追加/削除/再配置できるコレクションを定義します。

 <a-entity></a-entity>

これは、 nBodyVisualizerのpaint(bodies)がその作業を行うためのクリアリングです。

次に、視聴者とこの世界の関係を作成します。技術デモとして、この世界の目的は、視聴者がWebVRとそれを可能にするブラウザ技術を探求できるようにすることです。シンプルな「宇宙飛行士」の物語は遊び心を生み出し、この恒星の道標はナビゲーションのもう1つの基準点です。

 <a-entity geometry="primitive: plane; width: 2; height: auto" position="0 -10 .3" rotation="55 0 0" material="color: blue" text="value: Welcome Astronaut!\n ..."> </a-entity>

これでシーングラフは完成です。最後に、私はユーザーとこのとげのある世界との間の電話デモでのある種の相互作用を望んでいました。 VRで「破片を投げる」ボタンをどのように再現できますか？

ボタンはすべてのモダンなデザインの主要な要素です-VRボタンはどこにありますか？

WebVRでの相互作用

バーチャルリアリティには、独自の「上」と「下」があります。視聴者の最初のインタラクションは、アバターまたはカメラを介して行われます。これは、ズームするためのすべてのコントロールです。

デスクトップでこれを読んでいる場合は、WASDで移動し、マウスでカメラを回転させることができます。この調査は情報を明らかにしますが、あなたの意志を表現するものではありません。

Real Realityには、Webにはあまり見られない非常に重要な機能がいくつかあります。

遠近法-オブジェクトは、私たちから離れるにつれて目に見えて小さくなります。
オクルージョン-オブジェクトは、位置に基づいて非表示および表示されます。

VRはこれらの機能をシミュレートして、3D効果を作成します。また、VRで情報やインターフェースを明らかにしたり、インタラクションを提示する前に気分を設定したりするためにも使用できます。ほとんどの人は、先に進む前に、体験を楽しむのに1分しかかからないことがわかりました。

WebVRでは、3D空間で対話します。このための2つの基本的なツールがあります。

衝突-2つのオブジェクトが同じスペースを共有するときに発生するパッシブ3Dイベント。
投影-線と交差するすべてのオブジェクトを一覧表示するアクティブな2D関数呼び出し。

衝突は最も「VRのような」相互作用です

VRでは、「衝突」はまさにそのように聞こえます。2つのオブジェクトが同じスペースを共有する場合、A-Frameはイベントを作成します。

ユーザーがボタンを「押す」には、ポーンとボタンを押すための何かをユーザーに与える必要があります。

残念ながら、WebVRはまだコントローラーを想定できません。多くの人がデスクトップや電話でフラットウェブバージョンを見て、多くの人がGoogleCardboardやSamsungのGearVRなどのヘッドセットを使用して立体視バージョンを表示します。

ユーザーがコントローラーを持っていない場合、ユーザーは物事に手を伸ばして「触れる」ことができないため、衝突はユーザーの「パーソナルスペース」との衝突である必要があります。

プレイヤーに宇宙飛行士の形をしたポーンを動かして移動させることもできますが、ユーザーを惑星の渦巻くミアズマに強制することは、少し不快であり、私たちのデザインの広さに反しているようです。

投影は2Dの「Webのような」3D空間でのクリック

「衝突」のほかに、「投影」も使用できます。シーン全体に線を投影して、それが何に触れるかを確認できます。最も一般的な例は「テレポートレイ」です。

テレポート光線は、プレイヤーが移動できる場所を示すために、世界の線をトレースします。この「投影」は着陸する場所を探します。投影のパスにある1つ以上のオブジェクトを返します。テレポートレイの例を次に示します。

光線が実際には下向きの放物線として実装されていることに注意してください。これは、投げられたオブジェクトのように「地面」と自然に交差することを意味します。これは当然、最大テレポーテーション距離を設定します。制限は、VRで最も重要な設計上の選択です。幸いなことに、現実には多くの自然な制限があります。

投影は3Dの世界を2Dに「平坦化」するので、マウスのように物を指してクリックすることができます。ファーストパーソンシューティングゲームは、非常に苛立たしいボタンを「2Dクリック」する精巧なゲームです。多くの場合、これらのくそったボタンがあなたを「クリック」して戻ってこない理由を説明する精巧なストーリーがあります。

銃は正確で信頼性の高い3Dマウスとして完成されているため、VRには非常に多くの銃があります。クリックは、消費者が学習せずに行う方法を知っていることです。

プロジェクションは、シーンとの関係において距離の安全性も提供します。 VRで何かに近づくと、重要性がまだ明らかにされていない可能性のある他のすべてのものが自然に遮られることを忘れないでください。

「視線」を使用したコントローラーなしの投影

コントローラを使用せずにWebVRでこのインタラクションプリミティブを作成するために、視聴者の「視線」を視線の「カーソル」として投影できます。このカーソルをプログラムで使用して、「ヒューズ」を使用してオブジェクトを操作できます。これは、小さな青い円として視聴者に伝えられます。今クリックしています！

キャンプファイヤーの話を覚えているなら、嘘が大きければ大きいほど、それを売るのに必要な詳細は少なくなります。明白でばかげた「視線」の相互作用は、太陽を見つめることです。この「凝視」を使用して、シミュレーションに新しい「破片」惑星を追加します。この選択に疑問を呈した視聴者はいません。VRはばかげていると非常に魅力的です。

A-Frameでは、カメラ（プレーヤーの見えないポーン）とこの視線の「カーソル」をカメラのリギングとして表現します。 <a-camera>内に<a-cursor>を配置すると、カメラの変換もカーソルに適用されます。プレーヤーがポーンを移動/回転させると（ a-camera ）、視線も移動/回転します（ a-cursor ）。

 // src/index.html <a-entity position="0 -12 .7" rotation="55 0 0"> <a-camera> <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor> </a-camera> </a-entity>

カーソルの「ヒューズ」は、「凝視」の1秒が経過するまで待機してから、イベントを発行します。

デフォルトの照明を使用したので、太陽の「後ろ」が消灯していることに気付くかもしれません。私は軌道面の外に出ていませんが、それが太陽の働きだとは思いません。ただし、これは現実の技術デモポスターでは機能します。

別のオプションは、照明をカメラ要素内に配置して、ユーザーと一緒に移動するようにすることです。これにより、より親密な、そしておそらく不気味な小惑星採掘者の体験が生まれます。これらは楽しいデザインの選択です。

統合計画があります

これで、A-Frame <a-scene>とJavaScriptシミュレーションの統合ポイントができました。

A-Frame <a-scene> ：

ボディの名前付きコレクション： <a-entity></a-entity>
投影イベントを発行するカーソル： <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor>

JavaScriptシミュレーション：

nBodyVisWebVR.paint(bodies) -シミュレーションボディからVRエンティティを追加/削除/再配置します
addBodyArgs(name, color, x, y, z, mass, vX, vY, vZ)を使用して、シミュレーションに新しいデブリボディを追加します

index.htmlはmain.jsをロードします。これは、キャンバスバージョンと同じようにシミュレーションを初期化します。

 // src/main.js import { nBodyVisualizer, nBodyVisWebVR } from ."/nBodyVisualizer" import { Body, nBodySimulator } from ."/nBodySimulator" window.onload = function() { // Create a Simulation const sim = new nBodySimulator() // this Visualizer manages the UI sim.addVisualization(new nBodyVisWebVR(document.getElementById("a-bodies"), sim)) // making up stable universes is hard // name color xyzm vz vy vz sim.addBody(new Body("star", "yellow", 0, 0, 1, 1e9)) sim.addBody(new Body("hot-jupiter", "red", -1, -1, 1, 1e4, .24, -0.05, 0)) sim.addBody(new Body("cold-jupiter", "purple", 4, 4, .5, 1e4, -.07, 0.04, 0)) // Start simulation sim.start() // Add another sim.addBody(new Body("saturn", "blue", -8, -8, .1, 1e3, .07, -.035, 0)) }

ここで、ビジュアライザーのhtmlElementをa-bodiesコレクションに設定してボディを保持していることに気付くでしょう。

JavaScriptからAフレームオブジェクトをプログラムで管理する

index.htmlでシーンを宣言したら、ビジュアライザーをコーディングする準備が整いました。

まず、 nBodyVisualizerを設定して、 nBodySimulation本体リストから読み取り、 <a-entity></a-entity>コレクション内のA-Frameオブジェクトを作成/更新/削除します。

 // src/nBodyVisualizer.js /** * This is the WebVR visualizer. * It's responsible for painting and setting up the entire scene. */ export class nBodyVisWebVR extends nBodyVisualizer { constructor(htmlElement, sim) { // HTML Element is a-collection#a-bodies. super(htmlElement) // We add these to the global namespace because // this isn't the core problem we are trying to solve. window.sim = sim this.nextId = 0 } resize() {}

コンストラクターでは、A-Frameコレクションを保存し、シミュレーションを見つけるためにgazeイベントのグローバル変数を設定し、シミュレーションとA-Frameのシーンの間でボディを照合するために使用するidカウンターを初期化します。

 paint(bodies) { let i // Create lookup table: lookup[body.aframeId] = body const lookup = bodies.reduce( (total, body) => { // If new body, give it an aframeId if (!body.aframeId) body.aframeId = `a-sim-body-${body.name}-${this.nextId++}` total[body.aframeId] = body return total }, {}) // Loop through existing a-sim-bodies and remove any that are not in // the lookup - this is our dropped debris const aSimBodies = document.querySelectorAll(."a-sim-body") for (i = 0; i < aSimBodies.length; i++) { if (!lookup[aSimBodies[i].id]) { // if we don't find the scene's a-body in the lookup table of Body()s, // remove the a-body from the scene aSimBodies[i].parentNode.removeChild(aSimBodies[i]); } } // loop through sim bodies and upsert let aBody bodies.forEach( body => { // Find the html element for this aframeId aBody = document.getElementById(body.aframeId) // If html element not found, make one. if (!aBody) { this.htmlElement.innerHTML += ` <a-sphere class="a-sim-body" dynamic-body ${ (body.name === "star") ? "debris-listener event-set__enter='_event: mouseenter; color: green' event-set__leave='_event: mouseleave; color: yellow'" : ""} position="0 0 0" radius="${body.drawSize/this.scaleSize}" color="${body.color}"> </a-sphere>` aBody = document.getElementById(body.aframeId) } // reposition aBody.object3D.position.set(body.x, body.y, body.z) }) }

まず、シミュレーションボディをループして、Aフレームエンティティをシミュレーションボディに一致させるためのルックアップテーブルにラベルを付けたり、ルックアップテーブルを作成したりします。

次に、既存のA-Frameボディをループして、範囲外に移動するためにシミュレーションによってトリミングされたものをすべて削除します。これにより、エクスペリエンスの知覚パフォーマンスが向上します。

最後に、simボディをループして、欠落しているボディ用の新しい<a-sphere>を作成し、 aBody.object3D.position.set(body.x, body.y, body.z)を使用して他のボディを再配置します。

標準のDOM関数を使用して、Aフレームシーンの要素をプログラムで変更できます。シーンに要素を追加するには、コンテナのinnerHTMLに文字列を追加します。このコードは私には奇妙な味がしますが、機能し、これ以上良いものは見つかりませんでした。

追加する文字列を作成すると、「star」の近くに属性を設定するための三項演算子があります。

 <a-sphere class="a-sim-body" dynamic-body ${ (body.name === "star") ? "debris-listener event-set__enter='_event: mouseenter; color: green' event-set__leave='_event: mouseleave; color: yellow'" : ""} position="0 0 0" radius="${body.drawSize/this.scaleSize}" color="${body.color}"> </a-sphere>`

ボディが「スター」の場合、そのイベントを説明するいくつかの属性を追加します。 DOMにマウントされたときの星の外観は次のとおりです。

 <a-sphere class="a-sim-body" dynamic-body="" debris-listener="" event-set__enter="_event: mouseenter; color: green" event-set__leave="_event: mouseleave; color: yellow" position="0 0 0" radius="0.36" color="yellow" material="" geometry=""></a-sphere>

debris-listener 、 event-set__enter 、 event-set__leave -set__leaveの3つの属性は、相互作用を設定し、統合の最後のラップです。

Aフレームのイベントと相互作用の定義

エンティティの属性でNPMパッケージ「aframe-event-set-component」を使用して、視聴者が太陽を「見る」ときに太陽の色を変更します。

この「視線」は、視聴者の位置と回転からの投影であり、相互作用は、視線が何かをしているという必要なフィードバックを提供します。

スタースフィアには、プラグインによって有効化された2つの短縮イベント、 event-set__enterとevent-set__leaveあります。

 <a-sphere ... event-set__enter="_event: mouseenter; color: green" event-set__leave="_event: mouseleave; color: yellow" … ></a-sphere>

次に、カスタムAフレームコンポーネントとして実装するdebris-listenerで星球を装飾します。

 <a-sphere ... debris-listener="" … ></a-sphere>

A-Frameコンポーネントは、グローバルレベルで定義されます。

 // src/nBodyVisualizer.js // Component to add new bodies when the user stares at the sun. See HTML AFRAME.registerComponent('debris-listener', { init: function () { // Helper function function rando(scale) { return (Math.random()-.5) * scale } // Add 10 new bodies this.el.addEventListener('click', function (evt) { for (let x=0; x<10; x++) { // name, color, x, y, z, mass, vx, vy, vz window.sim.addBodyArgs("debris", "white", rando(10), rando(10), rando(10), 1, rando(.1), rando(.1), rando(.1)) } }) } })

このA-Frameコンポーネントは、注視カーソルによってトリガーされ、シーンに10個の新しいランダムボディを追加できる「クリック」リスナーのように機能します。

要約する：

標準のHTMLでA-Frameを使用してWebVRシーンを宣言します。
JavaScriptからシーン内のA-Frameエンティティをプログラムで追加/削除/更新できます。
A-Frameプラグインとコンポーネントを介して、JavaScriptでイベントハンドラーとの相互作用を作成できます。

WebVR：Veni、Vidi、Vici

この技術デモから私と同じくらい多くのことを学んだことを願っています。これらの機能（WebワーカーとWebAssembly）をWebVRに適用した場合、ブラウザーのエッジコンピューティングにも適用できます。

巨大なテクノロジーの波が到来しました-バーチャルリアリティ（VR）。スマートフォンを初めて持ったときに感じたものが何であれ、初めてVRを体験すると、コンピューティングのあらゆる側面で10倍の感情的な体験が得られます。最初のiPhoneからわずか12年です。

VRはずっと前から存在していましたが、VRを平均的なユーザーに提供するために必要なテクノロジーは、PC革命ではなく、モバイル革命とFacebookのOculusQuestを介して登場しました。

インターネットとオープンソースは、人類の世界最大の驚異の1つです。フラットなインターネットを作成したすべての人々に-私はあなたの勇気と冒険の感覚に乾杯します。

マニフェスト！私たちは創造する力を持っているので、私たちは世界を構築します。