Fragment Shader Framework

animation

games

mobile

web

windows

Lewpen.com

Research & Development

3D Graphics

WebGL

Fragment Shader Framework

Template WebGL project for experimenting with fragment shaders in GLSL

To view this in a browser you will need one of Google Chrome Beta or FireFox Beta .

This provides a simple way to play with fragment shaders. You provide an HTML canvas element and a fragment shader, and your shader is executed for each pixel in the canvas.

This is implemented by rendering one quad which takes up the whole area of the canvas.

Your fragment shader has 3 inputs:

  varying vec3 vPosition;  //  Position of this pixel in the canvas - ranging from -1.0 to 1.0 in X and Y
  uniform float uTime;     //  Time in seconds since the animaton started
  uniform vec2 uMousePos;  //  Position of the mouse cursor over the canvas, from -1.0 to 1.0 in X and Y

Here is a template HTML file using this script:

  <html>
  <title>WebGL Fragment Shader Canvas</title>

  <script src="webgl_fragment_framework.001.js"></script>

  <script id="shader" type="x-shader/x-fragment">

    #ifdef GL_ES
    precision mediump float;
    #endif

    varying vec3 vPosition;  //  Position of this pixel in the canvas - from -1.0 to 1.0 in X and Y
    uniform float uTime;     //  Time in seconds since the animaton started
    uniform vec2 uMousePos;  //  Position of the mouse cursor over the canvas, from -1.0 to 1.0 in X and Y

    void main(void)
    {
      //  This example takes the x and y position of each pixel for the red and green channels
      //  and animates the blue channel between 0.0 and 1.0

      float r = 0.5 + 0.5 * vPosition.x;
      float g = 0.5 + 0.5 * vPosition.y;
      float b = 0.5 + 0.5 * sin( uTime );

      gl_FragColor = vec4( r, g, b, 1.0 );
    }

  </script>

  <body onload="webgl_init( 'canvas', 'shader', 'status' )" bgcolor="#000000">

  <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%"><tr><td align="center" valign="middle">
  <table cellspacing="0" cellpadding="0" border="0" width="200">
    <tr>
      <td style="padding:8px;background:#555555;color:#FFFFFF;font-family:arial;font-size:11px;font-weight:bold">
        <div>WebGL Fragment Shader Test</div>
      </td>
    </tr>
    <tr>
      <td><canvas id="canvas" width="200" height="200" style="border:5px solid #FFFFFF"></canvas></td>
    </tr><tr>
      <td style="padding:8px;background:#555555;color:#FFFFFF;font-family:arial;font-size:11px;font-weight:bold">
        <div id="status">&nbsp;</div>
      </td>
    </tr>
  </table>
  </td></tr></table>

  </body>
  </html>