absolute waarden van een sinuscurve

 absolute waarden van een sinuscurve

 

 

 

 

 

 

 

gl_FragColor = vec4(abs(cos(u_time)),abs(sin(u_time)),0.0,1.0);

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 vec4 u_mouse;          // 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
 
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
 

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)
 
 

<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>