Gradient Test

by soulwire

HTML

<script src="https://rawgithub.com/soulwire/sketch.js/master/js/sketch.js"></script>
<script src="https://dat-gui.googlecode.com/git/build/dat.gui.js"></script>
<div class="container"></div>
<script id="vs" type="x-shader">
    
    attribute vec2 aPosition;
    attribute vec3 aColor;
    varying vec3 vColor;
    
    void main() {
    gl_Position = vec4( aPosition, 0, 1 );
    vColor = aColor;
    }
    
</script>
<script id="fs" type="x-shader">
    
    precision mediump float;
    
    varying vec3 vColor;
    
    void main() {
    gl_FragColor = vec4( vColor, 1 );
    }
    
</script>

JavaScript

var gl = Sketch.create({
    container: document.getElementById( 'container' ),
    fullscreen: false,
    height: 400,
    width: 600,
    type: Sketch.WEBGL
});

var colorBuffer;

gl.setup = function() {

    var vs = gl.createShader( gl.VERTEX_SHADER );
    var fs = gl.createShader( gl.FRAGMENT_SHADER );

    gl.shaderSource( vs, document.getElementById( 'vs' ).textContent );
    gl.shaderSource( fs, document.getElementById( 'fs' ).textContent );

    gl.compileShader( vs );
    gl.compileShader( fs );

    if ( !gl.getShaderParameter( vs, gl.COMPILE_STATUS ) ) throw gl.getShaderInfoLog( vs );
    if ( !gl.getShaderParameter( fs, gl.COMPILE_STATUS ) ) throw gl.getShaderInfoLog( fs );

    var program = gl.createProgram();
    gl.attachShader( program, vs );
    gl.attachShader( program, fs );
    gl.linkProgram( program );

    if ( !gl.getProgramParameter( program, gl.LINK_STATUS ) ) throw gl.getProgramInfoLog( program );

    gl.useProgram( program );
    program.aPosition = gl.getAttribLocation( program, 'aPosition' );
    program.aColor = gl.getAttribLocation( program, 'aColor' );

    // Vertices

    var vertexBuffer = gl.createBuffer();
    
    gl.bindBuffer( gl.ARRAY_BUFFER, vertexBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([
        -1.0, -1.0,
         1.0, -1.0,
        -1.0,  1.0,
         1.0,  1.0
    ]), gl.STATIC_DRAW );
    gl.enableVertexAttribArray( program.aPosition );
    gl.vertexAttribPointer( program.aPosition, 2, gl.FLOAT, false, 0, 0 );

    // Colors

    colorBuffer = gl.createBuffer();

    gl.bindBuffer( gl.ARRAY_BUFFER, colorBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([
        Math.random(), Math.random(), Math.random(),
        Math.random(), Math.random(), Math.random(),
        Math.random(), Math.random(), Math.random(),
        Math.random(), Math.random(), Math.random()
    ]), gl.STATIC_DRAW );
    gl.enableVertexAttribArray( program.aColor );
    gl.vertexAttribPointer(...