メインコンテンツへスキップ

コーチングオーバーレイ

コーチングオーバーレイは、ユーザーのオンボードと最高のエクスペリエンスを保証することができます。

Absolute Scaleコーチングオーバーレイ

Absolute Scaleコーチング・オーバーレイは、 、スケールを決定するために可能な限り最良のデータを収集できるよう、絶対スケールを体験できるようユーザーを指導する。 コーチングオーバーレイは、開発者が簡単にカスタマイズできるように設計されており、WebAR体験の構築に時間を集中させることが可能です。

プロジェクトでAbsolute Scaleコーチング・オーバーレイを使用する:

  1. プロジェクトを開く
  2. head.htmlに以下のタグを追加します。
<meta name="8thwall:package" content="@8thwall.coaching-overlay">

注意:Self-Hostedプロジェクトの場合、代わりに以下の <script> タグをページに追加することになります:

<script src='https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js'></script>
  1. オプションで、 coaching-overlay コンポーネントのパラメータを以下に定義するようにカスタマイズします。 A-Frame以外のプロジェクトについては、CoachingOverlay.configure() のドキュメントを参照してください。

A-Frameコンポーネントのパラメータ(すべてオプション)

パラメータタイプデフォルト説明
animationColorString'white'コーチングオーバーレイアニメーションの色。 このパラメータは、有効なCSSカラー引数を受け付けます。
promptColorString'white'コーチングオーバーレイの全テキストの色。 このパラメータは、有効なCSSカラー引数を受け付けます。
promptTextString'Move device forward and back'スケールを発生させるために必要な動作を知らせるアニメーション説明文の文字列を設定します。
disablePromptBooleanfalseカスタムオーバーレイにコーチングオーバーレイイベントを使用するために、デフォルトのコーチングオーバーレイを非表示にするにはtrueを設定します。

プロジェクトに合わせたカスタムコーチングオーバーレイの作成

コーチングオーバーレイはパイプラインモジュールとして追加し、非表示にすることができます( disablePromptパラメータを使用)。これにより、コーチングオーバーレイイベントを使用して、カスタムオーバーレイを簡単にトリガーすることができます。

コーチングオーバーレイイベントは、 scaleabsoluteに設定されている場合にのみ発生します。 イベントは、8th Wall カメラのランループによって発せられ、パイプラインモジュール内からリスニングすることができます。 これらのイベントは、以下の通りです:

  • coaching-overlay.show: コーチングオーバーレイが表示されるべき時にイベントがトリガーされます。
  • coaching-overlay.hide: コーチングオーバーレイを非表示にするときに発生するイベントです。

例)ユーザー指定のパラメータを使用したコーチングオーバーレイ

コーチングオーバーレイの例

A-Frameの例(上のスクリーンショット)

<a-scene
coaching-overlay="
animationColor:#E86FFF;
promptText:To generate scale push your phone forward and then pull back;"
xrextras-loading
xrextras-gesture-detector
...
xrweb="scale: absolute;">

非A-Frameの例(上のスクリーンショット)

// ここで設定する
CoachingOverlay.configure({
animationColor: '#E86FFF',
promptText:'To generate scale push your phone forward and then pull back',
})
XR8.addCameraPipelineModules([
XR8.GlTextureRenderer.pipelineModule(),
XR8.Threejs.pipelineModule(),
XR8.XrController.pipelineModule(),
XRExtras.FullWindowCanvas.pipelineModule(),
XRExtras.Loading.pipelineModule(),
XRExtras.RuntimeError.pipelineModule(),
LandingPage.pipelineModule(),
// ここに追加
CoachingOverlay.pipelineModule(),
...
])

A-Frameの例 - コーチングオーバーレイのイベントをリスニング

this.el.sceneEl.addEventListener('coaching-overlay.show', () => {
// Do something
})

this.el.sceneEl.addEventListener('coaching-overlay.hide', () => {
// Do something
})

非A-Frameの例 - コーチングオーバーレイイベントのリスニング

const myShow = () => {
console.log('EXAMPLE: COACHING OVERLAY - SHOW')
}

const myHide = () => {
console.log('EXAMPLE: COACHING OVERLAY - HIDE')
}

