[{"data":1,"prerenderedAt":190},["ShallowReactive",2],{"case-\u002Fcases\u002Fhero-shader-nebuleuse":3},{"id":4,"title":5,"body":6,"description":177,"extension":178,"meta":179,"navigation":185,"path":186,"seo":187,"stem":188,"__hash__":189},"content\u002Fcases\u002Fhero-shader-nebuleuse.md","Hero shader — nébuleuse mouse-reactive",{"type":7,"value":8,"toc":170},"minimark",[9,13,17,23,26,31,54,57,88,92,148,152],[10,11,5],"h1",{"id":12},"hero-shader-nébuleuse-mouse-reactive",[14,15,16],"p",{},"Un fond plein écran pensé pour un hero de site studio. Une nébuleuse bleue\u002Fviolette respire doucement grâce à un bruit de Simplex auto-warpé, et le curseur tire la texture vers lui avec une légère aberration chromatique.",[18,19,20],"shader-frame",{},[21,22],"hero-shader",{},[14,24,25],{},"Bouge la souris sur le cadre ci-dessus.",[27,28,30],"h2",{"id":29},"démarche","Démarche",[14,32,33,34,38,39,43,44,43,47,43,50,53],{},"Un ",[35,36,37],"strong",{},"fragment shader"," rend la totalité de la scène — pas de géométrie 3D, juste un seul triangle plein écran avec OGL (",[40,41,42],"code",{},"Renderer",", ",[40,45,46],{},"Program",[40,48,49],{},"Mesh",[40,51,52],{},"Triangle","). Toute la richesse vient du shader.",[14,55,56],{},"Trois couches superposées :",[58,59,60,72,82],"ul",{},[61,62,63,66,67,71],"li",{},[35,64,65],{},"Nébuleuse flowing"," — fBM (5 octaves) ",[68,69,70],"em",{},"auto-warpé"," : on utilise la sortie du bruit comme coordonnée d'entrée du bruit suivant. Résultat : des courants fluides qui s'enroulent sur eux-mêmes plutôt qu'une texture statique qui scrolle.",[61,73,74,77,78,81],{},[35,75,76],{},"Déformation locale souris"," — ",[40,79,80],{},"smoothstep(0.55, 0.0, d)"," donne une influence radiale lisse autour du curseur, qui tire les UVs vers le pointeur comme une lentille.",[61,83,84,87],{},[35,85,86],{},"Chromatic aberration"," — trois échantillonnages du champ à des offsets opposés en X, un par canal RGB. Subtil au repos, prononcé près de la souris.",[27,89,91],{"id":90},"détails-techniques","Détails techniques",[58,93,94,104,114,127,139],{},[61,95,96,99,100,103],{},[35,97,98],{},"Palette"," — 4 arrêts : violet profond → violet → bleu électrique → lavande. Interpolés avec ",[40,101,102],{},"smoothstep"," sur des plages qui se recouvrent, pour un dégradé qui ne « marche » pas.",[61,105,106,109,110,113],{},[35,107,108],{},"Lissage de la souris"," — exponential smoothing indépendant du framerate (",[40,111,112],{},"1 - exp(-dt * 6)","). Le retard de ~100 ms donne cette sensation « lourde » et premium.",[61,115,116,77,119,122,123,126],{},[35,117,118],{},"Pause économe",[40,120,121],{},"IntersectionObserver"," arrête le RAF quand le canvas sort du viewport. Idem quand l'onglet est caché (",[40,124,125],{},"document.hidden",").",[61,128,129,77,135,138],{},[35,130,131,132],{},"Respect ",[40,133,134],{},"prefers-reduced-motion",[40,136,137],{},"uInfluence"," passe à 0, la souris ne déforme plus, la nébuleuse continue à flotter doucement.",[61,140,141,77,144,147],{},[35,142,143],{},"Nettoyage GL",[40,145,146],{},"WEBGL_lose_context.loseContext()"," à l'unmount pour libérer le contexte proprement.",[27,149,151],{"id":150},"pile","Pile",[58,153,154,164,167],{},[61,155,156,163],{},[157,158,162],"a",{"href":159,"rel":160},"https:\u002F\u002Fgithub.com\u002Foframe\u002Fogl",[161],"nofollow","OGL"," — ~10 kB gzippé, API minimale, parfait pour un shader plein écran sans Three.js",[61,165,166],{},"WebGL 1 (GLSL ES 1.0) — compatible mobile, pas de dépendance à WebGL 2",[61,168,169],{},"Vue 3 + TypeScript strict",{"title":171,"searchDepth":172,"depth":172,"links":173},"",2,[174,175,176],{"id":29,"depth":172,"text":30},{"id":90,"depth":172,"text":91},{"id":150,"depth":172,"text":151},"Fond plein écran en WebGL, gradient bleu\u002Fviolet animé par bruit auto-warpé, distordu autour du curseur avec aberration chromatique.","md",{"tags":180},[181,182,183,184],"webgl","glsl","ogl","shader",true,"\u002Fcases\u002Fhero-shader-nebuleuse",{"title":5,"description":177},"cases\u002Fhero-shader-nebuleuse","HeufJlH9Uj3Z7qDSzjNvmpChvr9-mClYzzTnc2hlWxE",1794436389541]