Needle Engine ドキュメント
Downloads
  • What is Needle Engine?
  • お客様の声
  • Get an overview

    • Samples and Showcase
    • 私たちのビジョン 🔮
    • 機能概要
    • 技術概要
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Unity用Needle Engine
    • Blender 用 Needle Engine
    • Web ComponentとしてのNeedle Engine
    • ウェブサイトでのNeedle Engine
    • Needle Cloud
  • Core Concepts

    • Needle Engineプロジェクトの構造
    • Everywhere Actions
    • glTFへのアセットのエクスポート
    • フレームワーク、バンドラー、HTML
    • ローカルデバイスでのテスト
    • デプロイと最適化
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • ネットワーキング
    • MaterialX
    • Editor Sync
  • Troubleshooting

    • デバッグの方法
    • よくある質問(FAQ)💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Needle Engineでのスクリプティング
    • Unity開発者向けスクリプト入門
    • Needleコアコンポーネント
    • Everywhere Actions
  • Components and Lifecycle

    • コンポーネントの作成と使用
    • @serializable およびその他のデコレーター
    • 自動コンポーネント生成
    • Scripting Examples
    • Community Contributions
    • 追加モジュール
  • Settings and APIs

    • <needle-engine> 設定
    • /lang/ja/reference/needle-config-json.html
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
Downloads
  • What is Needle Engine?
  • お客様の声
  • Get an overview

    • Samples and Showcase
    • 私たちのビジョン 🔮
    • 機能概要
    • 技術概要
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Unity用Needle Engine
    • Blender 用 Needle Engine
    • Web ComponentとしてのNeedle Engine
    • ウェブサイトでのNeedle Engine
    • Needle Cloud
  • Core Concepts

    • Needle Engineプロジェクトの構造
    • Everywhere Actions
    • glTFへのアセットのエクスポート
    • フレームワーク、バンドラー、HTML
    • ローカルデバイスでのテスト
    • デプロイと最適化
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • ネットワーキング
    • MaterialX
    • Editor Sync
  • Troubleshooting

    • デバッグの方法
    • よくある質問(FAQ)💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Needle Engineでのスクリプティング
    • Unity開発者向けスクリプト入門
    • Needleコアコンポーネント
    • Everywhere Actions
  • Components and Lifecycle

    • コンポーネントの作成と使用
    • @serializable およびその他のデコレーター
    • 自動コンポーネント生成
    • Scripting Examples
    • Community Contributions
    • 追加モジュール
  • Settings and APIs

    • <needle-engine> 設定
    • /lang/ja/reference/needle-config-json.html
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
  • Getting Started

    • Downloads
    • Needle Engine for Unity
    • Needle Engine for Blender
    • Needle Engine as Web Component
    • Needle Engine on your Website
    • Needle Cloud
    • Custom integrations
    • Support and Community
  • Core Concepts

    • Needle Engineプロジェクトの構造
    • Everywhere Actions
    • glTFへのアセットのエクスポート
    • フレームワーク、バンドラー、HTML
    • ローカルデバイスでのテスト
    • デプロイと最適化
  • Scripting

    • Needle Engineでのスクリプティング
    • Unity開発者向けスクリプト入門
    • コンポーネントの作成と使用
    • 自動コンポーネント生成
    • Scripting Examples
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • ネットワーキング
    • MaterialX
    • Editor Sync
  • Troubleshooting

    • デバッグの方法
    • よくある質問(FAQ)💡
    • Support and Community
  • Reference

    • 機能概要
    • 技術概要
    • Needleコアコンポーネント
    • /lang/ja/reference/needle-config-json.html
    • <needle-engine> 設定
    • @serializable およびその他のデコレーター

サポートされているデバイス

Needle Engineは、ARおよびVRを含む完全なWebXR仕様をサポートしています。WebXRは、没入型体験をWebにもたらす公式のWeb標準であり、Webのすべての利点があります。インストール、アプリストア、SDKは必要ありません。

ブラウザを搭載したすべてのデバイスは、Needleで作成されたアプリを実行できます。ブラウザがWebXRをサポートしている場合、アプリはNeedle Engineに組み込まれているコンポーネントを使用して、XRでも自動的に動作します。これには、デスクトップブラウザ、モバイルブラウザ、多くのAR/VRヘッドセット上のブラウザだけでなく、Looking Glassディスプレイ、スマートグラスなどの他の新しいテクノロジーも含まれます。