const myPipelineModule = {
name: 'my-coaching-overlay',
listeningers:[
{event: 'coaching-overlay.show', process: myShow},
{event: 'coaching-overlay.hide', process: myHide},
],
}

const onxrloaded = () => {
XR8.addCameraPipelineModule(myPipelineModule)
}

window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)

VPSコーチングオーバーレイ

VPSコーチング・オーバーレイは、ユーザーをVPS体験に誘導し、実世界の場所での適切な ローカライズを保証する。 コーチングオーバーレイは、開発者が簡単にカスタマイズできるように設計されており、WebAR体験の構築に時間を割くことができます。

あなたのプロジェクトでVPSコーチング・オーバーレイを使おう:

  1. プロジェクトを開く
  2. head.htmlに以下のタグを追加します。
<meta name="8thwall:package" content="@8thwall.coaching-overlay">

注意:Self-Hostedプロジェクトの場合、代わりに以下の <script> タグをページに追加することになります:

<script src='https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js'></script>
  1. オプションで、 coaching-overlay コンポーネントのパラメータを以下に定義するようにカスタマイズします。 A-Frame以外のプロジェクトについては、VpsCoachingOverlay.configure() のドキュメントを参照してください。

A-Frameコンポーネントのパラメータ(すべてオプション)

パラメータタイプデフォルト説明
wayspot-nameStringコーチングオーバーレイがユーザーを誘導しているウェイスポットの名前です。 ウェイスポット名が指定されていない場合、最も近いプロジェクトのウェイスポットが使用されます。 プロジェクトにプロジェクトウェイスポットがない場合、最も近いウェイスポットを使用します。
hint-imageStringユーザーに表示される画像で、現実の場所への案内をする。 hint-imageが指定されていない場合、ウェイスポットのデフォルト画像が使用されます。 ウェイスポットにデフォルトの画像がない場合、画像は表示されません。 メディアソースには、img id または静的 URL が使用できます。
animation-colorString'#ffffff'コーチングオーバーレイアニメーションの色。 このパラメータは、有効なCSSカラー引数を受け付けます。
animation-durationNumber5000ヒント画像が縮小されるまでの総表示時間(ミリ秒)。
prompt-colorString'#ffffff'コーチングオーバーレイの全テキストの色。 このパラメータは、有効なCSSカラー引数を受け付けます。
prompt-prefixString'Point your camera at'ウェイスポットの名前の上にある、アドバイスされたユーザーアクションのテキスト文字列を設定します。
prompt-suffixString'and move around'ウェイスポットの名前の下にある、アドバイスされたユーザーアクションのテキスト文字列を設定します。
status-textString'Scanning...'ヒント画像が縮小状態のときに、その下に表示されるテキスト文字列を設定する。
disable-promptBooleanfalseカスタムオーバーレイにコーチングオーバーレイイベントを使用するために、デフォルトのコーチングオーバーレイを非表示にするにはtrueを設定します。

プロジェクトに合わせたカスタムコーチングオーバーレイの作成

コーチングオーバーレイはパイプラインモジュールとして追加し、非表示にすることができます( disablePromptパラメータを使用)。これにより、コーチングオーバーレイイベントを使用して、カスタムオーバーレイを簡単にトリガーすることができます。

VPSコーチングオーバーレイイベントは、 enableVpstrueに設定されている場合にのみ発生します。 イベントは、8th Wallカメラのランループから発せられるパイプラインモジュール内からリスニングすることができます。 これらのイベントは以下の通りです:

  • vps-coaching-overlay.show: コーチングオーバーレイが表示されるべきときにイベントがトリガーされます。
  • vps-coaching-overlay.hide: コーチングオーバーレイを非表示にするときにイベントがトリガーされます。

例)ユーザー指定のパラメータを使用したコーチングオーバーレイ

vpsコーチングオーバーレイの例

A-Frameの例(上のスクリーンショット)

<a-scene
vps-coaching-overlay="
prompt-color:#0000FF;
prompt-prefix:Go look for;"
xrextras-loading
xrextras-gesture-detector
...
xrweb="vpsEnabled: true;">

非A-Frameの例(上のスクリーンショット)

