Effet grain player video js ?

Bonjour !

J'aurai besoin d'un petit coups de pouce, indication d'un tuto, indice, ce que vous voulez ! Je m'explique, j'ai un lecteur en js dont je me sert en local sous chrome et j'aimerai appliquer un effet "grain" aux vidéos lues, savez vous comment coder ça ? :oops: Google ne m'a pas beaucoup aidé jusque là... :/


Merci d'avance !

Salut !

Le plus performant est d’utiliser un PixelShader, j’avais commencé une Lib en JS pour utiliser de manière simple un shader en étendant le DOM, mais je l’ai abandonné quand j’ai découvert le site ShaderToy

J’ai , encore, un exemple pour filtrer des vidéos ici

Je vois, mais quoi que je fasse, le shader suivant n'est pas pris en compte :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

void main(void) { vec2 uv = gl_FragCoord.xy / iResolution.xy;   vec4 color = texture2D(iChannel0, uv);   float strength = 16.0;   float x = (uv.x + 4.0 ) * (uv.y + 4.0 ) * (iGlobalTime * 10.0); vec4 grain = vec4(mod((mod(x, 13.0) + 1.0) * (mod(x, 123.0) + 1.0), 0.01)-0.005) * strength;   if(abs(uv.x - 0.5) < 0.002) color = vec4(0.0);   if(uv.x > 0.5) { grain = 1.0 - grain; gl_FragColor = color * grain; } else { gl_FragColor = color + grain; } }

---

Je dois mal faire :/

Ton shader compile et fonctionnent parfaitement sur ShaderToy, mais pour l’utiliser avec ma lib il faut l’adapter au niveau des noms des entrées uniforms :

• uniform vec3 iResolution; => uniform vec2 viewsize;
• uniform float iGlobalTime; => uniform float time;
• uniform sampler2D iChannel0 => uniform sampler2D image;

En faite ma lib n’impose aucune limite à la déclaration d’uniforms, tu peux en créer autant que tu le souhaite, c’est pourquoi il intéressant de declarer strength en tant qu’Uniform , ainsi tu peux initialiser cet valeur directement à partir du DOM ou bien la modifier dynamiquement par script.

Voici l’adaptation de ton shader avec ma lib

Merci, je teste ça !