IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Effet grain player video js ?


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    Février 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 5
    Points : 3
    Points
    3
    Par défaut 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 ? Google ne m'a pas beaucoup aidé jusque là... :/


    Merci d'avance !

  2. #2
    Membre confirmé

    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    311
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 311
    Points : 545
    Points
    545
    Par défaut
    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
    ShaderElement : Bénéficier de l’accélération graphique simplement par une nouvelle balise HTML <shader>
    ODE.js : portage JavaScript du célèbre moteur physique 3D Open Dynamics Engine

  3. #3
    Candidat au Club
    Profil pro
    Inscrit en
    Février 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 5
    Points : 3
    Points
    3
    Par défaut
    Je vois, mais quoi que je fasse, le shader suivant n'est pas pris en compte :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 :/

  4. #4
    Membre confirmé

    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    311
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 311
    Points : 545
    Points
    545
    Par défaut
    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
    ShaderElement : Bénéficier de l’accélération graphique simplement par une nouvelle balise HTML <shader>
    ODE.js : portage JavaScript du célèbre moteur physique 3D Open Dynamics Engine

  5. #5
    Candidat au Club
    Profil pro
    Inscrit en
    Février 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 5
    Points : 3
    Points
    3
    Par défaut
    Merci, je teste ça !

Discussions similaires

  1. Player video flash avec choix de la résolution
    Par elekaj34 dans le forum Flash
    Réponses: 0
    Dernier message: 23/06/2011, 10h51
  2. soucis avec player Video
    Par glenouve dans le forum ActionScript 3
    Réponses: 0
    Dernier message: 10/05/2008, 08h59
  3. Player Video avec SilverLight 1.0
    Par BigWill dans le forum Silverlight
    Réponses: 19
    Dernier message: 15/04/2008, 11h05
  4. Player video - Lenteur de chargement
    Par d.w.d dans le forum Vidéo
    Réponses: 3
    Dernier message: 08/02/2008, 11h20
  5. [FLASH MX2004 PRO] Créer un player Video
    Par MELANIE12 dans le forum Flash
    Réponses: 9
    Dernier message: 24/11/2004, 20h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo