Home Forums Wiki Doc Install Extras Screenshots Source Code Projects Blog Users Groups Register
Glx-Dock / Cairo-Dock List of forums Technical discussions | Discussions techniques Effets OpenGL
The latest stable release is the *3.4.0* : How to install it here.
Note: We just switched from BZR to Git on Github! (only to host the code and your future pull requests)
Technical discussions | Discussions techniques

Subjects Author Language Messages Last message
Effets OpenGL
Page : 1 2 3
AuGuR Français 54 Guest [Read]
12 June 2018 à 04:59

AuGuR, Thursday 26 June 2008 à 20:12 | Quote


Subscription date : 25 June 2008
Messages : 49
Avant de partir une dizaine de jours je vais essayer de vous pondre une petite serie d'effets en OpenGL pour les icones du dock
Je vais commencer doucement (a mon avis tu as du deja trouver ces effets Fabounet) et je terminerai par des effets a faire chauffer la CG par contre a toi d'integrer ca dans ton code ...

On va commencer donc par de vulgaires rotations de l'icone soit sur X, Y ou Z, un petit rebond de l'icone, un dezoome avec disparition et pour finir un petit spot qui eclaire l'icone (a revoir je l'ai fait dans la hate ca rend pas comme je veux ...)

float                    fRotX = 360.0f; // Pour la rotation sur X
float                    fRotY = 360.0f; // Y
float                    fRotZ = 360.0f; // Z
float                    fStepTurn = 0.01f; // la vitesse de rotation de l'icone

float                    fHauteurRebond    = 0.3f; // amplitude du rebond de l'icone
float                    fDegresRebond    = 180.0f; // Degres pour le calcul du rebond
float                    fStepRebond        = 0.1f; // Vitesse du rebond
float                    fRebond            = 0.0f; // Valeur finale du rebond

float                    fZoom            = -10.0f; // Le zoom de l'icone par defaut
float                    fStepZoom        = 0.1f; // La vitesse du zoom

Prototype
void    DrawIcon(void);
void    DrawSpot(void);


Voila pour les variables et proto
    glDisable(GL_DEPTH_TEST); // Plus de test de profondeur please

    glEnable(GL_TEXTURE_2D); // On active les textures

    glBindTexture(GL_TEXTURE_2D, texture Icone); // On bind la texture de l'icone
    
    glLoadIdentity(); // reset matrice d'identite
    glTranslatef(0.0f, fRebond, fZoom); // On positionne l'icone

    glRotatef(fRotX, 1.0f, 0.0f, 0.0f); // Rotation sur X
    glRotatef(fRotY, 0.0f, 1.0f, 0.0f); // Rotation sur Y
    glRotatef(fRotZ, 0.0f, 0.0f, 1.0f); // Rotation sur Z

    glColor4f(1.0f, 1.0f, 1.0f, 1.0f + (fZoom / 100.0f)); // Couleur de l'icone

    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); // Transparence avec le canal alpha
    glEnable(GL_BLEND); // On active le blend

    glEnable(GL_ALPHA_TEST); // On active le test alpha
    glAlphaFunc(GL_GREATER, 0.0f); // On affiche que les pixels ayant un alpha > 0

    DrawIcon(); // On affiche l'icone
    glDisable(GL_TEXTURE_2D); // Fini texture
    DrawSpot(); // Bein la c'est si on veut le spot en dessous

    glDisable(GL_ALPHA_TEST); // Desactive l'alpha test

// Ici des que tu mets une des variables fRotX, fRotY ou fRotZ a 0 l'icone va tourner
    fRotX += fStepTurn; // Pour une rotation d'1 tour sur X
    if (fRotX >= 360.0f)
        fRotX = 360.0f;
    fRotY += fStepTurn; // Pareil pour Y
    if (fRotY >= 360.0f)
        fRotY = 360.0f;
    fRotZ += fStepTurn; // Et pour Z
    if (fRotZ >= 360.0f)
        fRotZ = 360.0f;

