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!