キーテイクアウト JavaScriptとHTML5を利用して、プロジェクトはモバイルブラウザーをGoogle段ボールを介して拡張現実(AR)ビューアーに変換し、携帯電話のカメラを活用して実際の環境でフィルターをオーバーレイします。 実装では、携帯電話のカメラを介してビデオ入力をキャプチャし、さまざまな視覚フィルター(グレースケール、セピア、ピクセル化、逆色)を適用し、VRのような体験のための立体ビューで修正された出力を表示します。 技術セットアップには、3Dレンダリングと立体効果を処理するためにThree.jsライブラリを使用して、VRヘッドセットの各目に適したデュアルディスプレイを確保することが含まれます。 注目すべき機能は、ユーザーの視線方向に基づいたフィルターの動的スイッチングです。特に見下ろすときは、DeviceorientationEventによって促進されます。 Chromeなどのブラウザのセキュリティ更新により、ARエクスペリエンスを実行するにはHTTPS接続が必要であり、カメラ機能にアクセスするための安全なコンテキストの重要性を強調しています。 このプロジェクトは、WebテクノロジーとVRハードウェアを組み合わせて、Webブラウザから直接没入型ARエクスペリエンスを作成し、革新的な教育、エンターテイメント、商用アプリケーションへの道を開く可能性を強調しています。 モバイルブラウザ内で仮想現実を実行する機能は、力を与え、エキサイティングです。 Google Cardboardやその他の同様のVRデバイスは信じられないほどシンプルです。携帯電話を所有者に入れて行きましょう!私は以前、Google CardboardとThree.jsを使用してVRをWebに持ち込みました。ここでは、Webデータを引き込むVR環境を構築する基本について説明しました。人々はその記事を本当に楽しんでいた(そして私はそのデモの構築を本当に楽しんだ)ので、私はそれを別のアイデアで拡張するだろうと思った。 Web APIを持ち込むのではなく、携帯電話のカメラを持ち込み、これを拡張現実体験に変えてみませんか? この記事では、カメラデータを引き込み、フィルタリングしてHTML5とJavaScriptを使用して表示する方法を調べます。これをすべての立体ビジョン効果を通じて行い、Googleの段ボールや他のVRデバイスの拡張現実体験を作成します。カメラストリームにいくつかの異なるフィルターを適用します - 漫画風のグレースケールフィルター、セピアフィルムスタイルフィルター、ピクセル化されたフィルター(私のお気に入り)、逆カラーフィルター。 CanvasタグとJavaScriptであるHTML5で画像をフィルタリングするのがまったくない場合、JavaScript In Motionと呼ばれるLearnableと呼ばれるトピックに関する全コースがあります!キャンバスとビデオタグを理解しているという仮定と、キャンバスタグにビデオをストリーミングする方法でこの記事にアプローチします。または、あなたが行くにつれてそれを解決するのに十分に自信があるという仮定で! デモコード コードにまっすぐに入って試してみたい場合は、ここでgithubで見つけることができます。 実行中に試してみませんか?ここでホストされているランニングバージョンがあります:リアリティフィルター。 注:Chromeがカメラの入力を処理する方法の最近の変更では、これが機能するためにHTTPSを介してページを実行する必要があります! これがどのように機能するか 以前のGoogle Cardboardの記事から同じ最初のセットアップを取得します。これは、立体効果を通じて表示する3.JSシーンです。その効果により、各目にディスプレイを持つことができ、VRで物事を驚くほど3Dに見せます。ただし、前の記事から浮かんでいる粒子などではなく、ほとんどの要素を削除し、カメラフィードを再生するカメラの前に1つの単純な3.jsメッシュを配置します。 私たちのコードはを説明しました 変数宣言を見ると、ここの変数のほとんどは、以前のデモを経験した人には馴染みがあります。 3つのシーン、カメラ、レンダラー、キャンバス出力用の要素を準備するための変数、その要素を配置するコンテナ、および立体効果を保存する変数はすべて同じです。 カメラフィードに関連する3つの新しい変数は、ビデオ、キャンバス、コンテキストです。 var scene, camera, renderer, element, container, effect,ビデオ - 実際のhtml5 要素。それは私たちのカメラフィードをその中で再生するようにします。 Canvas - ビデオ要素の内容を持つ仮想キャンバス要素。このキャンバスのビデオデータを読んでから、テーマフィルターを3つに戻してから、3つのシーンに内容を配置します。 video, canvas, context,コンテキスト - ほとんどの関数を実行するために使用するCanvasの2Dコンテキスト。 フィルター機能に関連する変数の下には、他にもいくつかの変数があります。 テーマ - フィルターの名前の配列。 currentheme - テーマ配列内で現在表示しているインデックス LookingTaTGround - 私たちが地面を見たかどうか(これはすぐにもっと理にかなっています)。 themes = ['blackandwhite', 'sepia', 'arcade', 'inverse'], currentTheme = 0, lookingAtGround = false;以前と同じように、シーンやカメラなどを設定するinit()関数から始めます: 今回はDeviceorientationイベントを介してカメラの動きの機能はありません。 VRエクスペリエンスと比較して、この3.JSシーンの実際のカメラの位置を変更する必要はありません。シーンを同じ場所に保持しています。カメラフィードは、ユーザーが周りを見回したときに動くものです。 前の例から保持していたリスナーの1人は、シーンをタップした場合にフルスクリーンに移動するイベントリスナーです。これにより、私たちのビューからクロムアドレスバーが削除されます。 deviceorientationevent の別の使用 このデモでは、deviceorientationEventに新しい用途があります。デバイスの方向の変更を監視し、フィルターを切り替えるためのトリガーとして使用するように設定します。イベントをトリガーする物理的なコントロールは実際にはないため、ユーザーが見ている場所で物事を制御します。特に、ユーザーが地面を見るときはいつでもフィルターを変更します。 このコードでは、evt.gammaが-1〜1の間であるかどうかを監視しています。もしそうなら、彼らは地面を見ています。これは地面の非常に正確な場所です。小さすぎてトリガーが難しすぎると、-1.5から1.5などに範囲を増やすことができます。 彼らがこの範囲を見ていて、見張りが虚偽である場合、テーマスイッチャーコードを実行します。これにより、現在のテーマはテーマ配列の次のインデックス番号に調整されます。 LookingAtgroundをTrueに設定し、4秒後に設定します。これにより、最大で4秒ごとにフィルターを1回だけ変更します。 var scene, camera, renderer, element, container, effect,プライマリカメラフィードの取得 私たちの周りの世界をフィルタリングするには、スマートフォンの「環境」カメラにアクセスする必要があります。まず、要素を作成し、オートプレイをtrueに設定し(カメラをすぐに再生する必要があるため)、ストリームのオプションを設定することから始めます。オプションでは、FacingModeを「環境」に設定します。「環境」は、そのカメラが使用可能な場合に使用します。そうでない場合は、代わりにセルフィースタイルのカメラを使用します。これは、環境カメラがないラップトップでテストするときに役立ちます! (注意してください、あなたのラップトップは常にフィルターを切り替えるかもしれません。もしそうなら、あなたはテストする前にこれをオフにする必要があります!) 次のステップは、これらのオプションを使用して実際にカメラフィードを引き込むことです。このために、MediaStream APIを使用します。これは、ローカルオーディオおよびビデオストリームからデータを引き込むことができるJavaScript APIのセットであり、携帯電話のカメラストリームを入手するのに最適です。特に、getUsermedia関数を使用します。 MediaStream APIはまだ「W3Cエディターのドラフト」にあり、ブラウザとはわずかに異なるブラウザーが実装されています。このデモは主にGoogle Chrome for Mobileに焦点を当てていますが、将来の互換性のために、ユーザーの現在のブラウザで動作するものをnavigator.getusermediaに割り当てます: それから、ブラウザがMediaStream APIからMediaStreamTrackを理解し、ブラウザで互換性のあるGetUsermedia機能を正常に見つけている限り、カメラデータの検索を開始します。 video, canvas, context, MediaStream API内では、MediaStreamTrack.getSources()内に、デバイスからブラウザが利用できるすべてのオーディオおよびビデオソースを取得する機能があります。各カメラからのビデオデータとともに、デバイスに接続された各マイクからマイクデータを取得できます。この関数からの返された値は、ソースと呼ばれる配列内で利用できます。各ソースをループし、「ビデオ」に等しい種類のソースを探します。各ソースには、一種の「オーディオ」または「ビデオ」があります。次に、発見されたビデオに「環境」に等しい顔のプロパティがあるかどうかを確認します。もしそうなら、これは私たちが使用したいカメラです。 API内のIDを取得し、以前からオプションオブジェクトを更新して、このソースIDを使用する推奨ビデオストリームとして含める。 オプションオブジェクトは、舞台裏のように見えるようになりました:var scene, camera, renderer, element, container, effect, 最後に、これらのオプションをnavigator.getusermedia関数に渡し、成功とエラーコールバックを渡します。これにより、ビデオデータの取得が行われます video, canvas, context, カメラフィードをシーンに入れます themes = ['blackandwhite', 'sepia', 'arcade', 'inverse'], currentTheme = 0, lookingAtGround = false;ビデオストリームができたら、成功のコールバックであるStreamFound()の中でシーンに入れました。まず、ビデオ要素をDOMに追加して、その内容を返されたビデオストリームに設定し、ウィンドウの全幅と高さにすることから(キャンバスに高解像度を読み取る必要があります) ページでカメラストリームを再生した後、ビデオデータの操作を行うために使用するJavaScriptにキャンバス要素を作成します。 Canvas要素自体がページ自体に追加されることはなく、JavaScriptのままです。 ビデオと同じ幅と高さにキャンバスを設定し、2つの最も近いパワーに丸めました。この理由は、3つのテクスチャが2のパワーとして最適に機能するためです。これに準拠していない他の幅と高さを渡すと、それはまったく問題ありませんが、特定のMinfilterおよびMagfilterオプションを使用する必要があります。ここで物事をシンプルに保つために、2つのパワーに合わせて調整することを好みました。 init(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.001, 700); camera.position.set(0, 15, 0); scene.add(camera); renderer = new THREE.WebGLRenderer(); element = renderer.domElement; container = document.getElementById('webglviewer'); container.appendChild(element); effect = new THREE.StereoEffect(renderer); element.addEventListener('click', fullscreen, false); 次に、ストリーミングビデオ映像を含む3つのテクスチャを作成し、キャンバス要素を渡します。作成されたCanvas要素のコンテキストにコンテキスト変数を設定し、Canvaのコンテキストにテクスチャのコンテキストを割り当てます。すべてを同期に保ちます。 次に、3.js平面を作成します。3.planegeometryを使用してフィードを配置します。ビデオのベースサイズとして1920×1280に設定しました。 if (window.DeviceOrientationEvent) { window.addEventListener('deviceorientation', function(evt) { if (evt.gamma > -1 && evt.gamma lookingAtGround = true; currentTheme = (themes.length > currentTheme+1) ? currentTheme+1 : 0; setTimeout(function() { lookingAtGround = false; }, 4000); } }.bind(this)); } 次に、平面とビデオフィードを使用してテクスチャを使用して3 -meshオブジェクトを作成します。 Z軸に-600を配置し、それを視野から遠ざけ、3つのシーンに追加します。別のサイズのビデオフィードがある場合は、Z位置を調整して、形状がビューポートを埋めることを確認する必要がある場合があります。 その後、ビデオストリームの取得に何か問題がある場合は、console.logを実行するエラーコールバック関数があります。 video = document.createElement('video'); video.setAttribute('autoplay', true); var options = { video: { optional: [{facingMode: "environment"}] } }; init()関数の最後に、animate()関数が表示されます。これは、ビデオ画像の処理を行う場所です。 var scene, camera, renderer, element, container, effect, フィルターの適用 animate()関数は、Context.drawimage():>を使用してカメラからキャンバスに最新のフレームを描画することから始まります。 video, canvas, context, そこから、Context.getImagedata()を使用してキャンバスを読み返すことができ、設定されているテーマに応じて保持されるデータにフィルターを適用できます。以下のコードは、データを読み取り、画像内の各ピクセルの一般的な輝度を取得し、各ピクセルをフィルタリングして、輝く輝度のスケールに応じて黒、灰色、または白のいずれかをフィルタリングします。 。これは、漫画/古いスタイルの新聞を画像に与えます。 それはそうです: themes = ['blackandwhite', 'sepia', 'arcade', 'inverse'], currentTheme = 0, lookingAtGround = false; 次のテーマはピクセルを反転するので、白は黒などです。画像にX線スタイルを提供します: それはそうです: init(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.001, 700); camera.position.set(0, 15, 0); scene.add(camera); renderer = new THREE.WebGLRenderer(); element = renderer.domElement; container = document.getElementById('webglviewer'); container.appendChild(element); effect = new THREE.StereoEffect(renderer); element.addEventListener('click', fullscreen, false);セピアのテーマは、ウェブ上のさまざまな場所で見た式を使用して、画像にセピア、古い学校の色の感触を与えます。また、各ピクセルに赤、緑、青のランダムレベルを追加することにより、画像にノイズを追加します。 Sepia経由のピクセルが255よりも大きな色レベルになる場合、私は255でそれをキャップします それはそうです: 最後に、すべてのエフェクトの私のお気に入りです!画像をピクセル化してレトロな世界のように見える「アーケード」スタイルのスタイル。この効果を実現するために、David DesandroとJohn Schulzによって緊密なPixelateプラグインを調整しました。プラグインの元のバージョンは、インライン画像を変換し、ピクセル化されたキャンバスバージョンに置き換えます。代わりに、私のバージョンはキャンバスデータを取得し、同じキャンバスとコンテキストに戻すため、ライブビデオに使用できます。調整されたバージョンは、プラグインページのパラメーターと同じパラメーターをすべて受け入れます。上記の他のフィルターよりも少し遅いため、調べる時間があれば最適化される可能性があります。今のところ、私は少し遅れて大丈夫です、それをもっとレトロに感じさせます!そのフィルターに新しいオプションを適用しようとしている人のためのメモ(例えば、世界を代わりにダイヤモンドに変える) - それはさらに遅れることができます! if (window.DeviceOrientationEvent) { window.addEventListener('deviceorientation', function(evt) { if (evt.gamma > -1 && evt.gamma lookingAtGround = true; currentTheme = (themes.length > currentTheme+1) ? currentTheme+1 : 0; setTimeout(function() { lookingAtGround = false; }, 4000); } }.bind(this)); } それはそうです: 最後に、3.jsの次のフレームで更新するテクスチャを設定します(何らかの方法で間違いなく変更したため)。また、3つのシーンを更新および再送信するためのコードを実行します。var scene, camera, renderer, element, container, effect, それはhttps timeです 2015年後半の更新 - この記事に戻って、かなり重要な情報の新しいビットを追加します。Chromeでは、カメラを使用したWebページがHTTPSで提供されることが必要です。したがって、これを実行しようとする前に、HTTPSを介してサービスを実行する方法を見つける必要があります。これまでにテストに使用した方法の1つは、Ngrokです。これは、LocalHostにHTTPSトンネルを提供できます。 SitePointのどこからでもローカルホストにアクセスするガイドがあります。 アクション中 ウェブカメラなどにアクセスできるようにするには、サーバーをローカルで実行するのではなく、サーバーでホストする必要があるようです。テストのために、ngrokを使用して携帯電話でMacからテストしました。それ以外の場合は、どこかでWebサーバーにftpをftpしてテストしてください! Google Cardboardまたは他のVRヘッドセット内で実行すると、最初から白黒フィルターを使用して周囲の環境が表示されます。地面を見下ろすと、フィルターを切り替える必要があります。とても楽しいです!以下は、アクション中の小さなアニメーションGIFです(ヘッドセットの外側で表示されているものが表示されます): 結論 Google Cardboard、HTML5、JavaScript、およびThree.jsのパワーを組み合わせることで、仮想現実だけに限定されない非常にきちんとした可能性をもたらします。カメラの入力を使用して、あなたの周りの世界をシーンに持ち込むことができます!この最初のアイデアを発展させることができる他の領域がたくさんあります。シェーダーを使用して3.js自体を介して画像をフィルタリングし、拡張現実オブジェクトをシーンに追加することもできます。将来の記事で説明する2つのアイデア。 このデモに基づいて本当にきちんとした経験をしている場合は、コメントにメモを残すか、Twitter(@thatpatrickguy)で私と連絡を取ります。 JavaScriptとGoogle Cardboardに関するよくある質問(FAQ) Web開発プロジェクトにHTML5をARとARに統合するにはどうすればよいですか? HTML5を拡張現実(AR)と統合することは、AR.JSのようなライブラリを使用して達成できます。このライブラリを使用すると、特定のアプリを必要とせずに、Webブラウザーから直接アクセスできるARエクスペリエンスを作成できます。 Aフレームまたは他の3Dモデリングソフトウェアを使用して3Dモデルを作成し、AR.JSを使用して、デバイスのカメラを介して表示されるときにこれらのモデルを現実世界にオーバーレイできます。これは、数行のコードで行うことができ、初心者でもアクセスできるようにします。 ARエクスペリエンスの作成におけるJavaScriptの役割は何ですか? JavaScriptは、ARエクスペリエンスを作成する上で重要な役割を果たします。これは、AR要素の動き、ユーザーの入力への反応、または時間の経過とともに変化するなど、AR要素の動作を制御するために使用されます。 JavaScriptを使用して、ユーザーの位置と方向の追跡や複数のARオブジェクト間の相互作用の管理など、より複雑なタスクを処理することもできます。 Google Cardboardは、Virtual Reality(VR)プラットフォームで、折りたたみ式の段ボールビューアとスマートフォンを使用しています。 JavaScriptを使用してWebVR APIを使用して、Google Cardboardの没入型VRエクスペリエンスを作成できます。 WebVR APIは、3Dシーンをヘッドセットにレンダリングし、ユーザー入力を処理し、VRディスプレイを管理するために必要なツールを提供します。 HTMLはWebページのコンテンツを構築するために重要ですが、ARアプリケーションを作成することはできません。 AR機能を処理するには、JavaScriptおよび潜在的に他のライブラリを使用する必要があります。ただし、AR.JSのようなライブラリはこのプロセスをはるかに簡単にすることができ、数行のコードでARエクスペリエンスを作成できます。 > HTML5をARと統合するための多くの潜在的なユースケースがあります。たとえば、ユーザーが購入する前に家具が自宅でどのように見えるかをユーザーが確認できるARショッピングアプリを作成できます。または、実際のオブジェクトに情報をオーバーレイする教育アプリを作成し、学生がよりインタラクティブな方法で学習できるようにすることができます。 HTMLはWebページのコンテンツを構築するために重要ですが、ARアプリケーションを作成することはできません。 AR機能を処理するには、JavaScriptおよび潜在的に他のライブラリを使用する必要があります。ただし、AR.JSのようなライブラリはこのプロセスをより簡単にすることができ、数行のコードでARエクスペリエンスを作成できます。 JavaScriptの「フィルター」プロパティは、要素に適用されたフィルターを設定または返すために使用されます。これには、ぼやけ、明るさ、コントラスト、グレースケール、色相、反転、不透明、飽和、セピアなどのようなものが含まれます。 Webページにさまざまな視覚効果を作成するために使用できます。 JavaScriptを使用してARエクスペリエンスを作成するにはどうすればよいですか?それらがどのように移動するか、ユーザー入力に反応する、または時間の経過とともに変化するなどのAR要素。 AR.JSのようなライブラリは、このプロセスを簡素化でき、ほんの数行のコードでARエクスペリエンスを作成できます。 ARエクスペリエンスにGoogle Cardboardを使用できますか? Google Cardboardは主にVRエクスペリエンス用に設計されていますが、適切なソフトウェアでARにも使用できます。 JavaScriptとWebVR APIを使用して、Google CardboardのARエクスペリエンスを作成できます。 。たとえば、ユーザーが購入する前に家具が自宅でどのように見えるかをユーザーが確認できるARショッピングアプリを作成できます。または、実際のオブジェクトに情報をオーバーレイする教育アプリを作成し、学生がよりインタラクティブな方法で学習するのを支援することができます。