今日WebでVRを構築する方法

バーチャルリアリティは、2020年までに最大70億ドルの価値があるように設定されています。この期間、Webは間違いなく2D環境のみであり続けることはありません。実際、VRをブラウザに持ち込む簡単な方法はすでにいくつかあります。また、一緒に仕事をするのも非常に楽しいです

Virtual Webへの開発アドベンチャーを開始するには、これを行うには3つの潜在的な方法があります。

javascript、3.jsおよび監視デバイスの向き

• javascript、3.jsおよびwebvr
（私の新しい希望の方法！）
• cssおよびwebvr
（まだ非常に早い時期）
それぞれを調べて、それぞれがどのように機能するかについての短い要約を示します。

キーテイクアウト

Virtual Reality（VR）は、3つの主要な方法を使用してWeb開発に組み込むことができます。JavaScript、Three.js、および監視デバイスの向き。 JavaScript、3.jsおよびwebvr;およびcssおよびwebvr。

JavaScript、Three.jsおよびWatching Device Orientation Methodは、Deviceorientation Browserイベントを使用してデバイスの回転と傾きを検​​出します。これにより、VRコンテキストでは、カメラの調整が視聴者の視線に従うことができます。
• javascript、3.jsおよびwebvrは、Oculus RiftなどのVRヘッドセットオリエンテーションにアクセスするのに最適な実験方法です。 WebVR APIを使用して、VRデバイス情報へのアクセスを提供します。
現在開発の初期段階にあるCSSおよびWebVRメソッドは、CSS 3D変換をVRフルスクリーンモードと統合することを目指しています。
• WebのVRエクスペリエンスの作成は、VRテクノロジーの採用の重要なドライバーと見なされています。BorisSmusのWebVRボイラープレートは、WebのVRエクスペリエンスを構築しようとする開発者に最適な場所として推奨されます。 >
• javascript、3.jsおよび監視デバイスの向き
• ほとんどのブラウザに基づいた仮想現実プロジェクトが現在機能する方法の1つは、Deviceorientationブラウザイベントを介して行われます。これにより、ブラウザにデバイスがどのように方向付けられているかを示し、ブラウザが回転または傾斜している場合にブラウザがピックアップできるようにします。 VRの視点内でのこの機能により、誰かが周りを見回したときに検出し、カメラを調整して視線に従うことができます。
ブラウザ内で素晴らしい3Dシーンを実現するには、3Dシェイプとシーンを簡単に作成できるJavaScriptフレームワークであるThree.jsを使用します。 3Dエクスペリエンスをまとめることから、ほとんどの複雑さが必要であり、シーン内で組み立てようとしているものに集中できるようになります。
• ここにSitePointで2つのデモを書きました。
• Google段ボールと3.js
を使用してVRをWebに持ち込む
• 3.jsとノードを使用してVRのTwitterストリームを視覚化する

3.jsとシーンをまとめる方法が初めての場合は、上記の2つの記事を見て、この方法を詳細に紹介することをお勧めします。ここで重要な概念をカバーしますが、より高いレベルになります。

これらのそれぞれの重要なコンポーネントには、次のJavaScriptファイルが含まれます（上記の例からこれらのファイルを取得でき、3つの例でも見つけることができます。

• 3.min.js - 3つのフレームワーク
• DeviceorientationControls.js - これは、上記で説明したデバイスの向きを提供するThree.jsプラグインです。カメラを動かしてデバイスの動きを満たしています。
orbitcontrols.js - これは、デバイスの向きイベントにアクセスできるデバイスがない場合、代わりにマウスを使用してカメラを移動できるバックアップコントローラーです。
• stereoeffect.js - VRのように、各目の角度がわずかに異なる立体視の画像に画面を分割する3.js効果。これにより、複雑なことをする必要なく、実際のVRスプリット画面が作成されます。
• デバイスの向き
デバイスの向きコントロールを有効にするためのコードはそうです：

