Needle Engine Dokumentation
Downloads
  • What is Needle Engine?
  • Erfahrungsberichte
  • Get an overview

    • Samples and Showcase
    • Unsere Vision 🔮
    • Funktionsübersicht
    • Technischer Überblick
  • Resources

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

    • Needle Engine für Unity
    • Needle Engine für Blender
    • Needle Engine als Web Component
    • Needle Engine auf Ihrer Website
    • Needle Cloud
  • Topics

    • Web-Projektstruktur
    • Everywhere Actions
    • Assets nach glTF exportieren
    • Frameworks, Bundler, HTML
    • Testen auf lokalen Geräten
    • Bereitstellung und Optimierung
  • Advanced

    • Netzwerkfunktionen
    • VR & AR (WebXR)
    • Needle Engine direkt aus HTML verwenden
    • Editor Synchronisierung
  • Troubleshooting

    • Debugging
    • Fragen und Antworten (FAQ) 💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting in Needle Engine
    • Einführung in das Scripting für Unity-Entwickler
    • Needle-Kernkomponenten
    • Everywhere Actions
  • Components and Lifecycle

    • Erstellen und Verwenden von Komponenten
    • @serializable und andere Decorators
    • Automatische Komponenten-Generierung
    • Scripting Beispiele
    • Community Contributions
    • Zusätzliche Module
  • Settings and APIs

    • <needle-engine> Konfiguration
    • 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?
  • Erfahrungsberichte
  • Get an overview

    • Samples and Showcase
    • Unsere Vision 🔮
    • Funktionsübersicht
    • Technischer Überblick
  • Resources

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

    • Needle Engine für Unity
    • Needle Engine für Blender
    • Needle Engine als Web Component
    • Needle Engine auf Ihrer Website
    • Needle Cloud
  • Topics

    • Web-Projektstruktur
    • Everywhere Actions
    • Assets nach glTF exportieren
    • Frameworks, Bundler, HTML
    • Testen auf lokalen Geräten
    • Bereitstellung und Optimierung
  • Advanced

    • Netzwerkfunktionen
    • VR & AR (WebXR)
    • Needle Engine direkt aus HTML verwenden
    • Editor Synchronisierung
  • Troubleshooting

    • Debugging
    • Fragen und Antworten (FAQ) 💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting in Needle Engine
    • Einführung in das Scripting für Unity-Entwickler
    • Needle-Kernkomponenten
    • Everywhere Actions
  • Components and Lifecycle

    • Erstellen und Verwenden von Komponenten
    • @serializable und andere Decorators
    • Automatische Komponenten-Generierung
    • Scripting Beispiele
    • Community Contributions
    • Zusätzliche Module
  • Settings and APIs

    • <needle-engine> Konfiguration
    • 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-Projektstruktur
    • Everywhere Actions
    • Assets nach glTF exportieren
    • Frameworks, Bundler, HTML
    • Testen auf lokalen Geräten
    • Bereitstellung und Optimierung
    • Debugging
    • Fragen und Antworten (FAQ) 💡
  • Scripting

    • Scripting in Needle Engine
    • Einführung in das Scripting für Unity-Entwickler
    • Erstellen und Verwenden von Komponenten
    • Automatische Komponenten-Generierung
    • Scripting Beispiele
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • Netzwerkfunktionen
    • Editor Synchronisierung
  • Reference

    • Funktionsübersicht
    • Technischer Überblick
    • Needle-Kernkomponenten
    • needle.config.json
    • <needle-engine> Konfiguration
    • @serializable und andere Decorators

Assets, Animationen, Prefabs, Materialien, Lightmaps exportieren...

Fügen Sie Ihrer Unity-Szene eine ExportInfo-Komponente hinzu, um ein neues Webprojekt aus einem Template zu generieren, einen Link zu einem vorhandenen Webprojekt herzustellen, in das Sie exportieren möchten, Abhängigkeiten zu anderen Bibliotheken und Paketen einzurichten und Ihr Projekt bereitzustellen.

Standardmäßig wird Ihre Szene beim Speichern exportiert. Diese Einstellung kann geändert werden, indem Auto Export in der ExportInfo-Komponente deaktiviert wird.

📦 glTF-Dateien exportieren

Um Meshes, Materialien, Animationen, Texturen (...) zu exportieren, erstellen Sie ein neues GameObject in Ihrer Hierarchie und fügen Sie ihm eine GltfObject-Komponente hinzu. Dies ist die Wurzel einer neuen glTF-Datei. Sie wird jedes Mal exportiert, wenn Sie eine Änderung an der Szene vornehmen und speichern.

Nur Skripte und Daten auf und innerhalb dieser Wurzelobjekte werden exportiert. Skripte und Daten außerhalb davon werden nicht exportiert.

Fügen Sie Ihrem Wurzelobjekt einen Würfel als Kind hinzu und speichern Sie Ihre Szene. Beachten Sie, dass der Ausgabeordner assets/ (siehe Projektstruktur) nun eine neue .glb-Datei mit demselben Namen wie Ihr Wurzel-GameObject enthält.

Sie können die Einstellung Smart Export (über Edit/Project Settings/Needle) aktivieren, um nur zu exportieren, wenn eine Änderung in der Hierarchie dieses Objekts erkannt wird.

Wie man verhindert, dass bestimmte Objekte exportiert werden

Objekte mit dem Tag EditorOnly werden beim Export ignoriert, einschließlich ihrer Kindhierarchie. Beachten Sie, dass dies dem Deaktivieren von Objekten vorzuziehen ist, da deaktivierte Objekte weiterhin exportiert werden, falls sie später wieder eingeschaltet werden.

Lazy Loading und mehrere Level / Szenen

Wenn Sie Ihre Anwendung in mehrere Level oder Szenen aufteilen möchten, können Sie einfach die Komponente SceneSwitcher verwenden. Sie können Ihre Anwendung dann in mehrere Szenen oder Prefabs strukturieren und diese dem SceneSwitcher-Array hinzufügen, um zur Laufzeit geladen und entladen zu werden. Dies ist eine großartige Möglichkeit, um nicht alle Inhalte auf einmal laden zu müssen und die Ladezeiten gering zu halten (zum Beispiel haben wir das bei needle.tools gemacht, indem wir jeden Abschnitt unserer Website in eine eigene Szene unterteilt und diese nur bei Bedarf geladen haben).

Empfohlene Komplexität pro glTF

  • Max. 50 MB Exportgröße unkomprimiert (endet normalerweise bei ~10-20 MB komprimiert)
  • Max. 500.000 Vertices (weniger, wenn Sie auch mobiles VR anvisieren)
  • Max. 4x 2k Lightmaps

Sie können Szenen und Prefabs in mehrere glTF-Dateien aufteilen und diese dann bei Bedarf laden (nur wenn benötigt). Dies hält die Ladeleistung schnell und die Dateigröße klein. Siehe den Abschnitt AssetReference in den Scripting-Docs.

Die hier empfohlene Szenenkomplexität soll eine gute Leistung auf einer Reihe von webfähigen Geräten und Bandbreiten gewährleisten. Es gibt keine technische Einschränkung darüber hinaus, als die Fähigkeiten Ihres Geräts.

Prefabs

Prefabs können als einzelne glTF-Dateien exportiert und zur Laufzeit instanziiert werden. Um ein Prefab als glTF zu exportieren, referenzieren Sie einfach ein Prefab-Asset (aus dem Projektbrowser und nicht in der Szene) aus einem Ihrer Skripte.

Das Exportieren von Prefabs funktioniert auch mit Verschachtelung: Eine Komponente in einem Prefab kann ein anderes Prefab referenzieren, das dann ebenfalls exportiert wird. Dieser Mechanismus ermöglicht es, Szenen so leichtgewichtig wie möglich zu gestalten und zuerst die wichtigsten Inhalte zu laden und das Laden zusätzlicher Inhalte zu verzögern.

Scene Assets

Ähnlich wie Prefab Assets können Sie andere Scene Assets referenzieren. Erstellen Sie dazu in Unity eine Komponente mit einem Feld UnityEditor.SceneAsset und fügen Sie diese einem Ihrer GameObjects innerhalb eines GltfObject hinzu. Die referenzierte Szene wird nun als separate glTF-Datei exportiert und kann als AssetReference aus TypeScript geladen/deserialisiert werden.

