👩🏼‍🤝‍👨🏿 🐰 🧕🏼 ブラウザのVR / AR。 WebVR APIを使用して最初のアプリケーションにすばやく参加して作成する方法 🍫 🤨 🕵🏻

仮想現実および拡張現実は積極的に開発されており、世界を占領する権利を主張し始めています。さらに、これらの技術の用途は多様であり、ゲームだけに限定されません。また、ブラウザーでVR / ARテクノロジーを操作するツールの出現により、関心はさらに高まっています。 WebVRと呼ばれるJavaScript APIを使用して、MVP（Minimum Viable Product）Webプロジェクトを実験して作成できます。それが何であり、どのように動作するかを理解しましょう。そして、この非常にWebVR APIなしで行うことは可能ですか？

この記事はガイダンスのみを目的としており、WebVR APIとWeb ARの実装に関する一連の記事の最初の記事です。トピックが出てきたら、さまざまな手法とフレームワークを使用してより具体的な例を示しながら、引き続き開発を続けます。私の個人的な経験を共有し、記事でWebVRを使用する基本的な原則、Web ARの作成方法、iOSを持っている場合の対処方法、および今日すべてを開発できるデバイスについて検討したいと思います。

Tutu.ruでは、フロントエンドのシステムアーキテクトとして働いています。私はさまざまなRnD（研究開発）タスクに従事しています。 VR / ARのトピックは、私の仕事と直接交わるものではありませんが、私たちはすでにこの技術を観光事業の文脈で応用することを会社で考えています。未来のテクノロジーは常に私を魅了し、フロントエンドスタックが本当に好きです。むしろ、私はすべてがブラウザでできるというアイデアが好きです。これにより多くの制限が課せられ、いくつかの困難が生じます。しかし、それらはすべて解けるものであり、しばらくすると完全に水平になります。

足はどこから成長しますか

仕様自体は2014年に書き戻されましたが、最初のバージョンは2016年の初めにMozillaによって導入されました。その後、最初の完全なドラフトWebVR API仕様が導入されました。この仕様では、Oculus RiftなどのさまざまなVRデバイスを操作するためのソフトウェアインターフェイスについて説明します（実際、この仕様はもともとoculusで作成されました）。この仕様は、GoogleのBrandon JonesとMicrosoftのJustin Rogersの支援を受けて開発されました。

新しいWebVR仕様のサポートは、FirefoxとモバイルChromeで既に実装されています（より正確には、実装の程度とニュアンスについては後で説明します）。そしてこれは、今日、明日の技術を自由に実験して試すことができることを意味します。お使いのブラウザが古い、奇妙、または更新されていない場合-これらすべてのためのポリファイルがあります。

なぜWebVR APIが必要なのですか？

WebVR APIは、デバイスを操作するためのソフトウェアインターフェイスです。彼は3Dグラフィックスについて何も知りません。グラフィックスの操作、シーンのレンダリング、光源のインストール、その他すべてはプログラマーの厳しい肩にかかっています。 WebVR APIを使用すると、デバイスへのアクセスを抽象化できます。このAPIは、画像、デバイス、その機能、技術特性に関する情報を取得するためのツールを提供しますが、画像自体と3Dの世界は、HTML、CSS、WebGL、Canvasなどの既に馴染みのあるWebテクノロジーを使用して描画する必要があります...

WebVR APIは、作業のためのいくつかの基本的なオブジェクトを提供します。

ナビゲーター-デバイスのリストを取得し、アクティブを決定できます。
VRDisplay-ヘッドセットが頭を装着しているかどうか、フレームに関する情報、目を示します。
VRPose-デバイスの位置と向き、速度と方向に関する情報。
VREyeParameters-個々の目にビデオをレンダリングする方法に関する情報。
VRFrameData-別の目に投影するためのシーンフレームに関する情報。

オブジェクトの完全なリストは、次のソースで入手できます。

developer.mozilla.org/en-US/docs/Web/API/WebVR_API
msdn.microsoft.com/en-us/library/mt806281（v = vs. 85）.aspx

こんにちはVRの世界