// Pour le rebond de l'icone pareil fDegresRebond a 0 = un petit jump
    fRebond = fHauteurRebond*sin(fDegresRebond*RADIAN);

    fDegresRebond += fStepRebond;
    if (fDegresRebond >= 180.0f)
        fDegresRebond = 180.0f;

// Le zoom (la il bloque a -100 a virer si tu veux pas un icone minuscule)
    fZoom -= fStepZoom;
    if (fZoom < -100.0f)
        fZoom = -100.0f;
}

void    DrawIcon(void) // L'affichage de l'icone
{
    glBegin(GL_QUADS);
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, 0.0f);
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, 0.0f);
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 0.0f);
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 0.0f);
    glEnd();
}

void    DrawSpot(void) // L'affichage du spot (il est pas tres beau je pense qu'une texture rendrai beaucoup mieux)
{
    glBegin(GL_QUADS);
        glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
        glVertex3f(-0.2f, -1.0f, 0.0f);
        glVertex3f( 0.2f, -1.0f, 0.0f);
        glColor4f(0.0f, 0.0f, 1.0f, 0.1f);
        glVertex3f( 1.0f, 0.0f, 0.0f);
        glVertex3f(-1.0f, 0.0f, 0.0f);
    glEnd();
}


voila pour le moment prochaine etape zoom multiple de l'icone, blur, glow, explosion en particules , effet de torsion et un petit effet d'ondulation genre onde sur l'eau

@++

AuGuR

nochka85, Thursday 26 June 2008 à 20:45 | Quote


Subscription date : 29 November 2007
Messages : 7408
voila pour le moment prochaine etape zoom multiple de l'icone, blur, glow, explosion en particules , effet de torsion et un petit effet d'ondulation genre onde sur l'eau


C'est tout ????? .... bah c'est pas si terrible que çà finallement cet OpenGL dans cairo-dock !

.....

fabounet, Friday 27 June 2008 à 03:49 | Quote


Subscription date : 30 November 2007
Messages : 17118
ça va envoyer du gros !

parAdOxxx_ZeRo, Friday 27 June 2008 à 14:15 | Quote


Subscription date : 14 January 2008
Messages : 1122
Jverrais bien un gros FOG en bas du dock ^^

AuGuR, Friday 27 June 2008 à 14:34 | Quote


Subscription date : 25 June 2008
Messages : 49
^^ c'est vrai que ca pourrait etre pas mal l'effet fog, ca existe deja en opengl mais ca rend pas terrible ... par contre on peut en faire un plus realiste mais dans ce cas la il faudra surement charger une texture pour avoir un meilleur effet , sinon je peux refourguer a Fabounet l'effet vague bleue pour le dock que j'avais fait ici --> http://video.google.fr/videoplay?docid=3190260426898953379&q=cairo+dock&ei=ft5kSLPiIoe02wLQvLWnCg&hl=fr si ca interesse quelqu'un ...

AuGuR, Friday 27 June 2008 à 14:36 | Quote


Subscription date : 25 June 2008
Messages : 49
Erreu dans le lien sorry http://video.google.fr/videoplay?docid=3190260426898953379&q=cairo+dock&ei=ft5kSLPiIoe02wLQvLWnCg&hl=fr c'est ici pour la vague blue

fabounet, Friday 27 June 2008 à 15:00 | Quote