Sie können weiterhin in einer referenzierten Szene arbeiten und Ihre Haupt-Exporter-Szene/Website aktualisieren. Beim Speichern der Szene oder beim Wechsel des Play-Modus erkennen wir, ob die aktuelle Szene von Ihrem derzeit laufenden Server verwendet wird, und lösen dann einen erneuten Export nur für dieses glb aus. (Diese Prüfung erfolgt anhand des Namens - wenn eine glb in Ihrem Ordner <web_project>/assets/ existiert, wird sie erneut exportiert und die Hauptszene lädt sie neu.)

Ein Beispiel auf unserer Website: Jeder Abschnitt ist als separate Szene eingerichtet und wird beim Export in mehrere glb-Dateien gepackt, die wir bei Bedarf laden:

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

Laden eines Prefabs oder einer Szene aus einem benutzerdefinierten Skript

Wenn Sie ein Prefab aus einem Ihrer Skripte referenzieren und laden möchten, können Sie einen Typ AssetReference deklarieren. Hier ist ein minimales Beispiel:

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
    }  
}

🏇 Animationen exportieren

Needle Engine unterstützt eine beträchtliche und leistungsstarke Untermenge von Unitys Animationsfunktionen:

  • Timeline inkl. Aktivierungs-Tracks, Animations-Tracks, Track-Offsets
  • Animator inkl. Übergänge zwischen Top-Level-States
    • Blend Trees werden derzeit nicht unterstützt.
    • Sub State Machines werden derzeit nicht unterstützt.
  • AnimationClips inkl. Loop-Modi
  • Prozedurale Animationen können per Skripting erstellt werden

Needle Engine ist einer der Ersten, die die neue glTF-Extension KHR_ANIMATION_POINTER unterstützen. Das bedeutet, dass fast alle Eigenschaften, einschließlich Skriptvariablen, animierbar sind.

Eine aktuelle Einschränkung ist, dass Materialien beim Export nicht dupliziert werden – wenn Sie dasselbe Material mit unterschiedlichen Farben animieren möchten, müssen Sie das Material derzeit in zwei Teile aufteilen.

🌍 Skybox exportieren

Die Unity Skybox und benutzerdefinierte Reflexionen (falls vorhanden) werden beim Export in eine Textur gebacken und automatisch innerhalb der Extension NEEDLE_lightmaps exportiert.

Um die Skybox-Auflösung zu ändern, können Sie Ihrer Szene eine Komponente SkyboxExportSettings hinzufügen.

image

Wenn Sie nicht möchten, dass die Skybox überhaupt in einer glb-Datei exportiert wird, können Sie die Option Embed Skybox auf Ihrer GltfObject-Komponente deaktivieren.

image

✨ Materialien exportieren

Physically Based Materials (PBR)

Standardmäßig werden Materialien beim Export in glTF-Materialien konvertiert. glTF unterstützt ein physikalisch basiertes Materialmodell und verfügt über eine Reihe von Extensions, die helfen, komplexe Materialien darzustellen.

Für volle Kontrolle darüber, was exportiert wird, wird dringend empfohlen, die von UnityGltf bereitgestellten glTF-Materialien zu verwenden:

  • PBRGraph
  • UnlitGraph

Im Zweifelsfall den PBRGraph Shader verwenden

Das PBRGraph-Material bietet viele Funktionen, weitaus mehr als Standard oder URP/Lit. Dazu gehören erweiterte Funktionen wie Brechung, Irisieren, Sheen und mehr. Darüber hinaus werden Materialien, die PBRGraph und UnlitGraph verwenden, unverändert exportiert, ohne dass eine Konvertierung erforderlich ist.

Materialien, die out-of-the-box konvertiert werden können:

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

Andere Materialien werden über eine Eigenschaftsnamen-Heuristik konvertiert. Das bedeutet, dass Sie je nach den Eigenschaftsnamen, die Ihre Materialien und Shader verwenden, entweder die Eigenschaften Ihres benutzerdefinierten Shaders umbenennen müssen, um die Eigenschaftsnamen von URP/Lit oder PBRGraph zu verwenden, oder das Material als Custom Shader exportieren müssen.

Custom Shaders

