102.3K+Download
Zur Nutzungsanleitung springen
Three.js Post-Processingvon CloudAI-X

Three.js Post-Processing Skill.

Behandle Bildschirmeffekte als geordnete Rendering-Pipeline statt als unabhängige Filter.

  • 3D
  • Three.js
OpenDesign herunterladenAnleitung ansehen
Quellenprüfung · Three.js Post-ProcessingSKILL.md
Aufgabe 3D Ergebnis • Eine geordnete Composer-Pass-Kette • Effekteinstellungen mit klarem visuellem Zweck • Resize-Handling und Vergleich der Effektkosten Vor dem Start Ein funktionierendes Three.js-Projekt mit Renderer; prüfe die Quellbeispiele anhand der installierten Version. Zusätzliche Controls und Loader hängen vom gewählten Weg ab.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Three.js Post-Processing: Eine Screen-Effect-Pipeline aufbauen

Composer-Einrichtung, Screen-Space-Effekte, eigene Passes, Render Targets und Größenanpassung.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Three.js Post-Processing behandelt EffectComposer und Passes, die eine gerenderte Szene transformieren. Beispiele sind Glow, Anti-Aliasing, Ambient Occlusion, Tiefenunschärfe, Konturen, Color Grading und eigene Screen-Space-Shader.

Der Unterschied zur Materialarbeit liegt im Umfang: Post-Processing wirkt auf das gerenderte Bild und kann die gesamte Komposition beeinflussen. Pass-Reihenfolge, Zielauflösung, Resize-Handling und der Vergleich mit der unbehandelten Szene gehören in den Implementierungsplan. Prüfe die Konstruktoren der Beispiele und die Renderer-Unterstützung vor der Verwendung anhand der installierten Three.js-Version.

Erwartete Ergebnisse

  • Eine geordnete Composer-Pass-Kette
  • Effekteinstellungen mit klarem visuellem Zweck
  • Resize-Handling und Vergleich der Effektkosten
Beispiel-Brief ansehen

Vom Brief zur Prüfung

  1. 01
    Absicht festlegen

    Lege fest, was leuchten, scharf bleiben oder hervorgehoben werden soll.

  2. 02
    Passes zusammenstellen

    Beginne mit einem Szenen-Render und füge nur die Passes hinzu, die für die gewünschte Behandlung nötig sind.

  3. 03
    Vergleichen und profilieren

    Prüfe die Ansicht ohne Effekte, die angepasste Ausgabe und die Renderkosten in der Zielauflösung.

02 Einsatzbereiche

Wann es passt

Ein funktionierendes Three.js-Projekt mit Renderer; prüfe die Quellbeispiele anhand der installierten Version. Zusätzliche Controls und Loader hängen vom gewählten Weg ab.

Gut geeignet

  • PräsentationsfinishWende kontrollierten Glow oder Fokus an, nachdem die zugrunde liegende Szene bereits funktioniert.
  • Auswahl hervorhebenUmrande ausgewählte Geometrie, ohne ihr Basismaterial zu ersetzen.

Grenzen prüfen

  • Zusätzlicher Rendering-AufwandJeder Pass kann Kosten verursachen und ein Szenenproblem eher verdecken als lösen.
  • API: Prüfung nötigDie erfasste Quelle enthält versionsabhängige Konstruktoren und WebGPU-Muster.

Mitzubringende Eingaben

  • BasisszeneLiefere ein funktionierendes Render vor den Effekten.
  • Visuelle BehandlungBeschreibe den gewünschten Glow, Fokus, die Kontur oder das Grading.
  • Performance-ZielNenne Auflösung, Pixel Ratio und Zielgeräte.

03 Wichtige Entscheidungen

Entscheidende Punkte

  1. Pipeline-Denken

    Die Reihenfolge erklärt Wechselwirkungen, die beim isolierten Feinjustieren einzelner Effekte übersehen werden können.

  2. Umkehrbare Effekte

    Ein Vergleich mit der Basisversion hilft, teure Passes zu entfernen, die der Einstellung nicht dienen.

04 Beispielbriefing

Mit einem fokussierten Brief ausprobieren

Der folgende Beispiel-Brief wurde nicht getestet. Prüfe die Einrichtung des Skills, bevor du ihn verwendest.

Einrichtung prüfen

Verwende das passende threejs-skills-Verzeichnis als Agentenanleitung. Es ist nicht die Three.js-Laufzeit und installiert keine Szenen-Assets.

Upstream-Quelldatei
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-postprocessing/SKILL.md

Ein funktionierendes Three.js-Projekt mit Renderer; prüfe die Quellbeispiele anhand der installierten Version. Zusätzliche Controls und Loader hängen vom gewählten Weg ab.

Mit einem Ergebnis beginnen

Passe Umfang, Quellmaterial und Rahmenbedingungen dieses Briefs an, bevor du den Skill ausführst.

Beispiel-Brief
Verwende threejs-postprocessing, um dieser Szene eine dezente Kontur und optional Bloom hinzuzufügen. Behalte einen Vergleich ohne Effekte bei, erkläre die Pass-Reihenfolge, prüfe das Resizing und miss die zusätzlichen Kosten. Prüfe die Konstruktoren vor der Verwendung anhand der installierten Version.

Ergebnis prüfen

Prüfe die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

  • Der Composer ist der vorgesehene finale Renderpfad.
  • Die Effekte bleiben bei Größen- und Pixel-Ratio-Änderungen erhalten.
  • Jeder aktivierte Pass hat einen klaren Zweck.

OpenDesign bietet einen lokalen Design-Workspace für Coding-Agenten. Diese Auflistung bedeutet nicht, dass der Skill mitgeliefert wird oder dass externe Tools, Zugangsdaten und Softwareabhängigkeiten enthalten sind.

OpenDesign herunterladenQuickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte fixierte Quellversion. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber
CloudAI-X
Repository
CloudAI-X/threejs-skills
Skill-Datei
skills/threejs-postprocessing/SKILL.md
Lizenz
Nicht bestätigt – prüfe die Upstream-Bedingungen vor einer Wiederverwendung.
Geprüfter Stand
2026-10-07 · b1c623076c66
Redaktionelle Quellenzusammenfassung
Composer-Einrichtung, Screen-Space-Effekte, eigene Passes, Render Targets und Größenanpassung.

Originalzusammenfassung von OpenDesign auf Basis der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Ist Bloom hier eine Materialeigenschaft?

Nein. Dieser Skill stellt Bloom als Post-Processing-Pass dar.

Warum die Auflösung beim Resize aktualisieren?

Composer-Targets und passspezifische Uniforms müssen mit der Ausgabe abgestimmt bleiben.

Ist aktuelle WebGPU-Kompatibilität garantiert?

Nein. Renderer und installierte Version müssen geprüft werden.

OpenDesign

Schaffe Raum für die nächste Design-Iteration.

Halte Brief, Quellmaterial und Designarbeit in einem lokalen Workspace zusammen. Prüfe die Einrichtung des Skills selbst, bevor du ihn in deinen Workflow aufnimmst.

OpenDesign herunterladenDesign-Skills durchsuchen
Upstream-Quelldatei
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-postprocessing/SKILL.md