USDZ/QuickLookによるアプリ不要のiOS ARサポート

iOSデバイスはまだ公式のWebXRサポートを持っていませんが、NeedleはEverywhere Actionsを使用してiOS上でAR体験を作成することをサポートしています。iOSセクションで詳細を確認してください。Appleが設定している制限があっても、iOSデバイス上でシームレスにARで動作する、リッチでインタラクティブな体験を作成できます。

iOSでARモードに入ると、Needleは自動的にシーンをUSDZファイルに変換し、AppleのQuickLookを使用してARで表示されます。オブジェクト、マテリアル、オーディオ、アニメーション、Everywhere Actionsは保持されます。

以下の表は、Needle Engineで動作することが確認されたデバイスの一部をリストしています。 WebXRをサポートする新しいデバイスが登場すると、すぐにアプリで動作します。これは、ブラウザをプラットフォームとして使用する大きな利点の1つです。互換性は特定のデバイスやSDKのセットに限定されません。

ヘッドセットデバイスブラウザ注記
Apple Vision Pro✔️ Safariハンドトラッキング、トランジェントポインターのサポート
Meta Quest 3✔️ Meta Browserハンドトラッキング、sessiongranted1のサポート、パススルー、深度センサー、メッシュトラッキング
Meta Quest 3S✔️ Meta Browserハンドトラッキング、sessiongranted1のサポート、パススルー、深度センサー、メッシュトラッキング
Meta Quest 2✔️ Meta Browserハンドトラッキング、sessiongranted1のサポート、パススルー(白黒)
Meta Quest 1✔️ Meta Browserハンドトラッキング、sessiongranted1のサポート
Meta Quest Pro✔️ Meta Browserハンドトラッキング、sessiongranted1のサポート、パススルー
Pico Neo 4✔️ Pico Browserパススルー、ハンドトラッキング2
Pico Neo 3✔️ Pico Browserハンドトラッキングなし、コントローラーのサムスティックが反転
Oculus Rift 1/2✔️ Chrome
Valve Index✔️ Chrome
HTC Vive✔️ Chrome
Hololens 2✔️ Edgeハンドトラッキング、ARおよびVRのサポート(VRモードでは背景もレンダリングされます)
モバイルデバイスブラウザ注記
Android 10+✔️ Chrome
Android 10+✔️ Firefox
iOS 15+(✔️)3 Safari
(✔️)3 Chrome
フルコードサポートなし、ただしNeedle Everywhere Actionsが動的でインタラクティブなUSDZファイル作成をサポートしています。
iOS 15+✔️ WebXR Viewerブラウザは現在少し古くなっています
Hololens 2✔️ Edge
Hololens 1❌WebXRサポートなし
Magic Leap 2✔️
Magic Leap 1✔️非推奨デバイス
その他のデバイスブラウザ注記
Looking Glass ホログラフィックディスプレイ✔️ ChromeLooking Glass bridgeと一部のカスタムコードが必要です、サンプルを参照してください
Logitech MX Ink✔️ Meta Browser公式にサポートされています。ドキュメントを参照してください

1: ブラウザフラグを有効にする必要があります: chrome://flags/#webxr-navigation-permission
2: 開発者設定でトグルを有効にする必要があります
3: Everywhere Actions または その他のアプローチ を使用します

VR、AR、およびQuickLookの例

Needle Engine Samplesにアクセスして、多くのインタラクティブな例を今すぐ試してみてください。または、以下のQR Code(電話用)またはOpen on Quest(Meta Questヘッドセット用)ボタンをクリックして、お使いのデバイスでライブで試してみてください。

シーンにVRおよびAR機能を追加する

Needle EngineのAR、VR、およびネットワーキング機能はモジュラー型に設計されています。それらのいずれもサポートしないことも、特定の機能のみを追加することも選択できます。

基本機能

  1. ARとVRを有効にする
    WebXRコンポーネントを追加します。
    オプション: アバター Prefab を参照してカスタムアバターを設定できます。
    デフォルトでは、基本的なDefaultAvatarが割り当てられています。

  2. テレポートを有効にする
    テレポート可能なオブジェクト階層にTeleportTargetコンポーネントを追加します。
    特定のオブジェクトを除外するには、そのレイヤーをIgnoreRaycastingに設定します。

マルチプレイヤー

  1. ネットワーキングを有効にする
    SyncedRoomコンポーネントを追加します。

  2. デスクトップビューアの同期を有効にする
    SyncedCameraコンポーネントを追加します。

  3. ボイスチャットを有効にする
    VoIPコンポーネントを追加します。

