Uniforms terug naar de inleiding zie ook The Book of Shaders hoofdstuk 3
De inputs van de gpu processoren komen van de cpu, deze inputs zijn gelijk en worden daarom uniform genoemd.
Deze inputs zijn read only dwz iedere thread ontvangt dezelfde data die alleen kan worden gelezen in niet kan worden verandert.
Enkele veel gebruikte Uniforms
uniform vec2 u_resolution; // canvas size (width,height)
uniform vec2 u_mouse; // x,y mouse position in screen pixels
uniform float u_time; // time in seconds since load
voorbeeld shader met uniform float u_time
uniform float u_time inputs zorgen er voor dat alle pixels tegelijk worden geklokt . u_time wordt aangestuurd door de cpu.
De pixels krijgen na elkaar (dankzij het klokken) verschillende kleur data van gl_FragColor, men noemt dit wel de streaming input.
Dus de shader krijgt een Uniform en Streaming input met een output als resultaat
Code als datafrgment
De shader code staat hier in een index.html bestand. De code staat als datafragment in een string in een canvas element
Op deze manier wordt de fragment shader in het glsCanvas.js script geladen. glsCanvas.js is geschreven door Patricio Conzales Vivo en staat op github
Als je onderstaande code in de shader editor wil plakken moet je regels 2 t/m 5 en de regels 23 t/m 26 wissen
coderegel 15
met gl_FragColor = vec4(0.0,(sin(u_time)),0.0,1.0); blijft het canvas voor de helft van de tijd zwart
als sin(u_time) negatief wordt, zal glsl dit omzetten naar "0"
Door de sinus absoluut te maken blijven de waarden tussen de 0 en 1 varieeren (coderegels 16 t/m 21)
Voor het uitproberen van regels 15 t/m 19, coderegel 21 uitschakelen. Met coderegel 19 blijft het canvas zwart.
<html>
<script type="text/javascript" src="/../lib/GlslCanvas.js"></script>
<body>
<canvas class="glslCanvas" data-fragment="
#ifdef GL_ES
precision mediump float;
#endif
uniform float u_time;
//u_time is de tijd in seconden vanaf het starten
void main() {
// gl_FragColor = vec4(0.0,(sin(u_time)),0.0,1.0);
// gl_FragColor = vec4(0.0,abs(sin(u_time)),0.0,1.0);
// gl_FragColor = vec4(0.0,abs(sin(u_time)/2.0),0.0,1.0);
// gl_FragColor = vec4(0.0,abs(sin(u_time)*2.0),0.0,1.0);
// gl_FragColor = vec4(0.0,abs(sin(u_time)*0.0),0.0,1.0);
gl_FragColor = vec4(abs(cos(u_time)),abs(sin(u_time)),0.0,1.0);
}
"
width="400" height="400"> </canvas>
</body>
</html>