deviceorientationイベントリスナーは、互換性のあるデバイスを持っているときにアルファ、ベータ、ガンマ値を提供します。アルファ値がない場合、代わりに軌道コントロールを使用できるように、デバイスの向きを使用するようにコントロールを変更しません。 このアルファ値がある場合は、デバイス方向制御を作成し、制御するカメラ変数を提供します。また、ユーザーが画面をタップした場合、シーンをフルスクリーンに設定するように設定します（VRにいるときにブラウザのアドレスバーを見つめたくありません）。

軌道コントロール

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

そのアルファ値が存在せず、デバイスのデバイス方向イベントにアクセスしていない場合、この手法は代わりにマウスでドラッグしてカメラを動かすためのコントロールを提供します。これはそうです：

上記のコードから混乱している可能性のある主なことは、ノパンとノズームです。基本的に、私たちはマウスを介してシーンの周りに物理的に移動したくありませんし、ズームインまたはズームアウトすることができないようにしたくありません。

ステレオエフェクト

ステレオ効果を使用するために、次のように定義します。

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>

その後、ウィンドウのサイズを変更して、そのサイズを更新します。

各requestAnimationFrame内で、シーンを設定して効果をレンダリングします。

それは、VRを達成するデバイス方向のスタイルがどのように機能するかの基本です。 Google Cardboardを使用した素晴らしくシンプルな実装に効果的ですが、Oculus Riftではそれほど効果的ではありません。次のアプローチは、Riftの方がはるかに優れています

javascript、3.jsおよびwebvr

Oculus RiftのようなVRヘッドセットの向きにアクセスしたいですか？ WebVRは現時点でそれを行う方法です。 WebVRは、Oculus RiftやGoogle Cardboardなどの仮想現実デバイスの機能へのアクセスを提供する初期の実験的なJavaScript APIです。現時点では、Firefoxの夜間とモバイルクロムとクロムのいくつかの実験的なビルドで利用できます。心に留めておくべきことの1つは、スペックがまだドラフトにあり、変更される可能性があることです。そのため、試してみてください。 全体として、WebVR APIは以下を介してVRデバイス情報へのアクセスを提供します。

ここでは多くの技術的な詳細については説明しません（将来のSitePointの記事で詳細に説明します！）、WebVRエディターのドラフトをもっと知りたい場合は、これについて詳しく説明します！）。詳細に説明しない理由は、APIを実装するためのはるかに簡単な方法があるからです。

この前述の簡単な方法WebVR APIを実装する方法は、Boris SmusのWebVRボイラープレートを使用することです。 WebVRを実装し、さまざまなデバイスのエクスペリエンスを優雅に分解するベースライン機能を提供します。現在、私が見た中で最も素敵なWeb VR実装です。

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

WebのVRエクスペリエンスを構築したい場合、これは現在開始するのに最適な場所です！ この方法の使用を開始するには、githubでWebVRボイラープレートをダウンロードしてください。

index.htmlの編集とそのセットアップ内のすべてのファイルを使用することに焦点を当てることができます。または、特定のプラグインをゼロから独自のプロジェクトに実装できます。各実装の違いを比較したい場合は、VRのTwitterストリームの視覚化を3.jsとNodeの例で、VRのWebVR搭載のTwitterストリームに移行しました。

このプロジェクトをゼロから独自に含めるには、あなたが望むファイルは次のとおりです。

• 3.min.js - もちろん、3つのjsフレームワーク
• vrcontrols.js - Webvrを介したVRコントロール用の3.jsプラグイン（これはbower_components/threejs/examples/js/controls/vrcontrols.jsにあります）
• vreffect.js - oculus riftのシーンを表示するVR効果自体の3.jsプラグイン（これはbower_components/threejs/examples/js/effects/vreffect.js）
• webvr-polyfill.js - これは、まだ完全にはWebvrをサポートしていないブラウザのポリフィルです（これはgithubおよびbower_components/webvr-polyfill/build/build/build/polyfill.jsでもあります。 code）
• webvr-manager.js - これは、VRモードを入力および終了する方法を提供するなど、すべてを管理するボイラープレートコードの一部です（これはbuild/webvr-manager.jsにあります）

