Sites


openFrameworks

Shaders

[en rédaction (comme tout en fait; tout est encore sus forme de note… déso]

Blablabla GPU/CPU, plus rapide, gnagna. Traitement des images, génération de formes. ±logique analytiqye Mathématique (propriétés de la convexité). GLSL. Vert et frag.

Poétique du shader

Graphic pipeline. Comment fonctionne un shader du côté de la machine? Vertices, vertex puis fragment (interpolations).

Shaders et fichiers

Blabla 1 fichier (.frag) ou deux fichiers (.frag et .vert).

1. .vert: Récupérer les coordonnées, position projetée du vertex (points). Générer fragments interpolés etc.

2. Récupérer les fragments et affiche les valeurs couleurs qui seront traités dans le framebuffer. Texture et éclairage

Quelques ressources tierces…

Qui seront à coup sur bien utiles

http://codelab.fr/5886

http://pixelshaders.com/examples/

http://openframeworks.cc/ofBook/chapters/shaders.html

https://thebookofshaders.com/

Commencer doucely

Paramétrer son projet oF pour pouvoir utiliser des shaders. (Vérifier Versions).

Commençons à parametrer notre fichier main.cpp, dans ntre fonction main:



int main( ){

    ofGLWindowSettings settings;
    settings.setGLVersion(3,2);
    ofCreateWindow(settings);

    // this kicks off the running of my app
    // can be OF_WINDOW or OF_FULLSCREEN
    // pass in width and height too:
    ofRunApp(new ofApp());

}


L'objet ofShader.

Les fonctions basiques. Comme d'habitude, pour déclarer une instance de la classe ofShader — qui permet donc de créer un shader —, nous le faisons dans le header, de cette façon:

ofShader shader;

Ensuite, dans le setup, il faudra charger les fichiers "shaderifiques" avec la méthode load.

shader.load("noirblanc"); // pour charger .frag et.vert

ou

shader.load("", "noirblanc.frag"); // pour charger juste .frag

qsd

begin(), end()

Un premier test

Afficher couleurs avec deux fichiers frag et vert.

Commentons le code…

L'uniform modelViewProjectionMatrix

position, valeur passée par oF, différente pour cahque sommet.

gl_Position - ce qui sort du vertex shader.

---

gl_FragCoord - Poistion du fragment dans l'espace de l'écran. Permet de savoir Ou est chaque pixel de notre écraN. (.x, .y)

mapTexCoordsFromTexture().

Notre premier traitement d'image (image processing)

Un filtre noir et blanc

Pour comprendre les textures, nous allons nous contenter de passer l'image du flux webcam en noir et blanc. Le calcul pour transformer une couleur en sa nuance de gris est (rouge+bleu+vert) * 0.33333. On additionne les valeurs des 3 canaux et on divise par trois (ou on multiplie par 0.3333 (1/3), ce qui revient au même). Simple !

Dans le .vert:


#version 150


uniform mat4 modelViewProjectionMatrix;

in vec4 position;
in vec2 texcoord;

out vec2 varyingtexcoord;

void main()
{
    varyingtexcoord = vec2(texcoord.x, texcoord.y);
    gl_Position = modelViewProjectionMatrix * position;
}

 Dans le .frag:


#version 150

// Recevoir Texture via OF
uniform sampler2DRect tex0;

//Position envoyees par le vertex shader
in vec2 varyingtexcoord;

//Notre fragment haut en couleurs
out vec4 outputColor;

void main(){

    vec4 col = texture(tex0, varyingtexcoord);
    float somme = col.r + col.g + col.b;
    float bright = somme * 0.33333;

    outputColor = vec4(vec3(bright), col.a);
}

Un deuxième filtre: couper les verts (incrustation sur du vert)

Dans le .frag


#version 150

// Recevoir Texture via OF
uniform sampler2DRect tex0;
uniform float h;
uniform float s;
uniform float b;

//Position envoyees par le vertex shader
in vec2 varyingtexcoord;

//Notre fragment haut en couleurs
out vec4 outputColor;

vec3 rgb2hsv(vec3 c){
    //https://stackoverflow.com/questions/15095909/from-rgb-to-hsv-in-opengl-glsl

    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
    vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));

    float d = q.x - min(q.w, q.y);
    float e = 1.0e-10;
    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}

void main(){

    vec4 col = texture(tex0, varyingtexcoord);
    vec3 vertReference = vec3(0.0, 1.0, 0.0);
    vertReference = rgb2hsv(vertReference);

    vec3 texColorHSB = rgb2hsv(col.xyz);
    if(distance(texColorHSB.x, vertReference.x) <= h &&
       distance(texColorHSB.y, vertReference.y ) <= s &&
       distance(texColorHSB.z, vertReference.z) >= b)
            discard;
    
    outputColor = vec4(col);

    //float somme = col.r + col.g + col.b;
    //float bright = somme * 0.33333;
    //outputColor = vec4(vec3(bright), col.a);
}

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.