// ここで設定
VpsCoachingOverlay.configure({
textColor: '#0000FF',
promptPrefix: 'Go look for',
})
XR8.addCameraPipelineModules([
XR8.GlTextureRenderer.pipelineModule(),
XR8.Threejs.pipelineModule(),
XR8.XrController.pipelineModule()pipelineModule(),
XRExtras.FullWindowCanvas.pipelineModule(),
XRExtras.Loading.pipelineModule(),
XRExtras.RuntimeError.pipelineModule(),
LandingPage.pipelineModule(),
// ここに追加
VpsCoachingOverlay.pipelineModule(),
...
])

AFrameの例 - VPSコーチングオーバーレイのイベントをリスニングする。

this.el.sceneEl.addEventListener('vps-coaching-overlay.show', () => {
// Do something
})

this.el.sceneEl.addEventListener('vps-coaching-overlay.hide', () => {
// Do something
})

非A-Frameの例 - VPSコーチングオーバーレイイベントのリスニング

const myShow = () => {
console.log('EXAMPLE: VPS COACHING OVERLAY - SHOW')
}

const myHide = () => {
console.log('EXAMPLE: VPS COACHING OVERLAY - HIDE')
}

const myPipelineModule = {
name: 'my-coaching-overlay',
listeningers:[
{event: 'vps-coaching-overlay.show', process: myShow},
{event: 'vps-coaching-overlay.hide', process: myHide},
],
}

const onxrloaded = () => {
XR8.addCameraPipelineModule(myPipelineModule)
}

window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)

Sky Effectsコーチングオーバーレイ

Sky Effectコーチング・オーバーレイは、ユーザーが デバイスを空に向けていることを確認し、Sky Effect体験に誘う。 コーチングオーバーレイは、開発者が簡単にカスタマイズできるように設計されています。WebAR体験の構築に時間を割くことができます。

プロジェクトでSky Effectsコーチングオーバーレイを使う

  1. プロジェクトを開く
  2. head.htmlに以下のタグを追加します。
<meta name="8thwall:package" content="@8thwall.coaching-overlay">

注:Self-Hostedプロジェクトの場合、代わりに以下の <script> タグをページに追加することになります:

<script src='https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js'></script>
  1. オプションとして、以下に定義するように、 sky-coaching-overlay コンポーネントのパラメータをカスタマイズしてください。 A-Frame以外のプロジェクトについては SkyCoachingOverlay.configure() ドキュメントを参照してください。

A-Frameコンポーネントのパラメータ(すべてオプション)

パラメータタイプデフォルト説明
animationColorString'white'コーチングオーバーレイアニメーションの色。 このパラメータは、有効なCSSカラー引数を受け付けます。
promptColorString'white'コーチングオーバーレイの全テキストの色。 このパラメータは、有効なCSSカラー引数を受け付けます。
promptTextString'Point your phone towards the sky'ユーザーに必要な動きを知らせるアニメーション説明文の文字列を設定します。
disablePromptBooleanfalseカスタムオーバーレイにコーチングオーバーレイイベントを使用するために、デフォルトのコーチングオーバーレイを非表示にするにはtrueを設定します。
autoByThresholdBooleantrue空のピクセルが hideThreshold / showThresholdを超えるか超えないかの割合に基づき、オーバーレイを自動的に表示/非表示します。
showThresholdNumber0.1空のピクセルの割合がこの閾値を下回る場合、現在非表示のオーバーレイを表示します。
hideThresholdNumber0.05空のピクセルの割合がこの閾値を超えた場合、現在表示されているオーバーレイを非表示にします。

プロジェクトに合わせたカスタムコーチングオーバーレイの作成

Skyコーチングオーバーレイはパイプラインモジュールとして追加し、非表示にすることができます( disablePrompt パラメータを使用)。これにより、コーチングオーバーレイイベントを使用して、カスタムオーバーレイを簡単にトリガーできます。

  • sky-coaching-overlay.show: コーチングオーバーレイが表示されるべきときにイベントがトリガーされます。
  • sky-coaching-overlay.hide: コーチングオーバーレイを非表示にするときに発生するイベントです。

SkyCoachingOverlay.control

