WebGL Triangle + Texture + Movement

by soulwire

HTML

<!-- Vertex shader -->
<script id="shader-vs" type="x-shader/x-vertex">
  uniform float time;
  uniform vec2 mouse;
  attribute vec4 vPosition;
  attribute float diameter;
  void main() {
      gl_Position = vPosition;
    //gl_Position.x = mouse.x;
      gl_PointSize = diameter;
  }
</script>

<!-- Fragment shader -->
<script id="shader-fs" type="x-shader/x-fragment">
  precision highp float;
  uniform sampler2D pTexture;
  void main() {
      vec4 pixel = texture2D(pTexture, gl_PointCoord);
      gl_FragColor = pixel;
  }
</script>

<!-- Canvas -->
<canvas id="canvas" width="500" height="500"></canvas>

CSS

html, body {
    background: #f2f2f2;
}
#canvas {
    background: #222;
}

JavaScript

var gl;
var shaderProgram;
var vertexBuffer;
var vertexAttrLoc;
var diameterAttrLoc;
var textureUniLoc;
var timeUniLoc;
var mouseUniLoc;
var texture;
var time = 0.0;
var vertices = [
        -0.5, -0.5, 0.0,
         0.0,  0.5, 0.0,
         0.5, -0.5, 0.0
    ];
var diameters = [10.0, 40.0, 15.0];
var mouse = new Float32Array(2);
var canvas = document.getElementById('canvas');
canvas.addEventListener('mousemove', function(e){
  mouse[0] = 2.0 * ((e.layerX / canvas.width) - 0.5);
  mouse[1] = -2.0 * ((e.layerY / canvas.height) - 0.5);
}, false);

// Initialises WebGL context (if available)
function initGL(canvas) {
    try {
        gl = canvas.getContext('experimental-webgl');
        gl.viewport(0, 0, canvas.width, canvas.height);
        gl.clearColor(0.2,0.2,0.2,1.0);
    } catch(error) {}
}

// Load and bind texture
function loadTexture() {
    texture = gl.createTexture(); // Returns allocated texture ID
    texture.image = new Image();
    texture.image.onload = function(){
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    };
    texture.image.src =...