home dev games gallery work
Lewpen.com»Research & Development»3D Graphics»WebGL»Fragment Shader Framework

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>

Files

webgl_fragment_framework.js 9,116 bytes
index.html 1,262 bytes
Related Articles

Online Game Creation Tool

Test recordings from FractalToy

Online Real-Time Fractal Explorer

WebGL is quite effective at raytracing simple scenes with a decent frame rate

Raycasting inside a GLSL fragment shader

Animated Fractals with WebGL & GLSL

Games

The Dodge Game
Flatspace

2-Player Games:

Quake 2D
Meteora

Puzzle Games:

Mini Tetris
Sudoku Solver

Development

3D Graphics:

3D Graphics Articles
WebGL Examples
OpenGL Examples
Flash 3D Engine
Java 3D Engine

Development:

Programming Articles
Game Development Examples

Work

Portfolio
Clients
Startups & Projects
Expertise

Links

CubeLogix Studios
PHP Charts & Graphs
Local Legends Football