デフォルトでは、Sky Effectsコーチングオーバーレイは、ユーザーが空を見ているかどうかによって、コーチングオーバーレイの表示と非表示を自動的に行います。 SkyCoachingOverlay.controlを使用することで、この動作を制御することができます。

// コーチングオーバーレイを表示
SkyCoachingOverlay.control.show()
// コーチングオーバーレイを隠す
SkyCoachingOverlay.control.hide()
// スカイコーチングオーバーレイを自動的に表示/非表示するようにする。
SkyCoachingOverlay.control.setAutoShowHide(true)
// スカイコーチングオーバーレイが自動的に表示/非表示にならないようにする。
SkyCoachingOverlay.control.setAutoShowHide(false)
// コーチングオーバーレイを非表示にしてクリーンアップする
SkyCoachingOverlay.control.cleanup()

例えば、体験の一部でユーザーが空を見る必要がなくなるかもしれません。 setAutoShowHide(false)を呼び出さないと、UIの上にコーチングのオーバーレイが表示されます。 この場合、 setAutoShowHide(false)を呼び出し、 show()hide()を使って手動で表示と非表示を制御します。 あるいは、ユーザーにもう一度空を見てもらう準備ができたら、setAutoShowHide(true).

例)ユーザー指定パラメータによるSkyコーチングオーバーレイ

skyコーチングオーバーレイの例

A-Frameの例(上のスクリーンショット)

<a-scene
...
xrlayers="cameraDirection: back;"
sky-coaching-overlay="
animationColor:#E86FFF;
promptText:Look at the sky!;"
...
renderer="colorManagement: true"
>

非A-Frameの例(上のスクリーンショット)

// ここで設定
SkyCoachingOverlay.configure({
animationColor: '#E86FFF',
promptText: 'Look at sky!!!',
})
XR8.addCameraPipelineModules([ // カメラパイプライン・モジュールを追加する。
// 既存のパイプラインモジュール。
XR8.GlTextureRenderer.pipelineModule(), // カメラフィードを描画します。
XR8.Threejs.pipelineModule(), // Skyシーンと同様にThreeJSのARシーンを作成する。
window.LandingPage.pipelineModule(), // 未対応のブラウザを検出し、ヒントを与える。
XRExtras.FullWindowCanvas.pipelineModule(), // Canvasをウィンドウいっぱいにするように変更する。
XRExtras.Loading.pipelineModule(), // 起動時のローディング画面を管理する。
XRExtras.RuntimeError.pipelineModule(), // ランタイムエラー時にエラー画像を表示する。

// Skyセグメンテーションを有効にします。
XR8.LayersController.pipelineModule(),
SkyCoachingOverlay.pipelineModule(),

...
mySkySampleScenePipelineModule(),
])

XR8.LayersController.configure({layers: {sky: {invertLayerMask: false}}})
XR8.Threejs.configure({layerScenes: ['sky']})

A-Frameの例 - Skyコーチングオーバーレイのイベントをリスニング

this.el.sceneEl.addEventListener('sky-coaching-overlay.show', () => {
// Do something
})

this.el.sceneEl.addEventListener('sky-coaching-overlay.hide', () => {
// Do something
})

非A-Frameの例 - Skyコーチングオーバーレイイベントをリスニング

const myShow = () => {
console.log('EXAMPLE: SKY COACHING OVERLAY - SHOW')
}

const myHide = () => {
console.log('EXAMPLE: SKY COACHING OVERLAY - HIDE')
}

const myPipelineModule = {
name: 'my-sky-coaching-overlay',
listeningers:[
{event: 'sky-coaching-overlay.show', process: myShow},
{event: 'sky-coaching-overlay.hide', process: myHide},
],
}

const onxrloaded = () => {
XR8.addCameraPipelineModule(myPipelineModule)
}

window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)

Hand Tracking コーチング オーバーレイ

Hand Trackingコーチング・オーバーレイは、ユーザーが スマートフォンを手に向けていることを確認し、Hand Trackingを体験できるようにする。 コーチングオーバーレイは、開発者が簡単にカスタマイズできるように設計されています。WebAR体験の構築に時間を割くことができます。

プロジェクトでハンド・トラッキング・コーチング・オーバーレイを使用する

  1. プロジェクトを開く
  2. head.htmlに以下のタグを追加します。
