Light Demo

by Trev Burley

HTML

<script src="http://webgl.scrivvy.co.uk/js/webgl-utils.js"></script>
<script id="vshader" type="whatever">
    attribute vec4 a_position;
    varying vec2 surfacePosition;
    uniform mat4 mat;

    void main() {
      gl_Position = a_position;
      surfacePosition = (a_position * mat).xy;
    }    
</script>
<script id="fshader" type="whatever">
precision mediump float;
varying vec2 surfacePosition;
void main() {
float intensity = 3.0; // Lower number = more 'glow'
vec3 light_color = vec3(0.4, 0.3, 0.1); // RGB, proportional values, higher increases intensity
float master_scale = 0.01; // Change the size of the effect

float c = master_scale/(length(surfacePosition) * length(surfacePosition));
gl_FragColor = vec4(vec3(pow(c, intensity))*light_color, 1.0);
}
</script>
<canvas id="c" style="width: 100%"></canvas>

JavaScript

// initialise variables and program
var canvas = document.getElementById("c");
var gl = canvas.getContext("experimental-webgl");
var program = createProgramFromScripts(
    gl, ["vshader", "fshader"], ["a_position"]);
gl.useProgram(program);


var verts = [
      1,  1,  
     -1,  1,  
     -1, -1,  
      1,  1,  
     -1, -1,  
      1, -1,  
];
var vertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

var loc = gl.getUniformLocation(program, "mat");
var mat = [
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1,
];
// index 0 = x scale  (ie, aspect & zoom)
// index 5 = y scale  (ie, aspect & zoom)
// index 12 = x offset (pan x)
// index 13 = y offset (pan y)
mat[5] = canvas.height/canvas.width;  
gl.uniformMatrix4fv(loc, false, mat);    


gl.drawArrays(gl.TRIANGLES, 0, 6);