Subscription date : 30 November 2007
Messages : 17118
je vais déjà tenter de réimplémenter les effets existants en OpenGL (l'axe y est inversé par rapport à Cairo et l'origine des images est en bas au lieu d'en haut, quelle galère ! ), puis je verrai comment rajouter tous les effets que tu auras

AuGuR, Friday 27 June 2008 à 15:21 | Quote


Subscription date : 25 June 2008
Messages : 49
Mon pauvre Fabounet c'est vrai que openGL a l'axe Y inverse c'est un casse tete ...

En attendant j'ai retrouve l'effet des vagues

float        fDegresWave;
float        fStartDegresWave =    0.0f;
float        fAlphaWave        =    1.0f;
float        fPosWave1        =    -3.2f;
float        fPosWave2        =    2.0f;
float        fPosWave3        =    -2.9f;
float        fPosWave4        =    2.3f;
float        fPosBigWave        =    0.0f;


void        EffectBlueWave(void)
{

    float    fPositionWave;
    float    fStepWave;

    double    i;

    glDisable(GL_TEXTURE_2D);
    glDisable(GL_FOG);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE);
    glEnable(GL_BLEND);

    glLoadIdentity();

    glTranslatef(0.0f, 0.0f, -10.0f);

    
    fPositionWave =        -6.0f;
    fStepWave =            0.2f;
    fDegresWave =        fStartDegresWave;

    for (i = 0.0;i < 12.0;i += fStepWave)
    {

        glBegin(GL_QUADS);
            glColor4f(0.0f, 0.0f, 0.0f, fAlphaWave);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN)-fPosWave1,        0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN)-fPosWave1,    0.0f);
            glColor4f(0.3f, 0.7f, 1.0f, fAlphaWave);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN)-fPosWave1+0.4f,    0.0f);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN)-fPosWave1+0.4f,        0.0f);

            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN)-fPosWave1+0.4f,        0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN)-fPosWave1+0.4f,    0.0f);
            glColor4f(0.0f, 0.0f, 0.0f, 0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN)-fPosWave1+0.5f,    0.0f);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN)-fPosWave1+0.5f,        0.0f);
        glEnd();

        glBegin(GL_QUADS);
            glColor4f(0.0f, 0.0f, 0.0f, fAlphaWave);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*2)-fPosWave2,        0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*2)-fPosWave2,    0.0f);
            glColor4f(0.3f, 0.7f, 1.0f, fAlphaWave);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*2)-fPosWave2+0.1f,    0.0f);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*2)-fPosWave2+0.1f,    0.0f);

            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*2)-fPosWave2+0.1f,    0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*2)-fPosWave2+0.1f,    0.0f);
            glColor4f(0.0f, 0.0f, 0.0f, 0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*2)-fPosWave2+0.5f,    0.0f);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*2)-fPosWave2+0.5f,    0.0f);
        glEnd();

        glBegin(GL_QUADS);
            glColor4f(0.0f, 0.0f, 0.0f, fAlphaWave);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*1.5)-fPosWave3,        0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*1.5)-fPosWave3,    0.0f);
            glColor4f(0.3f, 0.7f, 1.0f, fAlphaWave);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*1.5)-fPosWave3+0.4f,0.0f);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*1.5)-fPosWave3+0.4f,    0.0f);

            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*1.5)-fPosWave3+0.4f,    0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*1.5)-fPosWave3+0.4f,0.0f);
            glColor4f(0.0f, 0.0f, 0.0f, 0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*1.5)-fPosWave3+0.5f,0.0f);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*1.5)-fPosWave3+0.5f,    0.0f);
        glEnd();

        glBegin(GL_QUADS);
            glColor4f(0.0f, 0.0f, 0.0f, fAlphaWave);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*1.3)-fPosWave4,        0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*1.3)-fPosWave4,    0.0f);
            glColor4f(0.3f, 0.7f, 1.0f, fAlphaWave);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*1.3)-fPosWave4+0.1f,0.0f);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*1.3)-fPosWave4+0.1f,    0.0f);

            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*1.3)-fPosWave4+0.1f,    0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*1.3)-fPosWave4+0.1f,0.0f);
            glColor4f(0.0f, 0.0f, 0.0f, 0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*1.3)-fPosWave4+0.5f,0.0f);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*1.3)-fPosWave4+0.5f,    0.0f);
        glEnd();

