102.3K+Télécharger
Aller au guide d’utilisation
Three.js Post-Processingpar CloudAI-X

Three.js Post-Processing Skill.

Traitez les effets d’écran comme un pipeline de rendu ordonné plutôt que comme des filtres indépendants.

  • 3D
  • Three.js
Télécharger OpenDesignVoir le guide d’utilisation
Revue de la source · Three.js Post-ProcessingSKILL.md
Tâche 3D Produit • Une chaîne de passes de composer ordonnée • Des réglages d’effets liés à un objectif visuel • La gestion du redimensionnement et une comparaison du coût des effets Avant de commencer Un projet Three.js et un renderer fonctionnels ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent du parcours choisi.
Résumé éditorial · source revue 2026-10-07 · pas un exemple généré

01 Fonctionnement

Three.js Post-Processing : créer un pipeline d’effets d’écran

Configuration du composer, effets en espace écran, passes personnalisées, cibles de rendu et redimensionnement.

Flux de travail fondé sur la sourcePas un benchmark d’exécution

La méthode de travail

Three.js Post-Processing couvre EffectComposer et les passes qui transforment une scène rendue. Les exemples incluent lueur, anticrénelage, occlusion ambiante, profondeur de champ, contours, étalonnage et shaders personnalisés en espace écran.

La différence avec le travail sur les matériaux tient à la portée : le post-traitement agit sur l’image rendue et peut affecter toute la composition. L’ordre des passes, la résolution des cibles, la gestion du redimensionnement et la comparaison avec la scène non traitée font partie du plan d’implémentation. Vérifiez les constructeurs des exemples et la prise en charge du renderer par rapport à la version de Three.js installée avant de les utiliser.

Livrables attendus

  • Une chaîne de passes de composer ordonnée
  • Des réglages d’effets liés à un objectif visuel
  • La gestion du redimensionnement et une comparaison du coût des effets
Voir le brief d’exemple

Du brief à la revue

  1. 01
    Choisir l’intention

    Précisez ce qui doit rayonner, rester net ou être mis en valeur.

  2. 02
    Assembler les passes

    Partez d’un rendu de la scène et n’ajoutez que les passes nécessaires au traitement voulu.

  3. 03
    Comparer et profiler

    Vérifiez la vue sans effet, le rendu après redimensionnement et le coût de rendu à la résolution cible.

02 Cas d’usage

Quand l’utiliser

Un projet Three.js et un renderer fonctionnels ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent du parcours choisi.

Un bon choix

  • Finition de présentationAppliquez une lueur ou une mise au point contrôlée une fois que la scène de base fonctionne.
  • Mise en valeur de sélectionEntourez d’un contour la géométrie sélectionnée sans remplacer son matériau de base.

Limites à vérifier

  • Travail de rendu supplémentaireChaque passe peut ajouter un coût et risque de masquer un problème de scène au lieu de le résoudre.
  • API : vérification nécessaireLa source capturée contient des constructeurs sensibles à la version et des schémas WebGPU.

Éléments à fournir

  • Scène de baseFournissez un rendu fonctionnel avant les effets.
  • Traitement visuelDécrivez la lueur, la mise au point, le contour ou l’étalonnage souhaités.
  • Objectif de performanceIndiquez la résolution, le pixel ratio et les appareils cibles.

03 Décisions importantes

Décisions importantes

  1. Logique du pipeline

    L’ordre explique des interactions que le réglage isolé des effets peut manquer.

  2. Effets réversibles

    Une comparaison avec la base aide à retirer les passes coûteuses qui ne servent pas le plan.

04 Exemple de brief

Essayer un brief ciblé

Le brief d’exemple ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Utilisez le répertoire threejs-skills pertinent comme guide pour l’agent. Ce n’est pas le runtime Three.js et il n’installe pas d’assets de scène.

Fichier source amont
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-postprocessing/SKILL.md

Un projet Three.js et un renderer fonctionnels ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent du parcours choisi.

Commencer par un seul livrable

Adaptez la portée, le matériau source et les contraintes de ce brief avant d’exécuter le skill.

Brief d’exemple
Utilisez threejs-postprocessing pour ajouter un contour discret et un bloom optionnel à cette scène. Conservez une comparaison sans effet, expliquez l’ordre des passes, vérifiez le redimensionnement et mesurez le coût ajouté. Vérifiez les constructeurs par rapport à la version installée avant utilisation.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • Le composer est le chemin de rendu final prévu.
  • Les effets résistent aux changements de taille et de pixel ratio.
  • Chaque passe activée a un objectif clair.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus ni que ses outils externes, identifiants et dépendances logicielles le sont.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision de source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
CloudAI-X
Dépôt
CloudAI-X/threejs-skills
Fichier du skill
skills/threejs-postprocessing/SKILL.md
Licence
Non confirmée — consultez les conditions en amont avant toute réutilisation.
Instantané revu
2026-10-07 · b1c623076c66
Résumé éditorial de la source
Configuration du composer, effets en espace écran, passes personnalisées, cibles de rendu et redimensionnement.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, non une mesure d’usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Le bloom est-il ici une propriété de matériau ?

Non. Ce skill présente le bloom comme une passe de post-traitement.

Pourquoi mettre à jour la résolution au redimensionnement ?

Les cibles du composer et les uniforms propres aux passes doivent rester alignés avec la sortie.

La compatibilité WebGPU actuelle est-elle garantie ?

Non. Le renderer et la version installée doivent être vérifiés.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-postprocessing/SKILL.md