======Pure Data vs OpenGL======
===== OpenGL =====

**C'est une librairie pour faire du rendu 3D sur une carte graphique**

  * par défaut, si on dessine un triangle rouge, le triangle va être rempli en rouge
  * le pipeline par défaut est assez limité : possibilité de moduler l'opacité, le mode de mélange

Les développeurs d'OpenGL ont développé la possibilité d'amplifier ces possibilités avec ce qu'on appelle un "Shader" car ils étaient surtout utilisés pour faire des ombres

En OpenGL 3, il n'y aura plus de pipeline par défaut, que des shaders

===== Glsl =====

Glsl est un langage opengl "élégant" et couramment utilisé On compile le shader sur la carte graphique

**Un shader est composé de :**

  * fichier de vertex : les sommets
  * fichier de fragment : rendu des pixels dans un framebuffer (zone tampon dans la mémoire de la CG où sont stockés des informations en RGBA le plus souvent)* les "uniform" sont des variables que l'on peut changer dans le programme d'accueil

**les types :**

  * les floats
  * les textures
  * les vecteurs (liste de float), de 2, 3 ou 4 points (vec2, vec3, vec4)

les points

===== Généralités =====

La scène 3D dans laquelle on va pouvoir afficher des contenus : le frustrum

  * **** {{:ViewFrustum 01.png|fig:ViewFrustum 01.png}}

En utilisant l'objet [ortho], la projection est parallèle en tout point ce qui fait que la forme géométrique n'apparait pas déformée en changeant le point de vu

fragment carré : coin en bas à gauche à 0,0 en x,y coin en haut à droite à 1,1

Vertices

  * coordonnée de l'objet
  * matrice modelview : espace de vue, placement de chaque objet en 3D
  * matrice de perspective/projection

matrice modelview * matrice de projection = ce que l'on obtient à l'écran

une fois qu'on a fait la projection, rasterisation, on passe dans les fragments

{{media_01:510px-position_des_shaders_dans_le_pipeline.svg.png|510px-Position_des_shaders_dans_le_pipeline.svg.png 510px-Position_des_shaders_dans_le_pipeline.svg.png}}

===== Exemples =====

==== Un Shader simple ====

Gem>exemples>glsl>01.texture.pd

  * **** {{media_05:capture-01.pd-extended-extra-gem-examples-10.glsl.png|fig:Capture-01.pd-extended-extra-Gem-examples-10.glsl.png}}

**le fichier texture.vert** :

   // Cyrille Henry 2007
   void main()
   {
     gl_TexCoord[0] = gl_MultiTexCoord0;
     gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
   }

pour chacun des sommets, c'est exécute, ça donne la position du sommet (qui ici ne change pas) et la position de la texture pour ce sommet (qui ne change pas non plus)

le main est ainsi appelé 4 fois

**le fichier texture.frag :**

   // Cyrille Henry 2007
   //#extension GL_ARB_texture_rectangle : enable
   //uniform sampler2DRect MyTex;
   uniform sampler2D MyTex;
   uniform float B,C;
   
   void main (void)
   {
   // vec4 color = texture2DRect(MyTex, gl_TexCoord[0].st);
    vec4 color = texture2D(MyTex, gl_TexCoord[0].st);
    color *= B+1.; // brightness
    vec4 gray = vec4(dot(color.rgb,vec3(0.2125,  0.7154, 0.0721)));
    color = mix(gray, color, C+1.); // contrast
    gl_FragColor = color;
   }

Il y a des textures carrés (puissance de 2 obligatoires) et les textures rectangles (ajoutées récemment)

   //#extension GL_ARB_texture_rectangle : enable ARB : extension acceptée par le bureau de révision OpenGl

3 variables uniform (on peut les changer à partir du programme hote) : MyTex, B et C\\
uniform sampler2D MyTex; par défaut, MyTex est la variable de texture, ici elle est carrée

    vec4 color = texture2D(MyTex, gl_TexCoord[0].st);