JavaScriptでVRデバイスを操作するための簡単な定型コードは次のようになります。

navigator.getVRDisplays().then(displays => { if (displays.length < 1) { return console.warn('No displays found!'); } displays.forEach(vrDisplay => { buildVRDisplay(vrDisplay) }) }); function buildVRDisplay(vrDisplay) { //       const frameData = new VRFRameData; //         vrDisplay.getFrameData(frameData); //     const rightEye = vrDisplay.getEyeParameters('left'); const onAnimationFrame = () => { //     vrDisplay.requestAnimationFrame(onAnimationFrame); }; vrDisplay.requestAnimationFrame(onAnimationFrame); }

このコードは、WebVR APIを使用した作業がどのように見えるかのアイデアを与える必要があります。以下でより詳細な例を検討し、ブラウザのサポートとデバイスについて話しましょう。

使用するデバイス

VRについて話すとき、彼らはOculus Riftなどを思い出します。 WebVRについて話している場合、ブラウザの開発を期待していると考えるのは理にかなっています。

今日、最もアクセスしやすく人気のあるデバイスは、いわゆるCardboardデバイス（またはVRBoxとも呼ばれます）です。モバイルVRデバイスリストは、指にリストできます。

Google Cardboard
Google Daydream（Cardboardデバイスの新しいバージョン）;
すべてのスマートフォンモデル用のさまざまな中国語VRBox。
Samsung GR VR（私の意見では、VRヘルメットとCardboardデバイスの機能の優れた組み合わせ、さらにはOculus Storeへのアクセスもあります）。

noname vrbox

レンズでボクシングするだけです。彼らは、サムスンGR VRのコピーまで、非常に異なるバージョンがありますが、任意の電話モデルのBluetooth経由で接続します。それらは、さまざまな形式の要因とさまざまな設計で作られています。どのOSのどのスマートフォンでも動作するBluetoothジョイスティックを購入できます。品質は非常に良好で、レンズに関する苦情はありません。すべての塩は、スマートフォン、ディスプレイサイズ、画面解像度に含まれています。

Xiaomi VRBox

特徴：ノーズブリッジのスクリーンの「ブラインドゾーン」をタップするスタイラスの原理で動作する機械式マニピュレーターボタンの存在（エンジニアが燃やす:)）。ジッパー。

サムスンGR VR

機能：USBを介してボックスに接続し、ヘルメット上のタッチパネルとボタンの存在。接続時に、Oculus機能が有効になり、電話はOculus互換デバイスのふりをします。

Google段ボール

特徴：小さな丸い磁石の形で作られたボタンの存在。このアプリケーションでは、磁場の変化が内蔵磁力計によって読み取られ、この変化はCardboard対応デバイスのボタンアクションとしてカウントされます。

Google Daydream

機能：Cardboardとの主な違いは、より徹底的で便利なヘッドセットとゲームパッドの存在です。これは完全なVRBoxであり、段ボールではありません:)

それらについてお話します。 ChromeブラウザーとVRBoxのバリエーションを備えたスマートフォンをお持ちの場合は、すでにWebVRのアクションをチェックインできます。最適なオプションは、Chrome CanaryまたはSamsung Internetです。もちろん、私は例外について言わなければなりません-これはiOSです。ただし、ポリファイルを介してVRを使用できるため、iOSデバイスからもデモを利用できます（実装によって異なります）。繰り返しますが、WebVR APIは3Dグラフィックスに関するものではないことを理解する必要があります。また、このVR API自体を使用せずに（まあ、またはポリファイルを使用して）iOSの下でもWebVRワールドを作成できます。

また、通常は開発が行われるデスクトップブラウザーウィンドウからVRの世界を見ることができます。まず、ヘルメットなしで世界が構築され、次に画像を光学ペアに分割する機能が既に追加されています。これを行うには、Firefox NightlyまたはChromeをこのプラグインで使用します：WebVR API Emulation。サポートが有効になっているChrome Canary、またはChromiumの特別なアセンブリ... ...

ブラウザのサポートとは何ですか？

