awe.jsを使用したブラウザの拡張現実

キーテイクアウト

• 拡張現実（AR）は、AWE.JSライブラリを使用してモバイルブラウザに実装できます。これは、ARエクスペリエンスを作成するためにデバイスのカメラと3.JSを活用します。
awe.jsライブラリは、GeoベースのAR、Oculus Riftとの統合、Leap Motion Controller、およびマーカーベースのARを含む複数のARエクスペリエンスをサポートしています。
• デモには、モバイル用のGoogle Chrome、IFTTTアカウント、および印刷されたARマーカーが必要です。デモは、ChromeやOperaなどのいくつかのデスクトップブラウザでも動作します。
デモには、物理​​マーカーに表示される3Dコントロールボードが含まれ、IFTTTなどの外部サービスと対話して、明るい色などの設定を変更できます。
• awe.jsでは、ブラウザのデバイスタイプ、カメラの位置、ライト設定などのさまざまなパラメーターを設定する必要があり、興味のあるポイント（POI）とプロジェクションを使用してAR要素を管理します。
Chromeは、カメラにアクセスするWebページにHTTPSを義務付けており、ローカルテストにHTTPSトンネルを使用するなどの調整が必要です。
拡張現実はきちんとした概念です。私たちは私たちの周りの世界を見て、画像、テキスト、サウンド、ビデオで補完します。ハイテク企業は、メタグラス、Microsoft Hololens、Magic LeapなどのデバイスでARの可能性を探求し始めています。これらの非常にエキサイティングなARヘッドセットは、まだ消費者のリリースの準備ができていないため、すべての世帯がペアを持つまでには少し前になるかもしれません。ただし、モバイルブラウザーなど、アクセスしやすいものを使用して、世界を拡張現実に紹介する別の方法があります。
• 私は以前、Google CardboardとThree.jsを使用してVRをWebに持ち込み、JavaScriptとGoogle Cardboardで現実をフィルタリングすることについて、私の記事のSitePointで、JavaScriptとThree.jsを使用して、他の種類の現実の作成と操作を取り上げました。この記事では、awe.jsというJavaScriptライブラリを使用して、モバイルWebで拡張現実体験を作成する方法を示します。紙マーカーの上に開く3Dコントロールボードを作成します。 JavaScript HTTPリクエストを介して有効にできるほとんどすべてのことを行うことができるので、IFTTTを使用してLIFXライトバルブの色を変更するように設定します。
必要なもの
• このデモでは、現在、モバイル用のGoogle Chromeが必要になります。潜在的にモバイルのFirefoxで動作する可能性がありますが、HTC One M9で試したときにクリックイベントがトリガーされなかったことがわかりました。また、一部のデスクトップブラウザー（ChromeとOperaがMACで非常にうまく機能しました）で動作しますが、タッチイベントを備えたスマートフォンとはまったく同じではありません。タブレットではきちんとしている可能性がありますまた、httpリクエストをトリガーするルールを使用して、IFTTTアカウントとメーカーチャネルをセットアップする方法の知識も必要です。 IFTTTを初めて使用する場合は、以前にIFTTTを使用してLIFX電球をIoTに接続するという記事の基本を調べました。 Makerチャンネルに新しい人のために、IoTとnode.jsをIFTTTに接続する際にも説明しました。

  最後に、マーカーを紙に印刷する必要があります。私たちが使用するマーカーはこれです：

  コード

  コードにまっすぐに入って試してみたい場合は、すべてgithubで利用できます。

  awe.js

  awe.jsは、3つのjs、お使いのデバイスのカメラ、いくつかのかなりスマートなテクニックを使用して、ブラウザで拡張現実を作成するJavaScriptライブラリです。 awe.js githubリポジトリにライブラリといくつかのサンプルをダウンロードできます。それは4つの異なる種類のARエクスペリエンスを提供し、それぞれがリポジトリに独自の例を持っています：

  geo_ar - コンパスポイントの設定されたオブジェクトを配置できます。
  • Grift_ar - Oculus Riftと互換性があります
  Leap_ar - Leap Motion Controllerと統合します
  • marker_ar - 拡張現実マーカーに位置するエクスペリエンスを作成できます。これは私たちがこのデモで協力するものです。
  • 拡張現実デモコード
  • デモコードの長さは300行を超えていますが、その多くは同様のオブジェクトのコードを繰り返します。デモのGitHubリポジトリからデモコードをダウンロードし、ここで説明されている説明とともにフォローすることをお勧めします。すべてがどのように機能するかについてのアイデアが得られたら、いじくり回して自分のものを構築してみてください。
  すべてがウィンドウのロードイベント内で開始されます。最初に含めることは、ARコントロールパネル（ここでは「略して」と呼んだ）がオープンかどうかを追跡する変数です。最初は閉じられています。
  次に、awe.jsライブラリの使用を開始します。私たちが行うすべては、window.awe.init（）関数内で定義されます。 ARシーンのグローバルな設定から始めます。

  <span>window.addEventListener('load', function() {
  </span>    <span>var menu_open = false;
  </span>    
      <span>// Our code continues here
  </span>  <span>});</span>

  • device_type - すべての例は、これをawe.auto_detect_device_typeに設定します。これは、デバイスを自動的に検出するように要求します。これまでのところ、これを変更する必要はありません。
  設定 - 設定実際にここでライブを変更したい場合があります。これらには以下が含まれます：
  • container_id - 要素のID私たちの経験全体が内部で生成されます。
    fps - 1秒あたりの希望のフレーム（オプション）。
    default_camera_position - シーンを表示するデフォルトのカメラの位置（（0,0,0）で開始しています）。
    • default_lights - シーンに異なる3.jsライトの配列を設定し、それぞれがIDを与え、その種類の光とその色を定義できます。私たちのデモには、白い3.jsポイントライトが1つしかありません。さまざまなタイプの3つのライトに対応する光の種類には、さまざまなオプションがあります。
    設定が整ったら、awe.jsが初期化されたときに何をすべきかを定義します。すべてがwee.util.require（）関数に包まれています。これは、必要な追加のJavaScriptファイルをロードする前に必要なブラウザ機能を定義します。デモに必要なブラウザ機能のみを定義するように注意してください。他のGitHubの例にリストされている機能を使用してこれらを誤って定義する場合、ARアプリが一部のブラウザで動作することを不必要に防ぐことができるためです。たとえば、コンパスポイントに基づいて要素を配置するには、「ジャイロ」機能にアクセスする必要があります。ほとんどのデスクトップブラウザーでは機能しません。このデモではそれを必要としないので、除外します。
  定義されているファイルは、awe.js - lib/awe-standand-dependencies.js、lib/awe-standard.js、lib/awe-standard-window_resized.jsの特定の機能をプルします。 awe.jsの標準的なビットとピースとウィンドウのハンドリングのサイズ変更。デモはマーカーを使用しています。これには、以下にリストされている他の2つのファイルが必要です。
  これらすべてのファイルが正常にロードされたら、適切な名前のsuccess（）awe.js関数を実行します。要素の表示を開始する準備ができたときに常に実行される最初の関数は、awe.jsシーンをセットアップします。

  <span>window.awe.init({
  </span>    <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
  </span>    <span>settings: {
  </span>      <span>container_id: 'container',
  </span>      <span>fps: 30,
  </span>      <span>default_camera_position: { x:0, y:0, z:0 },
  </span>      <span>default_lights: [{
  </span>        <span>id: 'point_light',
  </span>        <span>type: 'point',
  </span>        <span>color: 0xFFFFFF
  </span>      <span>}]
  </span>    <span>},</span>

  awe.jsのすべての要素は、「関心のあるポイント」（POI）内に配置されます。これらは、オブジェクトを内部に配置できる座標を介してマークされたシーン内の特定のポイントです。 awe.js内だけでなく、要素自体もPoisを移動できます。特定の紙マーカーが見られる場所に配置される単一のPOIを作成します。 POIを作成するには、awe.pois.add（）のawe.js関数を使用します。

  「マーカー」のIDを与えましたが、コード内のこのPOIへの他の参照全体で一貫している限り、あなたはそれをあなたが望むものを何でも呼ぶことができます。初期位置を（0,0,10000）に設定し、使用する準備ができるまで少し離れたところに配置します。また、マーカーを見つけるまで目に見えないように設定します。

  ポイに追加する

  <span>window.addEventListener('load', function() {
  </span>    <span>var menu_open = false;
  </span>    
      <span>// Our code continues here
  </span>  <span>});</span>

  要素は、awe.js内の「投影」と呼ばれます。私たちが「ワームホール」と呼んだシーンに追加する最初のプロジェクションは、これはメニュー項目が魔法のように表示される平らな黒い正方形です。 POIのIDと同じように、コード内の他の参照と一致している限り、あなたは絶対に何でも名前を付けることができます。 function awe.projections.add（）を使用してPOIに追加します。
  プロジェクションとして追加できるオブジェクトにはかなりの数のオプションがあるため、詳細に説明します。注意してください - ここでは、ポジショニングと回転のためのすべてのx、y、z値がそのpoiに関連しています。そのpoiは、そのIDによって{poi_id： 'marker'}。

  <span>window.awe.init({
  </span>    <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
  </span>    <span>settings: {
  </span>      <span>container_id: 'container',
  </span>      <span>fps: 30,
  </span>      <span>default_camera_position: { x:0, y:0, z:0 },
  </span>      <span>default_lights: [{
  </span>        <span>id: 'point_light',
  </span>        <span>type: 'point',
  </span>        <span>color: 0xFFFFFF
  </span>      <span>}]
  </span>    <span>},</span>

  ジオメトリ - これは、投影の3.jsジオメトリオプションを指します。各タイプのジオメトリに必要なオプションは、awe.jsで提供されるジオメトリと一致します。たとえば、Three.jsの球体測定は{shape： 'Sphere'、radius：10}として表現されます。現在入手可能なawe.jsの最新の3.jsを使用している人に注意すべきことの1つは、Boxgeometryがまだキューブジオメトリを使用しています。したがって、ボックスを作成するには、フォーマット{shape： 'cube'、x：20、y：30、z：5}を使用します（名前にもかかわらず、「キューブ」である必要はありません）。

  位置 - POIに関連してアイテムのx、y、z軸を調整できます。
  • 回転 - POIに関連して、x、y、z軸でアイテムを回転させることができます。 X軸でワームホールを90度回転させて、テーブルの上に平らになり、Z軸によって45度が自然に見えると思ったので、マーカーとは完全に並んでいないので、対角線上でこれはそれほど明白ではありません。
  • マテリアル - これにより、投影の3.jsマテリアルが定義されます。 「Phong」（Three.jsのMeshphongMaterial）を使用することに固執しましたが、「Lambert」、「Shader」、「Sprite」、「Sprite_Canvas」もオプションとして利用できるように見えます。また、その色を16進数で定義することもできます
  テクスチャ - これはデモでは使用されていませんが、この記事には完全性のために含めたいと思いました。テクスチャを定義するには、テクスチャを含めることができます：{path： 'yourtexturefilename.png'}。
  デモでは、シーンに7つの異なるボックス/キューブを追加します。それぞれが高さ30ピクセルで、Y軸の上に31ピクセル下に配置されているため、元々ワームホールによって隠されています。それらはすべて少し異なる幅です。

  私はそれらをx座標とz座標を介してワームホールの中心から少し戻って動きますが、正直に言うと、-5があなたを悩ませた場合、それらについても0に残っているでしょう。 y軸で45度回転して、ワームホールの上にある素敵な角度で向いているようにしました。

  <span>window.addEventListener('load', function() {
  </span>    <span>var menu_open = false;
  </span>    
      <span>// Our code continues here
  </span>  <span>});</span>

  これらのそれぞれには、「ar_button_ {number}」のIDがあり、数字はメニューボタンのインデックスです。 IFTTTへのHTTP呼び出しでこのIDを使用するので、これらを一貫して正確に保つことが重要です！
  投影が定義された後、ARパズルのかなり重要な部分であるマーカー検出イベントを定義します。これを、wee.events.add（）。
  awe.jsイベントは1つしかないので、ここには1つのイベントだけがあります。イベントは、何でも呼び出すことができるIDで定義されています。 「ar_tracking_marker」と呼びました。適用可能なデバイスの種類を定義します。これは、これまでのすべてのawe.jsの例でも同じように思われます。そのため、PCとAndroidが1に設定されているように、

  <span>window.awe.init({
  </span>    <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
  </span>    <span>settings: {
  </span>      <span>container_id: 'container',
  </span>      <span>fps: 30,
  </span>      <span>default_camera_position: { x:0, y:0, z:0 },
  </span>      <span>default_lights: [{
  </span>        <span>id: 'point_light',
  </span>        <span>type: 'point',
  </span>        <span>color: 0xFFFFFF
  </span>      <span>}]
  </span>    <span>},</span>

  に設定されているように残しました。
  その後、登録（）およびunregister（）関数があり、マーカーを監視しているイベントリスナーを追加および削除します。

  <span>ready: function() {
  </span>    awe<span>.util.require([
  </span>      <span>{
  </span>        <span>capabilities: ['gum','webgl'],</span>

  次に、マーカーを見つけたら実行するイベントハンドラーを定義します。 「64」マーカーに注目し、見つけたときにのみ応答を実行します。

  マーカーを見つけることへの応答の中で、私たちは物理的な紙マーカーで「マーカー」と呼んだPOIをその場に移動し、それを見やすくしたいと考えています。 event.detail ['64 ']を使用して物理マーカーに合わせるように変換します。

  また、「ワームホール」投影を目に見えるように設定します。

  <span>files: [ 
  </span>    <span>['lib/awe-standard-dependencies.js', 'lib/awe-standard.js'],
  </span>    <span>'lib/awe-standard-window_resized.js',
  </span>    <span>'lib/awe-standard-object_clicked.js',
  </span>    <span>'lib/awe-jsartoolkit-dependencies.js',
  </span>    <span>'lib/awe.marker_ar.js'
  </span>  <span>],</span>

  マーカーが表示されないが、メニューが開いている場合は、開いたままにしますが、ワームホールを隠すように設定します。これの主な理由は、いくつかの光の変化があれば、マーカーが判読できなくなる可能性があることです。私たちは、戻る方法なしで特定の色の光に自分自身を閉じ込めたくありません！

  <span>success: function() {
  </span>    <span>window.awe.setup_scene();</span>

  マーカーがなく、メニューが開いていない場合、POI全体が隠れているのを待っています。

  awe<span>.pois.add({id: 'marker', position: {x: 0, y: 0, z: 10000}, visible: false});</span>

  awe.jsにシーンを更新するように言って終了します。

  awe<span>.projections.add({ 
  </span>    <span>id: 'wormhole',
  </span>    <span>geometry: {shape: 'plane', height: 400, width: 400},
  </span>    <span>position: {x: 0, y: 0, z: 0},
  </span>    <span>rotation: {x: 90, z: 45},
  </span>    <span>material: {
  </span>      <span>type: 'phong',
  </span>      <span>color: 0x000000
  </span>    <span>}
  </span>  <span>}, {poi_id: 'marker'});</span>

  設定する実際の機能の最後のビットは、クリックイベントです。これらはすべて、object_clickedイベント内にあります。

  awe<span>.projections.add({
  </span>    <span>id: 'ar_button_one',
  </span>    <span>geometry: {shape: 'cube', x: 60, y: 30, z: 5},
  </span>    <span>rotation: {y: 45},
  </span>    <span>position: {x: -5, y: -31, z: -5},
  </span>    <span>material: {
  </span>      <span>type: 'phong',
  </span>      <span>color: 0xFF0000
  </span>    <span>}
  </span>  <span>}, {poi_id: 'marker'});</span>

  クリックイベントには、e.detail.projection_id内でクリックされた投影のIDが含まれています。スイッチステートメントを使用して、クリックに反応する方法を決定します。ワームホールをクリックして、仮想メニューを開いて閉じます。仮想メニューボタンをクリックすると、明るい色がトリガーされます。各ボタンが同じ応答コードを実行するため、スイッチステートメントを使用します。

  <span>window.addEventListener('load', function() {
  </span>    <span>var menu_open = false;
  </span>    
      <span>// Our code continues here
  </span>  <span>});</span>

  Wormholeクリックイベントをクリックして、menu_openが真かfalsであるかどうかに応じてメニューを開きます。偽の場合は、awe.js awe.projections.update（）関数を使用して、y軸の各ボタンアップを1秒以上アニメーション化します。それはそれをワームホールから上に動かします。各投影の動きの唯一の違いは、各オブジェクトがy軸上でどれだけ移動するかです。

  それ以外の場合は、メニューが開いている場合、ワームホールの下で最初の位置に戻り、視界から隠されています。

  <span>window.awe.init({
  </span>    <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
  </span>    <span>settings: {
  </span>      <span>container_id: 'container',
  </span>      <span>fps: 30,
  </span>      <span>default_camera_position: { x:0, y:0, z:0 },
  </span>      <span>default_lights: [{
  </span>        <span>id: 'point_light',
  </span>        <span>type: 'point',
  </span>        <span>color: 0xFFFFFF
  </span>      <span>}]
  </span>    <span>},</span>

  else他のステートメントの後、私たちはそれが何であるかの反対にmenu_openを切り替えるので、私たちはそれがどこにいるのかを追跡します。

  <span>ready: function() {
  </span>    awe<span>.util.require([
  </span>      <span>{
  </span>        <span>capabilities: ['gum','webgl'],</span>

  ボタンクリックイベント内で、イベント名としてボタンのIDとIFTTTサービスにアクセスするキーを含むIFTTTへのHTTPリクエストを行います。戻ってくるデータは実際には使用していません。デバッグの目的でコンソールにログインしますが、実際の結果は、HTTPコールに反応するIFTTTからの結果が発生します。
  このすべての後、awe.jsが非互換性などのためにロードされない場合、エラーメッセージを表示するためにロードされる代替スクリプトがあります。

  <span>files: [ 
  </span>    <span>['lib/awe-standard-dependencies.js', 'lib/awe-standard.js'],
  </span>    <span>'lib/awe-standard-window_resized.js',
  </span>    <span>'lib/awe-standard-object_clicked.js',
  </span>    <span>'lib/awe-jsartoolkit-dependencies.js',
  </span>    <span>'lib/awe.marker_ar.js'
  </span>  <span>],</span>

  それはhttps time

  です

  <span>success: function() {
  </span>    <span>window.awe.setup_scene();</span>

  2015年後半の更新 - この記事に戻って、かなり重要な情報の新しいビットを追加します。Chromeでは、カメラを使用したWebページがHTTPSで提供されることが必要です。したがって、これを実行しようとする前に、HTTPSを介してサービスを実行する方法を見つける必要があります。これまでにテストに使用した方法の1つは、Ngrokです。これは、LocalHostにHTTPSトンネルを提供できます。 SitePointのどこからでもローカルホストにアクセスするガイドがあります。

  アクションのデモ

  awe<span>.pois.add({id: 'marker', position: {x: 0, y: 0, z: 10000}, visible: false});</span>

  このコードをGoogle Chromeでモバイル用に実行し、マーカーに向けると、ワームホールが表示されるはずです。
  ワームホールをクリックすると、メニューボタンは正しいスポットにアニメーション化する必要があります。
  メニュー項目のいずれかをクリックすると…

  lifxライトの色を変更するはずです！

  

  結論

  それは、awe.jsを使用してブラウザで拡張現実を始めるためにあなたが知っておくべきすべてのものです。最近のテクノロジーの世界で多くの開発が行っているように、それは多くの可能性を秘めています！ AWE.JSチームは常にプラグインに取り組んでおり、近日公開予定の新しい、さらに完全に機能するバージョンが必要です！また、Google Cardboardで使用するために3.JSの立体効果を設定し、AWE.JSのいくつかの機能と組み合わせてARヘッドセットエクスペリエンスを構築することも可能です。私はそれが1つの記事にとって少しかもしれないと思ったので、その記事に関する将来の記事に注目してください！

  このコードを使用してARマジックを試したり、さらに進めたりする場合は、コメントにメモを残すか、Twitter（@ThatPatrickGuy）で私と連絡を取ります。

  awe.jsを使用したブラウザの拡張現実に関するよくある質問
  awe.jsは機能とパフォーマンスの点でar.jsとどのように異なりますか？
  awe.jsとar.jsはどちらもブラウザで拡張現実体験を作成するための強力なツールです。ただし、いくつかの点で異なります。 AWE.JSは、没入型ARエクスペリエンスを作成するための幅広い機能を提供する、より包括的なフレームワークです。 GPS、コンパス、ジャイロスコープトラッキングなど、複数の追跡方法をサポートし、3Dモデルもサポートしています。一方、AR.JSはマーカーベースの追跡により焦点を合わせており、その高性能と効率で知られています。また、初心者には使いやすいですが、awe.jsと同じレベルの柔軟性を提供しない場合があります。 awe.jsを使用して、AR Webアプリを開発できます。 awe.jsは、追加のプラグインやダウンロードを必要とせずに、ブラウザでARエクスペリエンスを直接作成できるJavaScriptライブラリです。これにより、WebベースのARアプリケーションの開発に最適です。これを使用して、単純な2Dオーバーレイから複雑な3Dシーンまで、幅広いARエクスペリエンスを作成できます。 JS、まず公式のGithubリポジトリからライブラリをダウンロードする必要があります。それを完了したら、JavaScriptコードを書くことでARシーンの作成を開始できます。 awe.jsは、オブジェクトの作成、カメラの制御、ユーザー入力の処理など、ARエクスペリエンスを制御するために使用できるさまざまなAPIと機能を提供します。

  awe.jsを使用して構築できるアプリケーションの例は何ですか？たとえば、ARツアーガイドアプリを作成するために使用できます。ユーザーは、さまざまなランドマークで携帯電話を向けて情報を入手できます。また、ユーザーが現実世界の仮想オブジェクトと対話できるARゲームを作成するために使用することもできます。他の可能なアプリケーションには、ARショッピングアプリ、AR教育アプリなどが含まれます。可能。ただし、WebGLやWeBRTCなどの高度なWebテクノロジーを使用しているため、これらのテクノロジーをサポートしていない古いブラウザーでは機能しない可能性があります。最良の結果を得るには、Chrome、Firefox、Safariなどのモダンで最新のブラウザでawe.jsを使用することをお勧めします。はい、はい、他のJavaScriptライブラリまたはフレームワークと一緒にawe.jsを使用できます。 AWE.JSは柔軟でモジュール式になるように設計されているため、既存のJavaScriptプロジェクトに簡単に統合できます。ただし、awe.jsの一部の機能は特定のライブラリやフレームワークと互換性がない場合があるため、コードを徹底的にテストすることをお勧めします。

  awe.jsで問題が発生している場合は、助けを求めることができるいくつかのリソースがあります。 awe.jsの公式Githubリポジトリには、ライブラリのすべての側面をカバーする包括的なドキュメントが含まれています。 GitHubの問題トラッカーをチェックして、他の誰かが同じ問題に遭遇したかどうかを確認することもできます。そこに解決策が見つからない場合は、Stack Overflowまたは他のオンライン開発者コミュニティでヘルプを求めてみてください。オープンソースプロジェクト。これは、ライセンスの条件に準拠している限り、コードを自由に使用、変更、および配布できることを意味します。 awe.jsのソースコードはGithubで入手できます。そのため、バグレポートを提出したり、新機能を提案したり、独自のコードを送信したりすることで、プロジェクトに貢献することもできます。 .js？

  オープンソースプロジェクトとして、awe.jsは主にユーザーと開発者のコ​​ミュニティによってサポートされています。 awe.jsのサポートが必要な場合は、プロジェクトのgithubページまたは他のオンライン開発者コミュニティでサポートを求めることができます。また、awe.jsを始めるのに役立つオンラインで利用可能な多くのチュートリアルやガイドもあります。

  awe.jsプロジェクトに貢献するにはどうすればよいですか？

  awe.jsプロジェクトに貢献する方法はたくさんあります。開発者の場合は、バグレポートを送信したり、新機能を提案したり、コードを書いたりすることで貢献できます。開発者でない場合でも、ドキュメントを作成したり、チュートリアルを作成したり、awe.jsについての言葉を広めるのを手伝っても貢献できます。どんな貢献も大歓迎であり、awe.jsをすべての人にとってより良いツールにするのに役立ちます。

以上がawe.jsを使用したブラウザの拡張現実の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。