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
  • Topics

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

    • ネットワーキング
    • VR & AR (WebXR)
    • HTMLからNeedle Engineを直接使用する
    • Editor Sync
  • Troubleshooting

    • デバッグの方法
    • よくある質問(FAQ)💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Needle Engineでのスクリプティング
    • Scripting Introduction for Unity Developers
    • Needleコアコンポーネント
    • Everywhere Actions
  • Components and Lifecycle

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

    • <needle-engine> 設定
    • needle.config.json
    • 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
  • Topics

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

    • ネットワーキング
    • VR & AR (WebXR)
    • HTMLからNeedle Engineを直接使用する
    • Editor Sync
  • Troubleshooting

    • デバッグの方法
    • よくある質問(FAQ)💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Needle Engineでのスクリプティング
    • Scripting Introduction for Unity Developers
    • Needleコアコンポーネント
    • Everywhere Actions
  • Components and Lifecycle

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

    • <needle-engine> 設定
    • needle.config.json
    • 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

    • Webプロジェクトの構造
    • Everywhere Actions
    • glTFへのアセットのエクスポート
    • フレームワーク、バンドラー、HTML
    • ローカルデバイスでのテスト
    • デプロイと最適化
    • デバッグの方法
    • よくある質問(FAQ)💡
  • Scripting

    • Needle Engineでのスクリプティング
    • Scripting Introduction for Unity Developers
    • Creating and using Components
    • 自動コンポーネント生成
    • Scripting Examples
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • ネットワーキング
    • Editor Sync
  • Reference

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

アセット、アニメーション、Prefab、マテリアル、ライトマップなどのエクスポート

UnityシーンにExportInfoコンポーネントを追加すると、テンプレートから新しいWebプロジェクトを生成したり、エクスポートしたい既存のWebプロジェクトにリンクしたり、他のライブラリやパッケージへの依存関係を設定したり、プロジェクトをデプロイしたりできます。

デフォルトでは、シーンは保存時にエクスポートされます。この設定は、ExportInfoコンポーネントでAuto Exportを無効にすることで変更できます。

📦 glTFファイルのエクスポート

メッシュ、マテリアル、アニメーション、テクスチャなどをエクスポートするには、Hierarchyで新しいGameObjectを作成し、それにGltfObjectコンポーネントを追加します。これが新しいglTFファイルのルートになります。シーンを変更して保存するたびにエクスポートされます。

エクスポートされるのは、これらのルートオブジェクト上および内部のスクリプトとデータのみです。それらの外部にあるスクリプトとデータはエクスポートされません。

ルートオブジェクトの子としてCubeを追加し、シーンを保存します。出力のassets/フォルダ(プロジェクト構造を参照)に、ルートGameObjectと同じ名前の新しい.glbファイルが含まれていることに注意してください。

Smart Export設定(Edit/Project Settings/Needleから)を有効にすると、このオブジェクトのHierarchyで変更が検出された場合にのみエクスポートが行われます。

特定のオブジェクトがエクスポートされないようにする方法

EditorOnlyタグを持つオブジェクトは、その子Hierarchyを含めてエクスポート時に無視されます。 これは、無効化されたオブジェクトが後で有効になった場合でもエクスポートされるため、無効化よりも推奨されます。

遅延読み込みと複数のレベル/シーン

アプリケーションを複数のレベルまたはシーンに分割したい場合は、単純にSceneSwitcherコンポーネントを使用できます。アプリケーションを複数のシーンまたはPrefabに構造化し、それらをSceneSwitcher配列に追加して実行時に読み込み/解放することができます。これは、すべてのコンテンツを最初に読み込むのを避け、読み込み時間を短く保つのに最適な方法です(例えば、needle.toolsでは、Webサイトの各セクションを独自のシーンに分離し、必要なときにのみ読み込むことでこれを行いました)。

推奨されるglTFごとの複雑さ

  • 最大50 MB(非圧縮)のエクスポートサイズ(通常、圧縮後は約10-20 MBになります)
  • 最大50万頂点(モバイルVRもターゲットとする場合はさらに少ない)
  • 最大4x 2kライトマップ

シーンとPrefabを複数のglTFファイルに分割し、必要に応じて(必要なときにのみ)それらを読み込むことができます。これにより、読み込みパフォーマンスが速くなり、ファイルサイズが小さく保たれます。 スクリプトドキュメントのAssetReferenceセクションを参照してください。

ここでのシーンの複雑さは、様々なWeb対応デバイスと帯域幅で良好なパフォーマンスを確保するために推奨されるものです。これには、デバイスの能力を超えた技術的な制限はありません。

Prefab