// Big Wave
        glBegin(GL_QUADS);
            glColor4f(0.0f, 0.0f, 0.0f, 0.0f);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*1.6)-fPosBigWave+6.0,    0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*1.6)-fPosBigWave+6.0,0.0f);
            glColor4f(0.1f, 0.4f, 0.7f, 1.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*1.6)-fPosBigWave,0.0f);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*1.6)-fPosBigWave,        0.0f);

            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*1.6)-fPosBigWave,        0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*1.6)-fPosBigWave,0.0f);
            glColor4f(0.0f, 0.0f, 0.0f, 0.0f);
            glVertex3f(fPositionWave+fStepWave,        0.2f * sin((fDegresWave+2.0f)*RADIAN*1.6)-fPosBigWave-4.0f,0.0f);
            glVertex3f(fPositionWave,            0.2f * sin(fDegresWave*RADIAN*1.6)-fPosBigWave-4.0f,    0.0f);
        glEnd();

        fPositionWave += 0.2f;
        fDegresWave += 2.0f;

    }
    fStartDegresWave += 1.0f;

}


au cas ou ...

nochka85, Friday 27 June 2008 à 18:04 | Quote


Subscription date : 29 November 2007
Messages : 7408
Je sens qu'à ce rythme là, Intrepid risque de sortir avec un cairo-dock 100% fonctionnel en OpenGL les amis !

fabounet, Friday 27 June 2008 à 18:19 | Quote


Subscription date : 30 November 2007
Messages : 17118
je viens de voir que le rectangle incliné ne devient pas un trapèze (logique puisqu'on n'utilise pas la perspective), c'est tout de même un peu frustrant , n'y a t'il pas moyen d'avoit un effet de perspective tout en étant en projection ortho ?

sinon j'ai essayé de donner un effet 3D aux icônes en les mappant sur un solide (une sphère, un cylindre, une pyramide) mais à chaque fois le placage est très bizarre. Tu n'aurais pas une astuce pour "faire ressortir" un peu les icônes ?
idem pour l'animation de rotation, je pensais mapper l'icône sur un sylindre et le faire tourner, plutôt que juste faire tourner le plan de l'icône.

AuGuR, Friday 27 June 2008 à 18:28 | Quote


Subscription date : 25 June 2008
Messages : 49
tu es en
glMatrixMode(GL_MODELVIEW);
?

Qu'entends-tu par plaquage de texture bizarre ? sinon pour faire ressortir les icones le best est une petite source lumineuse

t'as pas une capture d'image que je capte mieux ton probleme

fabounet, Sunday 29 June 2008 à 03:58 | Quote


Subscription date : 30 November 2007
Messages : 17118
en fait je lui fais générer automatiquement les coord de texture => il me les place n'importe où.
les lumières c'est bien aussi, on va pas tarder à pouvoir en rajouter, j'ai la vue par défaut qui est quasiment finie.

tiens au passage j'ai remarqué un effet bizarre : quand j'affiche une icône avec un alpha <1, elle est bien transparente, mais aussi plus lumineuse ! un problème de alpha blending ? pourtant je l'ai supprimé (le problème de couleur venait du chargement de la texture : GL_BRGA au lieu de GL_ARGB)

Tofe, Sunday 29 June 2008 à 18:16 | Quote


Subscription date : 09 February 2008
Messages : 921
la version 1159 marche nickel niveau couleurs

par contre, apparemment la texture se décale d'un pixel à chaque ligne... petit bug sur la largeur de la texture donnée ?

nochka85, Sunday 29 June 2008 à 18:18 | Quote


Subscription date : 29 November 2007
Messages : 7408
Comment on met à jour la version open-gl ??? Lorsque je fais svn up dans mon répertoire spécial OpenGL, il ne me fait rien du tout

fabounet, Monday 30 June 2008 à 03:24 | Quote


Subscription date : 30 November 2007
Messages : 17118
il y'a bien un bug au niveau de la transparence chez moi (luminosité accrue), j'attends l'avis d'Augur car là je vois pas.
si svn up donne rien, c'est probablement que j'ai pas mis à jour le SVN

AuGuR, Monday 30 June 2008 à 20:47 | Quote


Subscription date : 25 June 2008
Messages : 49
quels sont les parametres que tu rentres dans ton glBlendFunc ?

