WebGL PointSprites

by soulwire

HTML

<canvas id="canvas" width="500" height="500"></canvas>

CSS

html, body {
    background: #f2f2f2;
}

JavaScript

var vsSrc = [
    'attribute vec3 aPosition;',
    'attribute vec3 aColor;',
    'varying vec3 vTint;',
    'void main() {',
    '    vTint = aColor;',
    '    gl_PointSize = 32.0;',
    '    gl_Position = vec4( aPosition, 1 );',
    '}'
].join( '\n' );

var fsSrc = [
    'precision mediump float;',
    'uniform sampler2D texture;',
    'uniform vec3 uTint2;',
    'varying vec3 vTint;',
    'void main() {',
    // texture works
    //'   gl_FragColor = texture2D( texture, gl_PointCoord );',
    // color works
    //'   gl_FragColor = vec4( vTint, 1 );',
    // together... don't work! :/
    '   gl_FragColor = texture2D( texture, gl_PointCoord ) * vec4( vTint, 1 );',
    '}'
].join( '\n' );

var NUM_PARTICLES = 20;

var canvas = document.getElementById( 'canvas' );
var gl = canvas.getContext( 'experimental-webgl' );

gl.enable( gl.BLEND );
gl.disable( gl.DEPTH_TEST );
gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );

var positions = [];
var colors = [];

for ( var i = 0; i < NUM_PARTICLES; i++ ) {

    positions.push(
        -1 + Math.random() * 2,
        -1 + Math.random() * 2,
        -1 + Math.random() * 2
    );

    colors.push(
        Math.random(),
        Math.random(),
        Math.random()
    );
}

function getShader( src, type ) {

    var shad = gl.createShader( type );
    gl.shaderSource( shad, src );
    gl.compileShader( shad );

    if ( !gl.getShaderParameter( shad, gl.COMPILE_STATUS ) )

        throw gl.getShaderInfoLog( shad );

    return shad;
}

function getProgram( vsSrc, fsSrc ) {

    var vs = getShader( vsSrc, gl.VERTEX_SHADER );
    var fs = getShader( fsSrc, gl.FRAGMENT_SHADER );

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

    if ( !gl.getProgramParameter( prog, gl.LINK_STATUS ) )

        throw gl.getProgramInfoLog( prog );

    return prog;
}

function getTexture() {

    var can = document.createElement( 'canvas' );
    var ctx =...