Prefabは個別のglTFファイルとしてエクスポートされ、実行時にインスタンス化できます。PrefabをglTFとしてエクスポートするには、Prefabアセット(プロジェクトブラウザから、シーン内ではなく)をスクリプトのいずれかから参照するだけです。

Prefabのエクスポートはネストにも対応しています。Prefab内のコンポーネントは別のPrefabを参照でき、それもエクスポートされます。 このメカニズムにより、シーンを可能な限り軽量にし、最も重要なコンテンツを最初に読み込み、追加コンテンツの読み込みを遅延させることができます。

シーンアセット

Prefabアセットと同様に、他のシーンアセットを参照できます。 まず、UnityEditor.SceneAssetフィールドを持つコンポーネントをUnityで作成し、GltfObject内のGameObjectsのいずれかにそれを追加します。参照されたシーンは別のglTFファイルとしてエクスポートされ、TypeScriptからAssetReferenceとして読み込み/デシリアライズできるようになります。

参照されたシーン内で作業を続けながら、メインのエクスポーターシーン/Webサイトを更新することも可能です。シーン保存時またはプレイモード変更時に、現在のシーンが現在実行中のサーバーで使用されているかどうかを検出し、そのglbのみの再エクスポートをトリガーします。(このチェックは名前で行われます - <web_project>/assets/フォルダ内にglbが存在する場合、それは再度エクスポートされ、メインシーンがそれを再読み込みします。)

当社のWebサイトの例では、各セクションが別々のシーンとして設定されており、エクスポート時には複数のglbファイルにパックされ、必要に応じて読み込まれます。

2022-08-22-172605_Needle_Website_-Website-_Windows,_Mac,Linux-_U

カスタムスクリプトからのPrefabまたはシーンの読み込み

スクリプトの1つからPrefabを参照して読み込みたい場合は、AssetReference型を宣言できます。 最小限の例を以下に示します。

import { Behaviour, serializable, AssetReference } from "@needle-tools/engine";

export class MyClass extends Behaviour {

    // if you export a prefab or scene as a reference from Unity you'll get a path to that asset
    // which you can de-serialize to AssetReference for convenient loading
    @serializable(AssetReference)
    myPrefab?: AssetReference;
    
    async start() {
      // directly instantiate
      const myInstance = await this.myPrefab?.instantiate();

      // you can also just load and instantiate later
      // const myInstance = await this.myPrefab.loadAssetAsync();
      // this.gameObject.add(myInstance)
      // this is useful if you know that you want to load this asset only once because it will not create a copy
      // since ``instantiate()`` does create a copy of the asset after loading it
    }  
}

🏇 アニメーションのエクスポート

Needle Engineは、Unityのアニメーション機能のかなり強力なサブセットをサポートしています:

  • Timeline アクティベーショントラック、アニメーションラッグ、トラックオフセットを含む
  • Animator トップレベルの状態遷移を含む
    • Blend treesは現在サポートされていません。
    • サブステートマシンは現在サポートされていません。
  • AnimationClips ループモードを含む
  • Procedural Animations スクリプトを介して作成できます

Needle Engineは、新しいglTF拡張機能KHR_ANIMATION_POINTERをサポートする最初期のものの1つです。 これは、スクリプト変数を含むほぼすべてのプロパティがアニメーション可能であることを意味します。

現在の1つの制限は、エクスポート時にマテリアルが複製されないことです。例えば、同じマテリアルを異なる色でアニメーションさせたい場合は、現在マテリアルを2つに分割する必要があります。

🌍 Skyboxのエクスポート

UnityのSkyboxとカスタムのリフレクション(もしあれば)は、エクスポート時にテクスチャにベイクされ、NEEDLE_lightmaps拡張機能内に自動的にエクスポートされます。

Skyboxの解像度を変更するには、シーンにSkyboxExportSettingsコンポーネントを追加します。

image

glbファイルでSkyboxを全くエクスポートしたくない場合は、GltfObjectコンポーネントのEmbed Skyboxオプションのチェックを外すことができます。

image

✨ マテリアルのエクスポート

Physically Based Materials (PBR)

デフォルトでは、マテリアルはエクスポート時にglTFマテリアルに変換されます。glTFは物理ベースのマテリアルモデルをサポートしており、複雑なマテリアルを表現するのに役立つ多くの拡張機能を持っています。

エクスポートされるものを完全に制御するには、UnityGltfが提供するglTFマテリアルを使用することを強く推奨します。

  • PBRGraph
  • UnlitGraph

迷ったらPBRGraphシェーダーを使用してください

PBRGraphマテリアルには、StandardまたはURP/Litよりもはるかに多くの機能があります。これには、屈折、虹彩、光沢などの高度な機能が含まれます。さらに、PBRGraphおよびUnlitGraphを使用するマテリアルは、変換なしでそのままエクスポートされます。