シーン構造

これらのコンポーネントは、階層内のどこにでも配置できます。これらはすべて同じGameObjectに配置することも一般的です。

Castle Builder は、クロスプラットフォームのマルチプレイヤーサンドボックス体験のために上記のすべてを使用しています。
— #madebyneedle 💚

特殊なARコンポーネント

  1. ARセッションのルートとスケールを定義する
    ルートオブジェクトにWebARSessionRootコンポーネントを追加します。AR体験では、シーンを現実世界に合わせてスケーリングしたいことがよくあります。
  2. ARに入るときのシーンに対するユーザーのスケール(< 1で縮小、> 1で拡大)を定義するユーザーサイズを定義します。

XRでのオブジェクト表示の制御

  1. オブジェクトがBrowser、AR、VR、First Person、Third Personで表示されるかどうかを定義する
    制御したいオブジェクトにXR Flagコンポーネントを追加します。

  2. 必要に応じてドロップダウンのオプションを変更します。
    一般的な使用例は次のとおりです。

    • ARに入るときに床を非表示にする
    • First PersonまたはThird Personビューでアバターのパーツを非表示にする。たとえば、一人称視点では、自分の頭部モデルが見えるべきではありません。

VRワールド間の移動

Needle Engineはsessiongranted状態をサポートしています。これにより、ユーザーは没入型セッションを離れることなく、WebXRアプリケーション間をシームレスに移動できます。つまり、VRまたはARに留まります。

現在、これはOculus Quest 1、2、3のOculus Browserでのみサポートされています。他のプラットフォームでは、ユーザーは現在の没入型セッションから強制終了され、新しいページで再度VRに入る必要があります。
ブラウザフラグを有効にする必要があります: chrome://flags/#webxr-navigation-permission

  • オブジェクトをクリックしてリンクを開く
    非常に簡単に接続されたワールドを構築できるOpenURLコンポーネントを追加します。

スクリプティング

XR用のスクリプティングについては、スクリプティングXRドキュメントで詳細をご覧ください。

アバター

現在、外部アバターシステムの統合はすぐに提供していませんが、アプリケーション固有のアバターやカスタムシステムを作成することは可能です。

  • カスタムアバターを作成する
    • アバターのルートとして空のGameObjectを作成します
    • Headという名前のオブジェクトを追加し、Third Personに設定されたXRFlagを追加します
    • HandLeftとHandRightという名前のオブジェクトを追加します
    • これらのオブジェクトの下にグラフィックスを追加します。

実験的なアバターコンポーネント

より表現力豊かなアバターを構築するための実験的なコンポーネントがいくつかあります。現時点では、これらのコンポーネントは後で変更または削除される可能性があるため、独自のバリアントを作成するために複製することをお勧めします。

20220817-230858-87dG-Unity_PLjQ
基本的な首モデルと手足の制約を持つアバターリグの例

  • ランダムプレイヤーカラー
    アバターのカスタマイズの例として、レンダラーにPlayerColorコンポーネントを追加できます。
    このランダム化された色はプレイヤー間で同期されます。

  • 目の回転
    AvatarEyeLook_Rotationは、他のアバターとランダムなターゲットを追跡するようにGameObject(目)を回転させます。このコンポーネントはプレイヤー間で同期されます。

  • まばたき
    AvatarBlink_Simpleは、数秒ごとにGameObject(目)をランダムに非表示にし、まばたきをエミュレートします。

    image
    アバターPrefab階層の例

  • オフセット制約
    OffsetConstraintを使用すると、アバター空間内の別のオブジェクトに対してオブジェクトをシフトできます。これにより、例えば、BodyがHeadに追従しながらも回転を水平に保つことができます。また、簡単な首モデルを構築することも可能です。

  • 手足の制約
    BasicIKConstraintは、2つのトランスフォームとヒントを受け取る非常にミニマルな制約です。これは、簡単な腕または脚のチェーンを構築するのに役立ちます。現在回転が適切に実装されていないため、腕や脚が「正しく見える」ためには、回転対称である必要がある場合があります。「Basic」と呼ばれるのはそのためです!

ARでのHTMLコンテンツオーバーレイ