<meta name="8thwall:package" content="@8thwall.coaching-overlay">

注:Self-Hostedプロジェクトの場合、代わりに以下の <script> タグをページに追加することになります:

<script src='https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js'></script>
  1. オプションとして、 hand-coaching-overlay コンポーネントのパラメータを以下の定義に従ってカスタマイズします。 A-Frame以外のプロジェクトについては ドキュメントHandCoachingOverlay.configure() を参照してください。

A-Frameコンポーネントのパラメータ(すべてオプション)

パラメータータイプデフォルト説明
animationColorString'white'コーチングオーバーレイのアニメーションの色。 このパラメータは有効な CSS カラー引数を受け取ります。
promptColorString'white'コーチングオーバーレイの全テキストの色。 このパラメータは有効な CSS カラー引数を受け取ります。
promptTextString'Point your phone towards your hand'ユーザーに必要な動きを知らせるアニメーション説明文の文字列を設定します。
disablePromptBooleanfalseカスタムオーバーレイにコーチングオーバーレイイベントを使用するために、デフォルトのコーチングオーバーレイを非表示にするにはtrueを設定します。

プロジェクトに合わせたカスタムコーチングオーバーレイの作成

ハンドコーチングオーバーレイは、パイプラインモジュールとして追加し、非表示にすることができます。( disablePrompt パラメータを使用)これにより、簡単にコーチングオーバーレイイベントを使用して、カスタムオーバーレイを呼び出すことができます。

  • hand-coaching-overlay.show: コーチングオーバーレイが表示されるべき時にイベントがトリガーされます。
  • hand-coaching-overlay.hide: コーチングオーバーレイを非表示にするときにイベントが呼び出されます。

例 - ユーザー指定のパラメーターによるハンド・コーチング・オーバーレイ

ハンドコーチングのオーバーレイの例

A-Frameの例(上のスクリーンショット)

<a-scene
...
xrhand="allowedDevices:any; cameraDirection:back;"
hand-coaching-overlay="
animationColor:#E86FFF;
promptText:Point the phone at your left hand!;"
...
renderer="colorManagement: true"
>

A-Frame以外の例(上のスクリーンショット)

// ここで設定
HandCoachingOverlay.configure({
animationColor: '#E86FFF',
promptText:'Point the phone at your left hand!',
})
XR8.addCameraPipelineModules([ // カメラパイプラインモジュールを追加します。
// 既存のパイプラインモジュールです。
XR8.GlTextureRenderer.pipelineModule(), // カメラフィードを描画します。
XR8.Threejs.pipelineModule(), // Skyシーンと同様にThreeJSのARシーンを作成する。
window.LandingPage.pipelineModule(), // 未対応のブラウザを検出し、ヒントを与える。
XRExtras.FullWindowCanvas.pipelineModule(), // Canvasをウィンドウいっぱいにするように変更する。
XRExtras.Loading.pipelineModule(), // 起動時のローディング画面を管理する。
XRExtras.RuntimeError.pipelineModule(), // ランタイムエラー時にエラー画像を表示する。

// Hand Trackingを有効にする。
XR8.HandController.pipelineModule(),
HandCoachingOverlay.pipelineModule(),

...
myHandSampleScenePipelineModule(),
])

AFrameの例 - ハンドコーチングのオーバーレイイベントを聴く

this.el.sceneEl.addEventListener('hand-coaching-overlay.show', () => {
// 何かをする
})

this.el.sceneEl.addEventListener('hand-coaching-overlay.hide', () => {
// 何かをする
})

AFrame以外の例 - ハンドコーチングのオーバーレイイベントを聴く

const myShow = () => {
console.log('EXAMPLE: HAND COACHING OVERLAY - SHOW')
}

const myHide = () => {
console.log('EXAMPLE: HAND COACHING OVERLAY - HIDE')
}

const myPipelineModule = {
name: 'my-hand-coaching-overlay',
listeners:[
{event: 'hand-coaching-overlay.show', process: myShow},
{event: 'hand-coaching-overlay.hide', process: myHide},
],
}

const onxrloaded = () => {
XR8.addCameraPipelineModule(myPipelineModule)
}

window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)