Web GL : cours 9

Les shaders

PF Villard d'après le cours de Eric Haines (Autodesk Inc.) disponible sur Udacity

Les shaders programmable

Les shaders programmable

Challenges en conception de cartes informatiques

Les concepteurs de cartes informatiques doivent élaborer des transistors pour :

• La mémoire ←CPU
• Le traitement des instructions ←CPU ←←←←GPU
• Le traitement des algorithmes ←GPU

→Traitement de fonctions fixes

Le vertex shader

Le fragment shader

Goulot d'étranglement du fragment shader

Quels sont les solutions pour résoudre le goulot d'étranglement du fragment shader ?

• Inverser l'ordre entre le fragment shader et le vertex shader
• Tester la profondeur avec le Z-buffer avant d'exécuter le fragment buffer et annuler son exécution si échec
• Retravailler le coeur du shader tel qu'il puisse être utilsé comme vertex ou fragment shader
• Diviser chaque triangle en 4 triangles plus petits

Architecture d'un shader

Les données d'un shader

Validité des données

Quelles sont les affirmations correctes ?

• Le VS peut calculer la position moyenne de 3 sommets
• Le FS peut utiliser la normal de shading interpolée
• Le VS peut calculer une couleur pour donner au FS
• Le FS peut utiliser la position du 3ème sommet d'un triangle

GLSL ES

uniform vec3 uMaterialColor;

WebGL: GLSL

→ OpenGL Shading Language for Embedded Systems

DirectX: HLSL

→ High Level Shading Language

Tableau de chaîne de caractères envoyé au GPU :

vertexShader: [
    "uniform vec3 uMaterialColor;",
    "uniform vec3 uDirLight;",
    "varying vec3 vColor;",
    "void main() {",
        // Transform the vertex from model space to screen space
        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 
        "vec3 light = normalize( uDirLight );",

        // Compute a diffuse color using Lambertian reflection, N * L
        "float diffuse = max( dot( normal, light ), 0.0);",
        "vColor = uMaterialColor * diffuse;", 
    "}"
].join("\n"),

Exemple de vertex shader

uniform vec3 uMaterialColor;
uniform vec3 uDirLight;

varying vec3 vColor;

void main() {
    // Transform the vertex from model space to clip coordinates
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    vec3 light = normalize( uDirLight );

    // Compute a diffuse color using Lambertian reflection, N * L
    float diffuse = max( dot( normal, light ), 0.0);

    vColor = uMaterialColor * diffuse;
}  

Exemple de fragment shader

Sortie du vertex shader:

• gl_Position : la position des coordonnées clipées
• vColor : la couleur diffuse au sommet

Code :

varying vec3 vColor;

void main() {
    gl_FragColor = vec4(vColor, 1.0);
}

Exemple de Fragment shader

vec3 uSpecularColor;
float specular;
...
gl_FragColor.rgb += specular * uSpecularColor;

gl_FragColor.rgb → X,Y,Z,W = Points et vecteurs

gl_FragColor.rgb → R,G,B,A = Couleurs

gl_FragColor.rgb → S,T,P,Q = Coordonnées de textures

Cartoon shading

float diffuse = max(
    dot( normal, light ), 0.0);

Shading à deux teintes

Si le produit scalaire est suffisamment grand:

   alors la couleur diffuse est 1.0

   sinon la couleur diffuse est 0.5

Rendu non photo-réaliste

• Toon shading
• Cel shading
• Polarisation

Laquelle des causes suivantes implique le plus de problème pour le rendu non photo-réaliste ?

Programmation du vertex shader

varying vec3 vNormal;
varying vec3 vViewPosition;

void main() {
    gl_position= projectionMatrix*modelViewMatrix*vec4(position,1.0);
    vNormal= normalize (normalMatrix*normal);
    vec4 mvPosition=modelViewMatrix*vec4(position, 1.0);
    vViewPosition= -mvPosition.xyz;
}    

Types de projection :

Textures procédurales

Réflexion de Fresnel

Augustin-Jean Fresnel (1788-1827)

Matériaux basés sur les lois de la physique

Matériaux basés sur les lois de la physique

Matériaux basés sur les lois de la physique

BRDF

BRDF de miroir

BRDF de matériau Lambertien

BRDF de matériau Blinn-Phong

Suite : Interaction

Les interactions