Dopo un lungo periodo di assenza, sto pian piano riprendendo le attività in questo mio blog personale e spero in maniera regolare. Era troppo tempo che intendevo aggiornare l’header superiore del sito, scritto in TypeScript e in WebGL, e finalmente ci sono riuscito; a dire il vero il codice è stato modificato diverse settimane fa ma ho scritto un post solo ora. Il banner animato è estremamente semplice: ci sono 2 triangoli che formano un rettangolo a pieno schermo canvas e ai 4 angoli vengono generati 4 colori casuali. Usando l’interpolazione bi-lineare classica su ogni triangolo, non viene considerato il 4° colore, perchè non è parte dell’elenco dei vertici passati al renderizzatore, creando un artifatto grafico (del colore) sulle ipotenuse. Ho risolto molto semplicemente creando un color fragment shader ad-hoc per svolgere il compito, adesso per ogni pixel dei triangoli vengono interpolati linearmente i 4 colori degli angoli, creando una doppia interpolazione lineare (a.k.a. bilinear filtering), sia nell’asse X sia nell’Y … da non confondere con la quadratic interpolation che invece è tutt’altra cosa!

Codice estremamente facile, Il cuore dell’aggiornamento rispetto alla versione precedente è la seguente:

#define  TL  0  // Top-Left color index
#define  TR  1  // Top-Right color index
#define  BL  2  // Bottom-Left color index
#define  BR  3  // Bottom-Right color index
              
precision  mediump  float;      
                                
varying    vec2     point2D;    // Range from 0.0 to 1.0
uniform    vec3     vColors[4]; 
                                
 void main (void)               
 {                              
   gl_FragColor = vec4 (mix (mix (vColors[TL], vColors[TR], point2D.x), mix (vColors[BL], vColors[BR], point2D.x), point2D.y), 1);
 };

Allego anche il code snipped completo, dal sito CodePen, con preview in rempo reale per chiarezza: spero possa essere di aiuto a qualcuno di voi 😉👍