クライアントが通常のブラウザを使用しているか、ARまたはVRを使用しているかに応じて、異なるHTMLコンテンツを表示したい場合は、HTMLクラスのセットを使用するだけです。
これはHTML要素クラスによって制御されます。例えば、コンテンツをデスクトップとARで表示するには、<needle-engine>タグ内に<div class="desktop ar"> ... </div>を追加します。

<needle-engine>
    <div class="desktop ar" style="pointer-events:none;">
        <div class="positioning-container">
          <p>ARとデスクトップ用のコンテンツはここにあります</p>
          <p class="only-in-ar">これはARでのみ表示されます</p>
        <div>
    </div>
</needle-engine>

コンテンツオーバーレイは、オプションのdom-overlay機能を使用して実装されており、通常、画面ベースのARデバイス(電話、タブレット)でサポートされています。

.ar-session-activeクラスを使用して、ARセッション中に特定のコンテンツを表示/非表示にします。現時点では、:xr-overlay疑似クラスは使用すべきではありません。なぜなら、これを使用するとMozillaのWebXR Viewerが壊れるためです。

.only-in-ar {
  display: none;
}

.ar-session-active .only-in-ar {
  display:initial;
}

オーバーレイ要素は、適用されたスタイリングに関係なく、XR中は常に全画面で表示されることに注意する価値があります。アイテムを異なるように配置したい場合は、class="ar"要素の_内側_にコンテナを作成する必要があります。

iOSでのARとWebXR

iOSデバイスでのAR体験は、Appleが現在iOSデバイスでWebXRをサポートしていないため、いくらか制限されています。

Needle EngineのEverywhere Actionsは、このギャップを埋めるように設計されており、特定のコンポーネントで構成されたシーンに対して、iOSデバイスに自動的なインタラクティブ機能をもたらします。これらは、WebXRで利用可能な機能のサブセットをサポートしており、例えば空間オーディオ、画像トラッキング、アニメーションなどです。ドキュメントで詳細を確認してください。

QuickLookでのカスタムコードの制限

Appleは、QuickLookで使用できるコンテンツの種類に強力な制限を設けています。したがって、カスタムスクリプトコンポーネントは、iOSでのARでの使用のために自動的に変換することはできません。Everywhere Actions APIを使用して、特定の種類のカスタムコードのサポートを追加することは可能です。

楽器 – WebXRとQuickLookのサポート

以下は、Everywhere Actionsを使用するため、ブラウザとiOSデバイスのARで動作する楽器の例です。 これは、空間オーディオ、アニメーション、およびタップインタラクションを使用しています。

Everywhere ActionsとiOS ARの他のオプション

iOSユーザーをさらに高機能なインタラクティブAR体験に導くための他のオプションもあります。

  1. コンテンツをオンザフライでUSDZファイルとしてエクスポートする。
    これらのファイルは、iOSデバイスでARで表示できます。Everywhere Actionsを含むシーンからエクスポートされた場合、インタラクティビティは同じであり、製品コンフィギュレーター、ナラティブ体験などに十分すぎるほどです。 例としては、Castle Builderがあり、そこで作成されたもの(ライブセッションではなく)をiOSでARで表示できます。

Encryption in Space はこのアプローチを使用しています。プレイヤーは画面上で協力してシーンにテキストを配置し、iOSでARで結果を表示できます。Androidでは、WebXRで直接インタラクトすることもできます。
— Katja Rempelによる#madewithneedle 💚

  1. iOSユーザーをWebXR対応ブラウザに誘導する。 ターゲットオーディエンスによっては、例えばMozillaのWebXR Viewerなど、iOSユーザーをiOSでAR体験ができるWebXR対応ブラウザに誘導することができます。

  2. iOSデバイスでカメラアクセスとカスタムアルゴリズムを使用する。
    カメラ画像のアクセスを要求し、カスタムアルゴリズムを実行してデバイスのポーズを決定することができます。
    現在、これに対する組み込みコンポーネントは提供していませんが、将来試したいライブラリとフレームワークへのいくつかの参照を以下に示します。

    • AR.js (オープンソース)
      • FireDragonGameStudioによる実験的なAR.js統合
    • Mind AR (オープンソース)
    • 8th Wall (商用)

画像トラッキング

Needle Engineは、AndroidでWebXR Image Tracking(ライブデモ)を、iOSでQuickLook Image Trackingをサポートしています。

追加のドキュメントは、WebXR Image Trackingページにあります。

このページはAIによって自動的に翻訳されました

Suggest changes
最終更新: 2025/08/15 8:05
Next
Image Tracking (WebXR)