XR8.AFrame

A-Frame (https://aframe.io) は、バーチャルリアリティ体験の構築のために設計されたWebフレームワークです。 A-Frameプロジェクトに8th Wall Webを追加することで、Web向けの 拡張現実体験を簡単に構築できるようになりました。

A-Frameに8th Wall Webを追加する

Cloud Editor

1. head.htmlに「meta」タグを追加するだけで、プロジェクトに「8-Frame」ライブラリが含まれるようになります。 8th WallのA-Frameベースのテンプレートやセルフホスティングプロジェクトからクローンを作成する場合、すでに含まれているはずです。 また、AppKeyを手動で追加する必要はありません。

<meta name="8thwall:renderer" content="aframe:1.4.1">

セルフホスティング

8th Wall Webは、簡単な手順でA-Frameプロジェクトに追加することができます。

1. 「8-Frame」と呼ばれるA-Frameのわずかに改良されたバージョンを含めます。これにはいくつかの修正が入っており、品質面での問題を解決しています。

<script src="//cdn.8thwall.com/web/aframe/8frame-1.4.1.min.js"></script>

2. ページのHEADに、以下のscriptタグを追加します。 Xの部分をアプリキーに置き換えてください。

<script src="//apps.8thwall.com/xrweb?appKey=XXXXX"></script>

カメラの設定: xrconfig

カメラフィードを設定するには、 xrconfig コンポーネントを a-sceneに追加してください。

<a-scene xrconfig>

xrconfig 属性 (すべてオプション)

コンポーネント	タイプ	デフォルト	説明
cameraDirection	String	'back'	使用したいカメラ。 back または frontから選択してください。 cameraDirection: front; と mirroredDisplay: true; を設定し自撮りモードを使用します。 なお、ワールド・トラッキングは、 cameraDirection: back.` でしかサポートされていません。
allowedDevices	String	'mobile-and-headsets'	対応するデバイスクラス。 'mobile-and-headsets' , 'mobile' , 'any'から選択してください。 'any' を使用すると、ウェブカメラを内蔵または接続したノートPCまたはデスクトップPCタイプのデバイスを有効にすることができます。 ワールドトラッキングは、 'mobile-and-headsets' または mobileでのみサポートされていることにご注意ください。
mirroredDisplay	Boolean	false	true の場合、出力ジオメトリで左右に反転し、カメラフィードの方向を反転します。 'mirroredDisplay: true;' と 'cameraDirection: front;' で自撮りモードにしてください。 ワールド・トラッキング (SLAM) が有効な場合は有効にしないでください。
disableXrTablet	Boolean	false	没入型セッションでタブレットを無効にします。
xrTabletStartsMinimized	Boolean	false	タブレットが最小化されて起動します。
disableDefaultEnvironment	Boolean	false	デフォルトの "void space " 背景を無効にします。
disableDesktopCameraControls	Boolean	false	WASDとマウスによるカメラの視認を無効にする。
disableDesktopTouchEmulation	Boolean	false	デスクトップのフェイクタッチを無効にします。
disableXrTouchEmulation	Boolean	false	シーンとコントローラーのレイキャストに基づいてタッチイベントを発生させない。
disableCameraReparenting	Boolean	false	カメラを無効化 -> コントローラーオブジェクトの移動を無効化
defaultEnvironmentFloorScale	Number	1	床のテクスチャを縮小または拡大させます。
defaultEnvironmentFloorTexture	Asset		タイル張りの代替テクスチャのアセットまたはURLを指定します。
defaultEnvironmentFloorColor	Hex Color	#1A1C2A	床の色を設定します。
defaultEnvironmentFogIntensity	Number	1	霧の濃度を増減します。
defaultEnvironmentSkyTopColor	Hex Color	#BDC0D6	ユーザーの真上にある空の色を設定します。
defaultEnvironmentSkyBottomColor	Hex Color	#1A1C2A	水平線の空の色を設定します。
defaultEnvironmentSkyGradientStrength	Number	1	空のグラデーションがどのようにシャープに遷移するかをコントロールします。

注意事項:

• cameraDirection: xrweb を使用してワールド・トラッキング (SLAM) を行う場合、 バック カメラのみに対応しています。 フロント カメラを使用する場合は、 xrweb の disableWorldTracking: true を設定し、ワールド・トラッキングを無効にする必要があります。

World Tracking、Image Target Tracking、および/または Lightship VPS: xrweb

World Tracking、 Image Target、Lightship VPSをご希望の場合は、 xrweb コンポーネントを a-sceneに追加してください。

<a-scene xrconfig xrweb>

xrweb 属性 (すべてオプション)

コンポーネント	タイプ	デフォルト	説明
scale	String	'responsive'	'responsive' または 'absolute' のいずれか。 'responsive' は、フレーム 1 のカメラが XR8.XrController.updateCameraProjectionMatrix() で定義した原点に位置するように値を返します。. 'absolute' は、カメラ、イメージ・ターゲットなどをメートル単位で返します。 デフォルトは 'responsive' です。 'absolute' を使用する場合、開始ポーズの x-position、z-position、および回転は、 XR8.XrController.updateCameraProjectionMatrix() で設定したパラメータを尊重し、スケールが推定された後に使用します。 y-positionは、カメラの接地面からの物理的な高さに依存します。
disableWorldTracking	Boolean	false	trueの場合、効率化のためにSLAMトラッキングをオフにします。
enableVps	Boolean	false	true の場合、Project Wayspotとメッシュを探します。 返されるメッシュは Project Wayspots と関係なく、Project Wayspots が設定されていなくても返されます。 VPS を有効にすると、 scale と disableWorldTrackingの設定が上書きされます。
projectWayspots	Array	[]	Project Wayspot 名をカンマ区切りの文字列で指定すると、その名前に対してのみローカライズできます。 未設定または空の文字列が渡された場合、近くにあるすべてのProject Wayspotsをローカライズします。

注意事項:

• xrweb と xrface は同時に使用できません。
• xrweb と xrlayers は、同時に使用できません。 その際、 xrconfig を使用する必要があります。
  • ベストプラクティスは、常に xrconfigを使用することです。しかし、 xrface または xrlayers または xrconfig を使用せずに xrweb を使用した場合、 xrconfig は自動的に追加されます。 このとき、 xrweb で設定された属性はすべて、 xrconfigに引き継がれます。
• cameraDirection: ワールド・トラッキング (SLAM)は、 バック カメラにのみ対応しています。 フロント カメラを使用する場合は、 disableWorldTracking: trueを設定してワールド・トラッキングを無効化する必要があります。
• ワールド・トラッキング (SLAM) は、モバイル端末のみ対応しています。

Sky Effects: xrlayers and xrlayerscene

Sky Effectが必要な場合。

1. xrlayers コンポーネントを a-sceneに追加します。
2. xrlayerscene コンポーネントを a-entity に追加し、その a-entityの下に、空にしたいコンテンツを追加します。

<a-scene xrconfig xrlayers>
  <a-entity xrlayerscene="name: sky; edgeSmoothness:0.6; invertLayerMask: true;">
    <!-- Sky Effectのコンテンツをここに追加します。 -->
  </a-entity>
</a-scene>

xrlayers 属性

なし

注意事項:

• xrlayers と xrface は、同時に使用できません。
• xrlayers と xrweb は、同時に使用できます。 その際、 xrconfig を使用する必要があります。
  • ベストプラクティスは、常に xrconfigを使用することです。しかし、 xrface、xrweb または xrconfigを使用せずに xrlayers を使用する場合、 xrconfig は自動的に追加されます。 このとき、 xrweb に設定されていたすべての属性は、 xrconfigに引き継がれます。

xrlayerscene 属性

コンポーネント	タイプ	デフォルト	説明
name	String	''	レイヤー名です。 XR8.LayersController のレイヤーに対応する必要があります。 現時点での対応レイヤーは、 skyのみです。
invertLayerMask	Boolean	false	true の場合、シーン内に配置したコンテンツは空以外の領域に閉じ込められます。 false の場合、シーンに配置したコンテンツが空の部分を覆い隠します。
edgeSmoothness	Number	0	レイヤーのエッジを滑らかにする量を指定します。 0〜1 の間の有効な値です。

Face Effects: xrface

Face Effectのトラッキングが必要な場合は、xrface コンポーネントを a-sceneに追加してください。

<a-scene xrconfig xrface>

xrface 属性

コンポーネント	タイプ	デフォルト	説明
meshGeometry	Array	['face']	カンマ区切りの文字列で、顔メッシュのどの部分に三角形のインデックスが返されるかを設定する。 'face'、'eyes'、 'mouth'の任意の組み合わせが可能です。
maxDetections [Optional]	Number	1	検出する顔の最大数を指定します。 選択できるのは、1、2、3のいずれかです。
uvType [Optional]	String	[XR8.FaceController.UvType.STANDARD]	フェーススキャン、フェースローディングのイベントでどのuvを返すかを指定します。 オプションは以下の通りです： [XR8.FaceController.UvType.STANDARD, XR8.FaceController.UvType.PROJECTED]
enableEars [Optional]	Boolean	false	trueの場合、Face Effectsと同時に耳検出を実行し、耳の取り付けポイントを返す。

注意事項:

• xrface と xrweb は同時に使用できません。
• xrface と xrlayers は、同時に使用できません。
• ベストプラクティスは、常に xrconfigを使うことである。しかし、 xrconfig を使わずに xrface を使うと、 xrconfig が自動的に追加される。 このとき、 xrface に設定されていたすべての属性は、 xrconfigに引き継がれます。

Hand Tracking： xrhand

Hand Trackingが必要な場合は、 a-sceneに xrhand コンポーネントを追加してください：

<a-scene xrconfig xrhand>

xrhand 属性

None

注意事項:

• xrhand と xrweb は同時に使用できません。
• xrhand と xrlayers を同時に使用することはできません。
• xrhand と xrface は同時に使用できない。

関数

関数	説明
xrconfigComponent	AFRAME.registerComponent()で登録可能な、カメラ設定用の A-Frame コンポーネントを作成する。 一般的に直接呼び出す必要はありません。
xrwebComponent	AFRAME.registerComponent()で登録可能な、ワールドトラッキングやイメージターゲットトラッキング用の A-Frame コンポーネントを作成することができます。 一般的に直接呼び出す必要はありません。
xrlayersComponent	AFRAME.registerComponent()で登録可能なレイヤートラッキング用 A-Frame コンポーネントを作成する。 一般的に直接呼び出す必要はありません。
xrfaceComponent	AFRAME.registerComponent()で登録可能な、フェイス・エフェクト トラッキング用の A-Frame コンポーネントを作成する。 一般的に直接呼び出す必要はありません。
xrlayersceneComponent	AFRAME.registerComponent()で登録可能なレイヤーシーンの A-Frame コンポーネントを作成する。 一般的に直接呼び出す必要はありません。

(例) SLAM無効 (デフォルト)

<a-scene xrconfig xrweb>

(例) SLAM無効 (イメージ・ターゲット トラッキングのみ)

<a-scene xrconfig xrweb="disableWorldTracking: true">

(例) VPSを有効にする

<a-scene xrconfig xrweb="enableVps: true; projectWayspots=wayspot1,wayspot2,wayspot3">

(例) フロントカメラ (イメージ・ターゲット トラッキングのみ)

<a-scene xrconfig="cameraDirection: front" xrweb="disableWorldTracking: true">

(例) フロントカメラSky Effect

<a-scene xrconfig="cameraDirection: front" xrlayers>

例）Sky＋SLAM

<a-scene xrconfig xrweb xrlayers>
  <a-entity xrlayerscene="name: sky; edgeSmoothness:0.6; invertLayerMask: true;">
    <!-- ここにスカイ・エフェクトのコンテンツを追加します。 -->
  </a-entity>
</a-scene>

(例) Face Effects

<a-scene xrconfig xrface>

例 - 耳を含むフェイス・エフェクト

<a-scene xrconfig xrface="enableEars:true">

例 - Hand Tracking

<a-scene xrconfig xrhand>