fabounet, Tuesday 01 July 2008 à 02:47 | Quote


Subscription date : 30 November 2007
Messages : 17118
je le met comme ça :
glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

j'ai remarqué que sur les étiquettes ce bug d'affichage rend en fait très bien mais pas pour les icônes.

sinon tu aurais une idée de comment améliorer l'animation de rotation ? là c'est l'icône qui tourne bêtement (c'est-à-dire son plan qui tourne autour de Oy), j'aurais bien vu une sorte de placage de sa texture sur un cylindre et c'est le cylindre qui tourne ... c'est possible ?

AuGuR, Tuesday 01 July 2008 à 10:34 | Quote


Subscription date : 25 June 2008
Messages : 49
C'est bizarre ton histoire d'alpha tu es sur de ton chargement de texture ? est-ce que tu peux poster ta partie d'affichage ? En ce qui concerne l'animation de rotation ou est le probleme tu veux faire tourner un cylindre et pas la texture ?

parAdOxxx_ZeRo, Tuesday 01 July 2008 à 14:22 | Quote


Subscription date : 14 January 2008
Messages : 1122
Petit HS : Tu compte mettre bientot dans la branche officiel sous forme de plug-in ? Ca à l'air d'etre assez stable pour etre mis dans la branche archi instable (trunk != DBZ)

fabounet, Tuesday 01 July 2008 à 16:43 | Quote


Subscription date : 30 November 2007
Messages : 17118
Augur je voulais faire un cylindre et mapper la texture de l'icône dessus, puis faire tourner le cylindre.
peut-être que ça rend vachement mieux que de juste faire tourner le plan de l'icône non ?
mais le problème c'est le mappage. je dois m'y prendre comme une quiche car ça mappe pas "comme il faut"
ou bien peut-être que c'est pas une bonne idée ...
pour le alpha j'y comprend rien aussi, la texture est correcte puisqu'avec un alpha de 1 l'affichage est parfait.
je te posterai le bout de code (au fait t'as pas accès au SVN ?)

Paradoxxx en fait on peut pas tout à fait intégrer ça sous forme d'un plug-in, il faut que le dock charge toutes les surfaces cairo sous forme de texture. Donc je pense qe ça va rester une branche jusqu'à ce que ce soit assez fini (actuellement il reste des trucs à parfaire : affichage des info-rapides, tracé de la ficelle, placement vertical, etc, qui sont fait au niveau du dock.)
par contre les vues peuvent déjà définir un affichage opengl par la fonction render_opengl.
j'importerai rendering dans la branches pour pouvoir commencer à le passer sous Opengl aussi.

Augur j'ai une question technique les plug-ins possèdent une surface cairo, et ils dessinent dessus, et le dock affiche cette surface par la suite. En OpenGL, qu'est ce que je devrais leur donner pour avoir l'équivalent ? une texture ou bien un pixmap ou bien autre chose ?
si je leur laisse une surface cairo et qu'ils dessinent dedans avec cairo et qu'à la fin de leur dessin ils chargent l'image sur la CG en en faisant une texture, est-ce que c'est bien niveau performance ?

désolé pour le pavé

Technical discussions | Discussions techniques

Subjects Author Language Messages Last message
Effets OpenGL
Page : 1 2 3
AuGuR Français 54 Guest [Read]
12 June 2018 à 04:59

Post a message

Anti-spam filter 3 (*) times (*) 7 =
            
Did you know ? You can easily create a link to a wikipedia file by using the tag: [[wikipedia:FILE]]


Glx-Dock / Cairo-Dock List of forums Technical discussions | Discussions techniques Effets OpenGL Top

Online users :

Powered by ElementSpeak © 2007 Adrien Pilleboue, 2009-2013 Matthieu Baerts.
Dock based on CSS Dock Menu (Ndesign) with jQuery. Icons by zgegball
Cairo-Dock is a free software under GNU-GPL3 licence. First stable version created by Fabounet.
Many thanks to TuxFamily for the web Hosting and Mav for the domain name.