それを実装するには、デバイス方向方式からのいくつかの調整のみが必要です。この方法を試してみたい人の概要は次のとおりです。

コントロール

VRコントロールは、セットアップが非常に簡単です。以前に使用したコントロール変数に新しいVRControlsオブジェクトを割り当てるだけです。軌道制御とデバイスの方向制御は、VR機能なしでブラウザの世話をする必要があるため、必要はありません。これは、あなたのシーンもGoogle段ボールでも非常にうまく機能するはずです！

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

vr効果

効果は、Stereefectのように実装に非常に似ています。その効果を新しいvreffectの効果に置き換えるだけです：

ただし、この方法では、その効果をレンダリングしません。代わりに、VRマネージャーをレンダリングします

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>

vrマネージャー

VRマネージャーは、VRの出口などのすべてを処理します。そのため、シーンが最終的にレンダリングされる場所です。最初に以下を介して設定します

VRマネージャーは、ユーザーが互換性のあるブラウザ上にある場合はVRモードを入力できるボタンを提供します。ブラウザがVRができない場合はフル画面（フル画面はモバイルに必要なものです）。 Hidebuttonパラメーターには、そのボタンを非表示にしたいかどうかが表示されます。私たちは間違いなくそれを隠したくありません！

レンダリングコールは次のように見えます。3つのupdate（）関数から生じるタイムスタンプ変数を使用します。

effect <span>= new THREE<span>.StereoEffect</span>(renderer);</span>

そのすべてが整っていれば、デバイスに応じてさまざまな形式に変換される動作VR実装が必要です。

>

renderer.getSize（）エラーを返していますか？これは私を数時間狂わせましたが、これを修正するために必要なことはすべて、Three.js！

effect<span>.setSize(width, height);</span>

を更新するだけです。

WebVRボイラープレートがアクションでどのように見えるか

これが私のTwitterの例の見方が、VRをサポートするブラウザでどのように見えるかですか：

ここに、VRアイコンをクリックすると表示されるOculus Riftビュー内にあります。

これは、スマートフォンでのビューがどのように見えるかであり、デバイスの向きによりシーンを見回すことができ、画面が分割されていません。コンテンツの優れた応答性のあるビュー：

モバイルでVRアイコンをクリックすると、Google段ボールスタイルのデバイスのフルスクリーンビューが表示されます。

cssおよびwebvr

Mozillaは、Firefox NightlyバージョンでもVR視聴機能をブラウザに提供することを目指していますが、かなり早い時期です！ MacとOculusのセットアップで動作させることができていませんでした。 FirefoxのVladimirVukićevićが言及した慣習の一種には、CSS 3D変換とVRフルスクリーンモードの統合が含まれます。

ウラジミールのブログ投稿の例として、彼は、変形スタイルの要素：preserve-3dが2つの視点から2回レンダリングしてVRに持ち込むべきだと言います：

VRとCSSを使用してデモを知っている場合は、私に知らせてください！私は追跡することができませんでした。 WebのHTMLとCSSの一部をVRに含めるというアイデアは、間違いなく本当に興味深い概念です。私たち全員がVRデバイスにゆっくりとシフトするので、ある時点でWebがこのようなVRレルムを入力することは避けられません！

結論

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

