Introduction aux shaders

Le concept

Un shader est un programme qui s'exécute sur le GPU pour chaque pixel (fragment shader) ou sommet (vertex shader). En p5.js WEBGL, on crée un shader avec createShader(vert, frag). Le fragment shader reçoit les coordonnées UV et calcule la couleur de chaque pixel en parallèle — c'est ce qui rend les shaders extrêmement rapides.

Le code

// Simple gradient shader (WEBGL)
let sh;
const vert = `attribute vec3 aPosition; void main(){gl_Position=vec4(aPosition,1.0);}`;
const frag = `precision mediump float; uniform vec2 u_resolution; uniform float u_time;
void main(){vec2 uv=gl_FragCoord.xy/u_resolution; float c=0.5+0.5*sin(uv.x*6.28+u_time);
gl_FragColor=vec4(uv.x*0.2,c*0.9,c*0.77,1.0);}`;
function setup(){createCanvas(400,280,WEBGL);sh=createShader(vert,frag);}
function draw(){shader(sh);sh.setUniform('u_resolution',[width,height]);sh.setUniform('u_time',millis()/1000);rect(0,0,width,height);}

Pour aller plus loin

Explorez les autres cours gratuits sur la page Apprendre, ou réservez un appel pour discuter de votre projet.