そのため、今日、WebVR APIは次のブラウザで多かれ少なかれサポートされています。

HololensのMicrosoft Edge。
HTC Vive上のMozilla Servo。
Firefox Nightly;
Chrome Canary（クロームフラグを有効にする必要があります：// flags /＃enable-webvr ）;
Android向けChrome Canary
Chrome for Android（Daydreamデバイス、バージョン56以降を含む）;
HTC Vive、Oculus、AndroidのChromium;
Chromium WebVR Build（ https://webvr.info/get-chrome/ ）;
サムスンインターネット（サムスンGR VR）;
Oculus Carmel（これはWebVRブラウザーで、Samsung GR VRでも利用可能です）;
iOS Chrome（執筆時点でポリファイルを使用）;
iOS Safari（執筆時点でポリファイルを使用...）;
Chrome（現時点ではポリファイルを使用...）;
Firefox（...上のポリファイルを使用）。

互換性テーブルの完全なリストはここにあります。

WebVR APIサポートを有効にすることを忘れないでください。

Polyphilesとサポートライブラリ

デバイスがWebVR APIをサポートしていない場合は、ページに接続できるpolyfillを使用するか、ブラウザに特別な拡張機能を使用できます。ポリファイルリンク： github.com/googlevr/webvr-polyfill

Chrome向けWebVR APIエミュレーション

リンクに追加できます： chrome.google.com/webstore/detail/webvr-api-emulation/gbdnpaebafagioggnhkacnaaahpiefil

このプラグインについては、いくつかの言葉を別々に言う価値があります。 WebVR APIのエミュレーションを追加するだけでなく、さまざまな操作を行い、DevToolsに統合することもできます。

WebVR-UI

デバイスがVRデバイスではない場合（およびスマートフォンのブラウザーが単なるブラウザーである場合）、webvr-uiライブラリを使用してヘッドセットモードに切り替えるVRインターフェイスを再作成できます。このライブラリを使用すると、VRモードに切り替えるためのボタンを備えた美しいUIインターフェイスを作成できます。プロジェクトへのリンク： github.com/googlevr/webvr-ui

数行のコードを追加することにより：

 var renderer = new THREE.WebGLRenderer(); var options = {}; var enterVR = new webvrui.EnterVRButton(renderer.domElement, options); document.body.appendChild(enterVR.domElement);

このライブラリはA-Frameフレームワークと互換性があり、非常に優れています。コードに属性を追加するだけです。

 <a-scene webvr-ui> ... </a-scene>

そして、便利なVRインターフェースにアクセスできます。 WebVRが利用可能な場合は、VRモードに切り替えるように求められます。それ以外の場合は、VRモードなしでデモモードでWebアプリケーションを起動することをお勧めします。

このライブラリは高度にカスタマイズ可能であるため、独自のカスタムボタンを作成できます。

どうすれば世界を構築できますか？

VRの世界に参加するには、3Dグラフィックスの操作方法を学ぶ必要があります。 WebGLをゼロから学習する場合、これは困難な作業のようです。しかし、最も簡単な方法は、Threejs、D3.jsなどの既製のライブラリ、またはVR（MozillaチームのA-Frameなど）を操作するための専用フレームワークを使用することです。すでに、ReactのファンおよびFBの腸から出てくるすべてのもののためのReact VRのプレビューリリースがあります。しかし、これは別の記事のトピックです。

タイプVR

A-Frameフレームワークを使用すると、最小限の労力でVRの世界を構築できます。 A-Frameは、仮想現実向けのWebアプリケーションおよびWebサイトを作成するためのHTMLフレームワークです。ブラウザで結果を見ると、3D画像を表示するWebページのように見え、オブジェクトを操作したり操作したりできます。全体像はWebGLを使用して描画され、フレームワークの主なタスクは、HTMLマークアップと同様に、フロントエンドレンダリング用に通常の方法で3次元の世界を作成できるシンプルなツールを提供することです。フレームワーク自体はThreejsに基づいており、高レベルのアドインです。