テクノロジーの世界は、私たちの技術能力が私たちの野生の願望と一致するので、今後数年間でゆっくりと確実に仮想現実を受け入れようとしています！ VRの採用とその価値を促進することの1つはコンテンツです。 VRユーザーが楽しむためにVRコンテンツを取得する必要があります！ Webを介してより良い方法で簡単な方法がありますか？このコードを使用してプランジを取り、VRデモを作成する場合は、コメントで共有するか、Twitter（@ThatPatrickGuy）で連絡してください。 Oculus RiftまたはGoogle Cardboardを着て、スピンしてみたい！ javaScriptを介してVRとARのキュレーションされたリンクのセットがあり、簡単な参照を探している人たちがいます。 Dev Dinerにアクセスして、この記事に記載されている両方のリンク、その他の素晴らしいSitePoint記事などで満たされたJavaScript Developer Guideで私のDev Diner VRとARをチェックしてください。私がリストしていない他の素晴らしいリソースを持っているなら、私にも知らせてください！

Web上のVRの構築に関するよくある質問

Web上にVRを構築するための前提条件は何ですか？

Web上にVRの構築を開始するには、HTML、CSS、およびJavaScriptを基本的に理解する必要があります。また、2Dおよび3DグラフィックをレンダリングするためのJavaScript APIであるWebGLにも精通している必要があります。 3Dグラフィックを作成するための人気のJavaScriptライブラリであるThree.JSの知識も有益です。さらに、VRエクスペリエンスをテストするためのVRヘッドセットが必要です。 VRエクスペリエンスを作成するために使用されます。 Three.JSはWebGLを使用するプロセスを簡素化しますが、AフレームではHTMLのような構文を使用してVRシーンを構築できます。これらのツールを使用して3Dオブジェクトを作成し、テクスチャと照明を追加し、カメラの動きを制御できます。 Webブラウザーで、Oculus Rift、HTC Vive、Google Cardboardなど、さまざまな仮想リアリティデバイスをサポートします。開発者は、VRデバイスと互換性のあるブラウザを持っている人がアクセスできる没入型VRエクスペリエンスをWebで作成できます。 🎜> JavaScriptは、VRを含むWeb開発の主要言語です。ただし、TypeScriptやCoffeeScriptなど、JavaScriptにコンパイルする言語を使用できます。さらに、WebAssemblyを使用すると、ブラウザのネイティブスピードに近いCなどの言語で書かれたコードを実行できます。 Webには、レイテンシの削減、メモリの効率的な管理、およびレンダリングの最適化が含まれます。非同期負荷、テクスチャ圧縮、詳細レベル（LOD）などのテクニックを使用して、パフォーマンスを向上させることができます。また、ユーザーのハードウェアとネットワークの条件の制限を検討してください。

VRデバイスなしでユーザーがVRエクスペリエンスにアクセスできるようにするにはどうすればよいですか？たとえば、Deviceorientation APIを使用して、ユーザーがモバイルデバイスを移動してVRシーンを探索できるようにすることができます。また、ユーザーがマウスやタッチでナビゲートできる360度ビューを提供することもできます。 VRヘッドセット。ヘッドセットがない場合は、ChromeとFirefoxにWebVRエミュレータ拡張機能を使用できます。このツールはWebVR APIをシミュレートし、VRシーンの3Dビューを提供します。 Three.jsでは、Aフレームが読み取ることができる形式で3Dモデルをエクスポートします。 GLTF（GL送信形式）は、3Dシーンとモデルの標準ファイル形式です。

VRをWeb上に構築する際に直面する可能性のあるいくつかの課題は何ですか？

​​

3D環境でのユーザー入力の処理、パフォーマンスの最適化、さまざまなVRデバイスとブラウザー間の互換性の確保が含まれます。さらに、リアルな3Dグラフィックとアニメーションの作成は複雑になる可能性があります。

Web上のVRの構築について詳しくは、オンラインで利用できるリソースがたくさんあります。 MozillaのWebVRドキュメントは素晴らしい出発点です。 Three.jsおよびAフレームWebサイトのチュートリアルや例を確認することもできます。さらに、質問をして仕事を共有できる多くのオンラインコミュニティがあります。

以上が今日WebでVRを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。