HTML 5 Canvas Library
 

Using Custom Fragment Shaders - taccGL™ Tutorial

Note: This page contains information for version 0.61 and still needs update for version 0.62.

Shaders are computer programs that are compiled and then downloaded to and executed on the GPU. By writing your own or by adapting the default shaders one can achieve exeptionel graphic effects. Unfortunately shaders are written in a special C like computer language called GLSL, see the WebGL™ documentation. Descibing this would exceed the scope of this tutorial. Often you however only need to modify one or two lines of the default shader, so you only need to learn a small part of GLSL.

A fragment shader program calculates the color for a single pixel of the screen. It is started once for each image frame shown on the screen and for each pixel of each taccgl transition. The following example creates a new shader named blueShader and attaches it using sc to a sample taccgl™ transition. The second part of the example gives the shader code, or more precisely how the default shader should be modified. The syntax :color asks taccgl™ to replace the lines in the shader, which are calculating the color by the following code. The following code line col=vec3(0.0,0.0,1.0); sets the color to blue.

var blueShader=taccgl.ssc('BlueShader').setLighting(false);
var b=taccgl.actor("pgMiddleColumnTable").sc(blueShader).dur(2);
b.start()
RUN
<script id="BlueShader" type="x-gsgl/x-shader">
:color
col=vec3(0.0,0.0,1.0);
</script>
 

The following example calculates the color based on the time ct.

var colorShader=taccgl.ssc('ColorShader').times().setLighting(false);
var b=taccgl.actor("pgMiddleColumnTable").sc(colorShader).dur(2);
b.start()
RUN
<script id="ColorShader" type="x-gsgl/x-shader">
:color
col=vec3(0.0,1.0-ct,ct);
</script>
 

The variables s and t contain the coordinates of the pixel currently processed. Using el the coordinates of a particular HTML element ("pgMiddleColumnTable" in the following example) are provided to the shader. The following example creates color transitions by calculating relative coordinates of the pixel and using them as color.

var colorCShader=taccgl.ssc('ColorCShader').dynTex().times().el("EL","pgMiddleColumnTable");;
var b=taccgl.actor("pgMiddleColumnTable").sc(colorCShader).dur(2);
b.start()
RUN
<script id="ColorCShader" type="x-gsgl/x-shader">
:color
col=vec3(0.0,(s-ELS)/ELW,(t-ELT)/ELH);
</script>
 

The following example creates a rotating fade-in effect. It sets the variable a rather than col to affect the alpha value of certain pixels and make them transparent.

var s=taccgl.ssc('rotatingFadeShader').times().dynTex().el("EL","pgMiddleColumnTable");
var b=taccgl.actor("pgMiddleColumnTable").sc(s).dur(2);
b.start()
RUN
<script id="rotatingFadeShader" type="x-gsgl/x-shader">
:color
if (atan(ELMT-t,s-ELMS) <= (-ct+0.50)*2.0*3.14159) a=0.0;
</script>
 

The next example creates a blend effect by determining a ampliphication factor f and the multiplies the color with that factor. It uses :mix instead of :color which makes the code inserted in an earlier stage of the shader where the colors are not yet mixed together, see taccglShaderConfig.mix.

var s=taccgl.ssc('circleBlendShader').dynTex().times().el("EL","pgMiddleColumnTable");
var b=taccgl.actor("pgMiddleColumnTable").sc(s).dur(2);
b.start()
RUN
<script id="circleBlendShader" type="x-gsgl/x-shader">
:mix
float al=atan(ELMT-t,s-ELMS); float al1=(al+3.14159)/2.0/3.14159;
float r=sqrt( (s-ELMS)*(s-ELMS) + (t-ELMT)*(t-ELMT) );
float f = 1.0 - r / ELW * 2.0 - (ct*2.0-1.0); ca*=f;
$$?!this.sp.singleTex{
da*=f;
$$?}
</script>
 

The next example modifies the texture coordinates before the texture access using :fragPos.

var s=taccgl.ssc('ShaderSample6').dynTex().times();var b=taccgl.actor(document.body).sc(s).dur(10);
b.start()
RUN
<script id="ShaderSample6" type="x-gsgl/x-shader">
:fragPos
float s1=(1.0-t)*ct+s*(1.0-ct);
t=(s)*ct+t*(1.0-ct);
s=s1;
</script>
 

When experimenting yourself note that in case there is syntax error in the shader code nothing happens on the screen, while the javascript console shows the shader code and error messages from the shader compilter.

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:Expressions
Previous Page: Flexibles