A-Frameフレームワークは、一連の幾何プリミティブを介して3Dシーンを作成します。基本的なコンポーネントがまだない場合は、より複雑なコンポーネントを追加したり、独自のコンポーネントを追加することもできます。シーンオブジェクトには、位置、回転、スケーリングなどの一般的な幾何学的プロパティを使用できます。さらに、カメラと光源の位置を記述することができます。

A-Frameには、3Dワールドをデバッグできる優れたインスペクターがあります。

多くの良い例がここにあります。

それらは理解しやすく、それらを学習した後、非常に迅速に最初の「Hello VRワールド」を作成できます。 A-FrameはAR開発にも使用できます。 A-Frameを詳しく調べてみると、ここで別の記事全体についてお話しできます（このトピックに興味がある場合に表示されます）。

React VR

ReactVRはReactjsに基づくフレームワークです。関心があり、投稿の評価が高い場合は、別の記事を作成します...今のところ、リンクを残してください：

developer.oculus.com/blog/introducing-the-react-vr-pre-release

記事が良い評価を得て、読者がこのトピックに興味を持っていることを示したら、それについて別の記事を作成します。

WebVRなしでもできますか？

前述のように、WebVR API自体は、VRデバイスを使用する場合、またはディスプレイに関する特性を取得したり、画像をレンダリングしたりする場合にのみ必要です。しかし、モバイルVRについて話している場合、物理的には1mの画面で作業しています。しかし、ステレオペアをエミュレートできます。WebVRAPIは、2つの物理ディスプレイで動作するように、画面での作業を抽象化およびカプセル化するのに役立ちます。同時に、コードはクロスプラットフォームになり、たとえば、OculusのCarmelブラウザでWebVRアプリケーションを実行できるようになります。

WebVR APIを使用したThreejsの3Dワールドの例

ここでは、すべてのブラウザで開始するWebVRプロジェクトを作成できるおかげで、定型文を使用した例を示します。 iOSでも。