on va lire la couleur de la texture aux coordonnées du pixel dont on est en train de faire le rendu

    gl_FragColor = color;

on va écrire la couleur désirée dans la variable gl_FragColor

    vec4 gray = vec4(dot(color.rgb,vec3(0.2125,  0.7154, 0.0721)));

on veut calculer la luminance selon RGB, les valeurs indiqués sont toujours les mêmes quand il s'agit de calculer le niveau de gris à partir du RGB, on considère moins la valeur de rouge que le vert et bleu déclaration des variables à la volée, on peut aussi garder des valeurs de variables en les déclarant

    color = mix(gray, color, C+1.); // contrast

on additionne ensemble le gris et la couleur selon la valeur de contraste

**Entre le vertex et le fragment** il faut passer l'ID du vertex et du fragment au programme avec le message [link< pour que le [glsl-program] sache quoi compiler

===== Exemples de Shaders PD/GEM =====

  * **Un reccueil de shaders GLSL pour Pure Data GEM réalisés durant un atelier** à Labomedia en février 2012 et des exemples issus des participants au forum codelab : https://github.com/b01xy/glsl

===== Références =====

==== Opengl ====

  * OpenGL objets et paramètres : v4.2 http://www.opengl.org/sdk/docs/man4/ (faire un print dans gemwin pour avoir les infos)
    * http://www.opengl.org/sdk/docs/man/xhtml/glBegin.xml
  * Le livre rouge OpenGL : http://fly.cc.fer.hr/~unreal/theredbook/
  * OpenGL 2.1 Reference Pages http://www.opengl.org/sdk/docs/man/

==== GLSL ====

  * Spécifications GLSL http://www.opengl.org/registry/doc/GLSLangSpec.Full.1.20.8.pdf
  * Les bases du langage GLSL sur le site du zero : http://www.siteduzero.com/tutoriel-3-8862-les-bases-du-langage.html
  * Tutoriel GLSL : http://zach.in.tu-clausthal.de/teaching/cg_literatur/glsl_tutorial/
  * Comment passe-t-on du monde 3D à l'affichage 2D à l'écran ? http://jeux.developpez.com/faq/3d/?page=definitions#DEFINITIONS_3d_to_2d
  * Les Spécifications GLSL http://en.wikipedia.org/wiki/GLSL#External_links
  * Le livre orange GLSL : {{media_10:orange_book_-_opengl_shading_language_2nd_edition.pdf|fig:Orange Book - OpenGL Shading Language 2nd Edition.pdf}}
  * Un bon tutot sur les shaders et GLSL http://patriciogonzalezvivo.com/2015/thebookofshaders/

==== Shaders ====

  * Causerie sur codelab et portage de shader max : http://codelab.fr/2897
  * Mon premier shader pour Max/MSP http://cycling74.com/2007/05/23/your-first-shader/
  * Plus de ressources : http://www.gamedev.net/topic/316792-learning-glsl-shader-language/
  * Encore ! : http://www-evasion.imag.fr/Membres/Antoine.Bouthors/teaching/opengl/
  * Shader de datamoshing : http://pixlpa.com/blog/pushing-pixels

===== Sources de Shaders sur des plateformes diverses =====

  * http://www.koders.com/noncode/fidCF9214A98AF382D05EFE3BC055B64CF8819C8CF0.aspx
  * http://001.vade.info/?page_id=20
  * https://www.shadertoy.com/ (avec un nav. qui supporte WebGL)
  * http://mrdoob.com/projects/glsl_sandbox
  * http://puredata.hurleur.com/sujet-6263-gem-depth-field
  * http://3dshaders.com/home/index.php?option=com_weblinks&catid=14&Itemid=34
  * http://www.huesforalice.com/project/jitter_shader
  * http://code.google.com/p/glslang-library/source/browse/#svn%2Ftrunk%2Ftrunk%2Fglslang%2Fshaders
  * http://webstaff.itn.liu.se/~stegu/GLSL-cellular/
  * http://glsl.heroku.com/

{{tag>pure_data opengl bj}}