Um benutzerdefinierte Unlit-Shader (z. B. mit ShaderGraph erstellt) zu exportieren, fügen Sie dem Shader, den Sie exportieren möchten, ein ExportShader Asset Label hinzu. Asset Labels sind am unteren Rand des Inspektors zu sehen.

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

Einschränkungen

  • Wir unterstützen derzeit nur benutzerdefinierte Unlit-Shader – die Konvertierung von Lit-Shadern wird nicht offiziell unterstützt.
  • Benutzerdefinierte Lit-Shader sind derzeit experimentell. Nicht alle Rendering-Modi werden unterstützt.
  • Der Empfang von Schatten auf benutzerdefinierten Shadern wird nicht unterstützt.
  • Skinned Meshes mit benutzerdefinierten Shadern werden nicht unterstützt.
  • Da es beim Übergang von Unity zu three.js und glTF mehrere Koordinatensystemänderungen gibt, können einige Änderungen erforderlich sein, damit erweiterte Effekte funktionieren. Wir versuchen, Daten beim Export zu konvertieren, erfassen aber möglicherweise nicht alle Fälle, in denen Konvertierungen erforderlich sind.
    • UV-Koordinaten beginnen in Unity unten links; in glTF beginnen sie oben links.
    • X-Achsenwerte sind in glTF im Vergleich zu Unity gespiegelt. Dies ist eine Variante einer Änderung von einem linkshändigen zu einem rechtshändigen Koordinatensystem. Daten, die in Shadern verwendet werden, müssen möglicherweise auf der X-Achse gespiegelt werden, um korrekt angezeigt zu werden.

Nicht Teil der glTF-Spezifikation

Beachten Sie, dass Custom Shaders nicht offiziell Teil der glTF-Spezifikation sind. Unsere Implementierung von Custom Shadern verwendet eine Extension namens KHR_techniques_webgl, die den WebGL-Shadercode direkt in der glTF-Datei speichert. Die resultierenden Assets funktionieren in Viewern, die auf Needle Engine basieren, werden aber in anderen Viewern möglicherweise nicht korrekt angezeigt.

💡 Lightmaps exportieren

2022-08-22-171650_Needle_-_Google_Chrome

Um Lightmaps zu exportieren, generieren Sie einfach Lightmaps in Unity. Lightmaps werden automatisch exportiert.

Beim Arbeiten an mehreren Szenen deaktivieren Sie "Auto Generate" und backen Sie Lightmaps explizit. Andernfalls verwirft Unity temporäre Lightmaps beim Szenenwechsel.

Empfohlene Lightmap-Einstellungen

  • Lightmap Encoding: Normal Quality (anpassen unter Project Settings > Player)
  • Progressive GPU (schneller und meist genau genug für kleine Szenen)
  • Non-Directional Lightmaps
  • Max Lightmap Size 2k (Sie können höher gehen, aber rechnen Sie mit großen Dateien)
  • Max 4x 2k Lightmaps pro Szene (Sie können höher gehen, aber rechnen Sie mit großen Dateien)
  • Compress Lightmaps AUS (erhöht die Qualität; wird sonst beim Export erneut komprimiert)

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

Mischen von Baked und Non-Baked Objekten

Es gibt keine 100%ige Übereinstimmung zwischen der Art und Weise, wie Unity Lichter und Umgebung handhabt, und wie three.js dies tut. Zum Beispiel hat Unity völlig separate Codepfade für lichtgemappte und nicht-lichtgemappte Objekte (lichtgemappte Objekte erhalten kein Umgebungslicht, da dies bereits in ihre Maps gebacken ist), und three.js unterscheidet in dieser Weise nicht.

Das bedeutet, um beste Ergebnisse zu erzielen, empfehlen wir derzeit spezifische Einstellungen, wenn Sie gebackene und nicht-gebackene Objekte in einer Szene mischen:

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

Wenn Sie keine gebackenen Objekte in Ihrer Szene haben, sollten auch die folgenden Einstellungen korrekte Ergebnisse liefern:

Environment Lighting: Color
Ambient Color: any

Seite automatisch übersetzt mit AI

Suggest changes
Zuletzt aktualisiert:: 22.04.25, 08:44
Prev
Everywhere Actions
Next
Frameworks, Bundler, HTML