Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente Prochaine révision Les deux révisions suivantes | ||
ressource:code:processing:shaders [2022/09/07 10:18] gweltaz |
ressource:code:processing:shaders [2022/09/07 12:34] gweltaz |
||
---|---|---|---|
Ligne 2: | Ligne 2: | ||
===== Le hello World des shaders ===== | ===== Le hello World des shaders ===== | ||
+ | |||
+ | Les fichiers ''vert.glsl'' et ''frag.glsl'' sont à placer dans le dossier ''data'' du sketch. | ||
<accordion><panel title="shader_01"> | <accordion><panel title="shader_01"> | ||
Ligne 19: | Ligne 21: | ||
</code> | </code> | ||
- | <code glsl freg.glsl> | + | <code glsl frag.glsl> |
#ifdef GL_ES | #ifdef GL_ES | ||
precision mediump float; | precision mediump float; | ||
Ligne 54: | Ligne 56: | ||
===== Communication entre l'application et les shaders ===== | ===== Communication entre l'application et les shaders ===== | ||
+ | {{ :ressource:code:processing:shader_comm.png?direct |}} | ||
+ | |||
L'application (programme Processing) peut envoyer des données vers les shaders par des variable déclarées avec le mot-clé ''uniform''. | L'application (programme Processing) peut envoyer des données vers les shaders par des variable déclarées avec le mot-clé ''uniform''. | ||
Ligne 76: | Ligne 80: | ||
===== Textures ===== | ===== Textures ===== | ||
+ | Pour sampler un texel en GLSL (extraire la couleur d'une texture à un point donné), on utilise la fonction: | ||
+ | ''texture2D(sampler2D image, vec2 uv)'' \\ | ||
+ | Les coordonnes UV doivent être comprises entre 0.0 et 1.0 \\ | ||
+ | Elles pour origine le coin bas-gauche (0, 0) contrairement aux coordonnées d'écran, qui ont pour origine le coin haut-gauche. | ||
+ | |||
+ | ===== Utilisation d'un buffer hors-écran ===== | ||
+ | Pratique pour créer des effets avec retour d'information (feedback), comme par exemple un effet de réaction-diffusion. | ||
+ | |||
+ | <code java> | ||
+ | PGraphics buffer = createGraphics(x, y, P2D); | ||
+ | |||
+ | buffer.beginDraw(); | ||
+ | buffer.shader(myShader); | ||
+ | buffer.rect(0, 0, buffer.width, buffer.height); | ||
+ | buffer.endDraw(); | ||
+ | |||
+ | image(buffer, 0, 0); | ||
+ | </code> | ||
+ | |||
===== Fonctions utiles ===== | ===== Fonctions utiles ===== | ||
Ligne 95: | Ligne 118: | ||
</code> | </code> | ||
+ | == HSB -> RGB == | ||
+ | <code glsl> | ||
+ | vec3 hsb2rgb( in vec3 c ){ | ||
+ | vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), | ||
+ | 6.0)-3.0)-1.0, | ||
+ | 0.0, | ||
+ | 1.0 ); | ||
+ | rgb = rgb*rgb*(3.0-2.0*rgb); | ||
+ | return c.z * mix(vec3(1.0), rgb, c.y); | ||
+ | } | ||
+ | </code> | ||
+ | |||
+ | == RGB -> HSB == | ||
+ | <code glsl> | ||
+ | vec3 rgb2hsb( in vec3 c ){ | ||
+ | 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); | ||
+ | } | ||
+ | </code> | ||
=== Random === | === Random === | ||
<code glsl> | <code glsl> | ||
Ligne 128: | Ligne 180: | ||
(c - a)* u.y * (1.0 - u.x) + | (c - a)* u.y * (1.0 - u.x) + | ||
(d - b) * u.x * u.y; | (d - b) * u.x * u.y; | ||
+ | } | ||
+ | </code> | ||
+ | |||
+ | == Fractional Brownian Motion == | ||
+ | <code glsl> | ||
+ | float hash(vec2 coord) | ||
+ | { | ||
+ | return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453123); | ||
+ | } | ||
+ | |||
+ | float noise(vec2 U) | ||
+ | { | ||
+ | vec2 id = floor(U); | ||
+ | U = fract(U); | ||
+ | U *= U * ( 3. - 2. * U ); | ||
+ | |||
+ | vec2 A = vec2( hash(id), hash(id + vec2(0,1)) ), | ||
+ | B = vec2( hash(id + vec2(1,0)), hash(id + vec2(1,1)) ), | ||
+ | C = mix( A, B, U.x); | ||
+ | |||
+ | return mix( C.x, C.y, U.y ); | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | fBM stands for Fractional Brownian Motion | ||
+ | https://iquilezles.org/articles/fbm/ | ||
+ | Set octave to 8 for a detailed noise | ||
+ | A value of 1.0 for H is good | ||
+ | */ | ||
+ | float fbm(vec2 x, float H, int octave) | ||
+ | { | ||
+ | float G = exp2(-H); | ||
+ | float f = 1.0; | ||
+ | float a = 1.0; | ||
+ | float t = 0.0; | ||
+ | for( int i=0; i<octave; i++ ) | ||
+ | { | ||
+ | t += a*noise(f*x); | ||
+ | f *= 2.0; | ||
+ | a *= G; | ||
+ | } | ||
+ | return t; | ||
} | } | ||
</code> | </code> |