そのまま変換可能なマテリアル:

  • BiRP/Standard
  • BiRP/Autodesk Interactive
  • BiRP/Unlit
  • URP/Lit
  • URP/Unlit

他のマテリアルは、プロパティ名ヒューリスティクスを使用して変換されます。これは、マテリアルとシェーダーが使用するプロパティ名に応じて、カスタムシェーダーのプロパティをURP/LitまたはPBRGraphのプロパティ名を使用するようにリファクタリングするか、マテリアルをカスタムシェーダーとしてエクスポートする必要がある場合があることを意味します。

カスタムシェーダー

カスタムのUnlitシェーダー(例えばShaderGraphで作られたもの)をエクスポートするには、エクスポートしたいシェーダーにExportShader Asset Labelを追加します。Asset LabelはInspectorウィンドウの下部で確認できます。

2022-08-22-172029_Needle_Website_-CustomShaders-_Windows,_Mac,_Lin

制限

  • 現在、カスタムのUnlitシェーダーのみをサポートしています。Litシェーダーの変換は公式にはサポートされていません。
  • カスタムLitシェーダーは現在実験的です。すべてのレンダリングモードがサポートされているわけではありません。
  • カスタムシェーダーでのシャドウレシービングはサポートされていません。
  • カスタムシェーダーを使用したスキニングメッシュはサポートされていません。
  • Unityからthree.jsおよびglTFに移行する際に複数の座標系の変更があるため、高度なエフェクトを機能させるにはいくつかの変更が必要になる場合があります。エクスポート時にデータを変換しようとしますが、変換が必要なすべてのケースを検出できない場合があります。
    • UnityのUV座標は左下から始まります。glTFでは左上から始まります。
    • glTFでは、X軸の値がUnityと比較して反転します。これは左手系から右手系への座標系変更の一種です。シェーダーで使用されるデータは、正しく表示するためにXで反転する必要がある場合があります。

glTF仕様の一部ではありません

カスタムシェーダーはglTF仕様の公式な一部ではないことに注意してください。カスタムシェーダーの当社の実装では、KHR_techniques_webglと呼ばれる拡張機能を使用しており、WebGLシェーダーコードをglTFファイルに直接保存します。結果として得られるアセットはNeedle Engineベースのビューアでは機能しますが、他のビューアでは正しく表示されない場合があります。

💡 ライトマップのエクスポート

2022-08-22-171650_Needle_-_Google_Chrome

ライトマップをエクスポートするには、Unityでライトマップを生成するだけです。ライトマップは自動的にエクスポートされます。

複数のシーンで作業する場合は、「Auto Generate」を無効にして、ライトマップを明示的にベイクしてください。そうしないと、Unityはシーン変更時に一時的なライトマップを破棄します。

推奨ライトマップ設定

  • Lightmap Encoding: Normal Quality (Project Settings > Playerで調整)
  • Progressive GPU (高速で、通常は小規模シーンで十分な精度)
  • Non-Directional Lightmaps
  • Max Lightmap Size 2k (これより高くすることも可能ですが、ファイルサイズが大きくなることを想定してください)
  • シーンあたり最大4x 2kライトマップ (これより高くすることも可能ですが、ファイルサイズが大きくなることを想定してください)
  • Compress Lightmaps OFF (品質が向上します。そうしないと、エクスポート時に再び圧縮されます)

2022-08-22-171356_Needle_Website_-Lightmaps-_Windows,_Mac,Linux-

ベイクされたオブジェクトと非ベイクされたオブジェクトの混在

Unityがライトと環境を処理する方法と、three.jsがそれを処理する方法の間には、100%のマッピングはありません。例えば、Unityではライトマップされたオブジェクトと非ライトマップされたオブジェクトでコードパスが完全に分かれており(ライトマップされたオブジェクトはすでにマップにベイクされているため、環境光を受け取りません)、three.jsはそのように区別しません。

これは、シーンでベイクされたオブジェクトと非ベイクされたオブジェクトを混在させる場合に、最良の結果を得るために特定の推奨設定があることを意味します。

Environment Lighting: Skybox
Ambient Intensity: 1
Ambient Color: black

2021.3+20220826-175324-SqBL-Unity_pMXa-needle

2020.3+20220826-175514-tnGc-Unity_mycs-needle

シーンにベイクされたオブジェクトがない場合、以下の設定でも正しい結果が得られるはずです。

Environment Lighting: Color
Ambient Color: any

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

Suggest changes
最終更新:: 2025/04/22 17:38
Prev
Everywhere Actions
Next
フレームワーク、バンドラー、HTML