inleiding shaders in glsl. terug naar de startpagina
Met glsl (graphic libary shader language) kan je de gpu of grafische processor unit (of grafische kaart) shader animaties maken.
zie wikipedia OpenGL_Shading_language
Een deel van de shaders zijn deels aangepaste shaders uit The Book of Shaders.
Ga ook naar de shadertoy website, waar dagelijks open source shaders worden gepubliceerd
Shadertoy is een initaitief van de wiskundige Inigo Qualez zie zijn youtube kanaal
Zie ook mijn artikel shaders in three.js zie ook paragraaf 8 in mijn artikel "open source notities"
shader 2) Uniforms en abs() met de schets als datafragment in een html.index bestand.
De shader maakt gebruik van het GlslCanvas.js script. shader 2 is het voorbeeld hoe je de shader op je website kan plaatsen
In de overige voorbeelden wordt alleen het datafragement, wat in de string staat, weergegeven
Het dataframent kan je in de glsEditor van Patricio Gonszalesvivo plakken en real time bewerken
Shaders gemaakt met glsl
| 1 | gl_frag_Color | voorbeelden met de gereserveerde vec4 variabele gl_Frag_Color | ||
| 2 | Uniforms en abs() | met voorbeelden van uniform u_time en de abs(sin()) functie | ||
| 3 | gl_FragCoord | |||
| 4 | length() | berekend de lengte van de pixel vectoren zo cirkels construeren | ||
| 5 | smoothstep() inleiding | |||
| 6 | smoothstep() | met smoothstep() en length() een cirkel construeren coord x,y = [-1 , 1] | ||
| 7 | smoothstep() | in een plot functie, schuine lijn met achtergrond gradient | ||
| 8 | smoothstep() | in een plot functie met de functies pow(), step(), mod(), en smoothstep() | ||
| 9 | mix() | en meerdere niet lineare curven in het canvas | ||
| 10 | rechthoek | mbv een rect functie met een step functie die in een mix functie de mixfactor is | ||
| 11 | vierkant | met step en smoothstep functies, shader met 3 vierkantjes | ||
| 12 | functies | mod(), fract(), clamp(), sign(), distance() | ||
| 13 | length() en fract() | lengte van de pixelvectoren invoeren in de fract() functie | ||
| 14 | bewegingspatronen | met de kleuren palette en wiskundige functies | ||
| 15 | cirkels en rechthoeken | met de kleuren palette en de length() en mix() functies | ||