準備完了デモ： webvr.majorov.su/sample1

 <!DOCTYPE html> <html lang="en"> <head> <title>Web VR boilerplate demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <style> body { width: 100%; height: 100%; background-color: #000; color: #fff; margin: 0px; padding: 0; overflow: hidden; } /* Position the button on the bottom of the page. */ #ui { position: absolute; bottom: 10px; left: 50%; transform: translate(-50%, -50%); text-align: center; font-family: 'Karla', sans-serif; z-index: 1; } a { color: white; } </style> </head> <body> <div id="ui"> <div id="vr-button"></div> <a id="magic-window" href="#">Try it without a headset</a> </div> </body> <script>WebVRConfig = { BUFFER_SCALE: 0.5 }</script> <script src="node_modules/es6-promise/dist/es6-promise.min.js"></script> <script src="node_modules/three/build/three.min.js"></script> <script src="node_modules/three/examples/js/controls/VRControls.js"></script> <script src="node_modules/three/examples/js/effects/VREffect.js"></script> <script src="node_modules/webvr-polyfill/build/webvr-polyfill.min.js"></script> <script src="node_modules/webvr-ui/build/webvr-ui.min.js"></script> <script> var lastRenderTime = 0; //   VRDisplay. var vrDisplay; var boxSize = 5; //   THREE.Objects. var scene; var cube; var controls; var effect; var camera; // VR UI  var vrButton; function onLoad() { //  three.js WebGL . var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); //       DOM document.body.appendChild(renderer.domElement); //   scene = new THREE.Scene(); //   var aspect = window.innerWidth / window.innerHeight; camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 10000); controls = new THREE.VRControls(camera); controls.standing = true; camera.position.y = controls.userHeight; //  VR stereo  effect = new THREE.VREffect(renderer); effect.setSize(window.innerWidth, window.innerHeight); var loader = new THREE.TextureLoader(); loader.load('img/box.png', onTextureLoaded); //  3D  var geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); var textureLoader = new THREE.TextureLoader(); var texture0 = textureLoader.load('img/1.jpg'); var texture1 = textureLoader.load('img/1.jpg'); var texture2 = textureLoader.load('img/0.jpg'); var texture3 = textureLoader.load('img/0.jpg'); var texture4 = textureLoader.load('img/2.jpg'); var texture5 = textureLoader.load('img/0.jpg'); var materials = [ new THREE.MeshBasicMaterial({map: texture0}), new THREE.MeshBasicMaterial({map: texture1}), new THREE.MeshBasicMaterial({map: texture2}), new THREE.MeshBasicMaterial({map: texture3}), new THREE.MeshBasicMaterial({map: texture4}), new THREE.MeshBasicMaterial({map: texture5}) ]; var material = new THREE.MultiMaterial(materials); cube = new THREE.Mesh(geometry, material); cube.position.set(0, controls.userHeight, -1); scene.add(cube); window.addEventListener('resize', onResize, true); window.addEventListener('vrdisplaypresentchange', onResize, true); // Initialize the WebVR UI. var uiOptions = { color: 'black', background: 'white', corners: 'square' }; vrButton = new webvrui.EnterVRButton(renderer.domElement, uiOptions); vrButton.on('exit', function () { camera.quaternion.set(0, 0, 0, 1); camera.position.set(0, controls.userHeight, 0); }); vrButton.on('hide', function () { document.getElementById('ui').style.display = 'none'; }); vrButton.on('show', function () { document.getElementById('ui').style.display = 'inherit'; }); document.getElementById('vr-button').appendChild(vrButton.domElement); document.getElementById('magic-window').addEventListener('click', function () { vrButton.requestEnterFullscreen(); }); } function onTextureLoaded(texture) { texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(boxSize, boxSize); var geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize); var material = new THREE.MeshBasicMaterial({ map: texture, color: 0x01BE00, side: THREE.BackSide }); skybox = new THREE.Mesh(geometry, material); skybox.position.y = boxSize / 2; scene.add(skybox); setupStage(); } // Request animation frame loop function function animate(timestamp) { var delta = Math.min(timestamp - lastRenderTime, 500); lastRenderTime = timestamp; cube.rotation.y += delta * 0.0006; if (vrButton.isPresenting()) controls.update(); effect.render(scene, camera); vrDisplay.requestAnimationFrame(animate); } function onResize(e) { effect.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); } function setupStage() { navigator.getVRDisplays().then(function (displays) { if (displays.length > 0) { vrDisplay = displays[0]; if (vrDisplay.stageParameters) { setStageDimensions(vrDisplay.stageParameters); } vrDisplay.requestAnimationFrame(animate); } }); } function setStageDimensions(stage) { var material = skybox.material; scene.remove(skybox); var geometry = new THREE.BoxGeometry(stage.sizeX, boxSize, stage.sizeZ); skybox = new THREE.Mesh(geometry, material); skybox.position.y = boxSize / 2; scene.add(skybox); cube.position.set(0, controls.userHeight, 0); } window.addEventListener('load', onLoad); </script> </html>

次の記事では、WebVRの開発の詳細をさらに詳しく調べることができます。ボイラープレートでgithubにリンクします： github.com/borismus/webvr-boilerplate

Web ARはどうですか？

Web AR（拡張現実）-ブラウザで作成することもできます。しかし、「WebAR API」は存在せず、Webテクノロジーに実装された拡張現実の単なる指定です。

技術的には、すべての作業はWebVRでの作業とまったく同じですが、さらにWebRTCを使用してWebカメラからビデオストリームを取得します。さらに、フレームごとの処理のロジックを記述して、必要なオブジェクトを検索します。そして、WebVRの場合のように、ビデオストリームの背景に対して3Dシーンをすでに描画しています。そして、ARは必ずしもヘッドセットの存在を意味するわけではない、と言わなければなりません。「Pockemon GO！」を思い出してください-これはARプロジェクトですが、VRヘルメットはありません。したがって、ARプロジェクトを作成するために、VRヘルメットを用意する必要はありません。しかし、同時に、VRとARの概念は、いくつかのパラメーターとテクノロジーで交差する可能性があります。

サポートは何ですか？

WebRTCをサポートするために、まずすべてがここにあります。したがって、Web ARはすべてのAndroidデバイスに実装できると言えます。 iOSでは-いいえ、しかし本当にしたい場合は...

iOSデバイスで何をしますか？

WebVRについて話している場合、iOSデバイスではすべてがポリファイルを介して実装できます（またはWebVR APIを使用せずに、すべてを自分で記述し、加速度計やその他のセンサーを介して追跡アクションを実装し、自分で写真を打ち負かして2つのディスプレイをエミュレートします）。 ARについて話すと、WebRTCのサポートがないため、すべてが悪いです。しかし、Argonjsのようなプロジェクトがあります。これは、A-Frameベースのフレームワークと、もちろん特別なブラウザーで構成されるプロジェクトです。

ジョージア工科大学によるアルゴン4

→プロジェクトへのリンク： argonjs.io

→デモ： argonjs.io/samples

ブラウザの本質は簡単です。2つの層があります。 1つの層はWebkitエンジンで、2番目の層（背景）はカメラからのビデオストリームの出力です。ブラウザーには独自のAPIがあり、最初のバージョンのPhoneGapの動作に似ています（このプロジェクトの開発の夜明けにコマーシャルが2008年に試された場合、それは拡張JS APIを備えた特別なiPhoneブラウザーでした）。

同時に、ArgonjsはiOS用のVR開発にも使用できます。より正確には、MVPを実行します。 JSでVR / AR向けのクロスプラットフォームアプリケーションを開発する必要がある場合は、React VRと組み合わせたReact Nativeの方向に目を向けるか、PhoneGapにすべてを詰め込むことができます。

重要！ AppStoreにはいくつかのブラウザーバージョンがあります。現時点では、バージョン4をダウンロードする必要があります。ダウンロードしないと、フレームワークは起動しません。

itunes.apple.com/us/app/argon4/id1089308600?mt=8

ゲームパッドについてはどうですか？

これは、追加のトピックです。 Bluetooth APIとGamepad APIを扱います。これらはブラウザにあり、デスクトップとモバイルデバイスの両方でサポートされています（ここでも、ブラウザにはニュアンスとお気に入りのリストがあります）。ドキュメントを調査し、それらを操作する方法を学習します。ゲームパッドとVRの世界との相互作用について-これは別の記事（またはいくつかの記事）のトピックであり、簡単に言うとそうではありません。

ユースケースとアプリケーション

Tutu.ruについて話す場合、VR / ARを実際に使用するケースを使用するためのアイデアが既にあります。たとえば、これらはToursプロジェクトの3Dギャラリーです。少し洗練された360のギャラリーをVRヘルメットに適合させることができ、自宅にVRボックスを持っている人なら誰でも、プレゼンスの効果で将来のホテルとビーチを「見る」ことができます。 Trainプロジェクトの3Dギャラリーにも同じ手法を適用できます。このプロジェクトでは、車を内側から見ることができ、SapsanのVRヘルメットから場所を直接選択できます。同様に、将来的には、都市間バスを利用できるようになります。また、エクスカーションプロジェクトでは、将来のエクスカーションのデモプレビューを行うこともできます。

別のケースは、オフラインのオフィスでの観光客の娯楽です。観光客が雑誌やパンフレットの代わりにツアーマネージャーに出向くのを待っている間に、Samsung GR VRヘルメットを入れて旅行カタログを再度作成することで、適切なツアーパッケージを選択できます。 ARテーマを開発したら、オフラインオフィスに顧客の娯楽のために情報スタンドやさまざまな面白いものを置くことができます。古紙への反応が常に肯定的ではないためにクライアントがパンフレットをスキップできる場合、クライアントは新技術のプリズムを通して示される同じ広告を知覚し、満足することができます。

一般的に、想像力の逃避があります。私たちの会社の文脈でユーザー事例を伝えましたが、それらはすべてここにリストされているわけではありません。世界的に言えば、ワゴンと小さなトロリーを使用したユーザーケースを考え出すことができます。

ブラウザのVR / AR。 WebVR APIを使用して最初のアプリケーションにすばやく参加して作成する方法