Transition Shader (Glitch + Venetian Blinds) Prompt

gistfile1.txt

Shader de Transition de Scène Personnalisable (Style "Glitch" et "Venetian Blinds")

Objectif : Créer un shader de transition polyvalent qui permet de passer d'une scène A à une scène B en utilisant des effets inspirés d'After Effects comme "Glitch" et "Volet Vénitien" (Venetian Blinds).
Analogie After Effects : Il s'agit de fusionner la logique de la transition "Volet Vénitien" (avec des contrôles sur la direction et la largeur des bandes) avec des techniques de "Glitch" (décalages de blocs, aberrations chromatiques localisées) pour créer des transitions dynamiques et stylisées.
Contexte Technique : C'est un shader en une seule passe qui prend deux textures en entrée (scène A et scène B) et les mélange en fonction d'une progression. La complexité réside dans la génération du masque de transition qui n'est pas un simple dégradé, mais une combinaison de motifs géométriques et de bruit.
Structure du Projet : Vite + React + R3F + Drei + Tailwind CSS 4.

Architecture de Rendu (React/R3F) :
Créer deux scènes 3D distinctes. La manière la plus simple est d'utiliser deux balises <Canvas> ou de rendre chaque scène dans son propre RenderTarget.
L'application principale affichera un quad plein écran avec le shader de transition.
Un état React (progress) sera animé de 0.0 à 1.0 pour contrôler la transition.

Vertex Shader (transition.vert) :
Minimaliste, il passe juste les UVs.
Fragment Shader (transition.frag) :
Uniforms :
sampler2D tSceneA, sampler2D tSceneB : Les deux scènes à mélanger.
float uProgress : La progression de la transition (0.0 à 1.0).
int uBlindsCount : Le nombre de bandes pour l'effet "Venetian Blinds".
float uGlitchAmount : L'intensité du glitch.
float uTime : Pour animer le glitch.
Logique GLSL :
Masque de Volet Vénitien : Calculer à quelle bande le pixel courant appartient (float band = floor(vUv.y * float(uBlindsCount))). Utiliser step() pour créer un masque binaire basé sur uProgress.
Génération de Glitch :
Créer une fonction de bruit simple (peut être un rand() basé sur les UVs).
Pendant une courte période au milieu de la transition (ex: si uProgress est entre 0.4 et 0.6), générer des décalages aléatoires des UVs sur des blocs horizontaux. float blockY = floor(vUv.y * 20.0); float offset = rand(vec2(blockY, uTime)) * uGlitchAmount;.
Décaler les UVs d'échantillonnage pour la scène A et B avec cet offset.
Mélange (Mixing) :
Échantillonner tSceneA et tSceneB avec leurs UVs potentiellement "glitchés" : vec3 finalColor = mix(colorA, colorB, mask);.
Effet Final : Ajouter une fine ligne de balayage (scanline) ou un léger bruit sur l'image finale pour renforcer le style.

Interface Utilisateur (Tailwind CSS 4) :
Un bouton "Lancer la Transition" qui anime uProgress de 0 à 1 puis de 1 à 0.
Des sliders pour Nombre de Bandes et Intensité du Glitch.
Afficher des miniatures des scènes A et B dans les coins de l'écran pour visualiser clairement la transition.