Как изменить цвет объекта с помощью клавиатуры в WebGL?

var gl, program;

var color = [0.0, 0.0, 1.0, 1];

window.onload = function init() {

    var triangle = new Float32Array(
        [ 0.2 , -0.4,
          0.8,  -0.4,
          0.5,   0.5 ]);

    var canvas = document.getElementById("gl-canvas");
    gl = canvas.getContext( "experimental-webgl" );
    if (!gl) { alert("WebGL isn’t available"); }


    gl.viewport(0, 0, canvas.width, canvas.height); 
    gl.clearColor(1.0, 1.0, 1.0, 1.0);

    program = initShaders(gl, "vertex-shader", "fragment-shader"); 
    gl.useProgram(program);

    var colorLocation = gl.getUniformLocation(program, "u_color");
    gl.uniform4fv(colorLocation, color);

    var vbuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
    gl.bufferData( gl.ARRAY_BUFFER, triangle, gl.STATIC_DRAW );

    var vPosition = gl.getAttribLocation(program, "vPosition"); 
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(vPosition);

    window.addEventListener("keydown", checkKeyPressed); 
    
    requestAnimationFrame( render );
}

function render(time_ms) {
    
    gl.clear(gl.COLOR_BUFFER_BIT); 

    var colorLocation = gl.getUniformLocation(program, "u_color");
    gl.uniform4fv(colorLocation, color);

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

    requestAnimationFrame( render );
}


function checkKeyPressed(e) {

    if (e.keyCode == "84") {
        color = [Math.random(), Math.random(), Math.random(), 1];
    }
}

function initShaders(gl, vertexShaderId, fragmentShaderId) {
		var vertShdr;
		var fragShdr;

		var vertElem = document.getElementById(vertexShaderId);
		if (!vertElem) {
				alert("Unable to load vertex shader " + vertexShaderId);
				return -1;
		} else {
				vertShdr = gl.createShader(gl.VERTEX_SHADER);
				gl.shaderSource(vertShdr, vertElem.text);
				gl.compileShader(vertShdr);
				if (!gl.getShaderParameter(vertShdr, gl.COMPILE_STATUS)) {
						var msg = "Vertex shader failed to compile.  The error log is:" + "<pre>" + gl.getShaderInfoLog(vertShdr) + "</pre>";
						alert(msg);
						console.info(msg);
						return -1;
				}
		}

		var fragElem = document.getElementById(fragmentShaderId);
		if (!fragElem) {
				alert("Unable to load vertex shader " + fragmentShaderId);
				return -1;
		} else {
				fragShdr = gl.createShader(gl.FRAGMENT_SHADER);
				gl.shaderSource(fragShdr, fragElem.text);
				gl.compileShader(fragShdr);
				if (!gl.getShaderParameter(fragShdr, gl.COMPILE_STATUS)) {
						var msg = "Fragment shader failed to compile.  The error log is:" + "<pre>" + gl.getShaderInfoLog(fragShdr) + "</pre>";
						alert(msg);
						console.info(msg);
						return -1;
				}
		}

		var program = gl.createProgram();
		gl.attachShader(program, vertShdr);
		gl.attachShader(program, fragShdr);
		gl.linkProgram(program);

		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
				var msg = "Shader program failed to link.  The error log is:" + "<pre>" + gl.getProgramInfoLog(program) + "</pre>";
				alert(msg);
				console.info(msg);
				return -1;
		}

		return program;
}

<script id = "vertex-shader" type = "x-shader/x-vertex">
    attribute vec4 vPosition;

    void main() {
       gl_Position = vPosition;
    }
</script>
<script id = "fragment-shader" type = "x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_color;
    void main() {
        gl_FragColor = u_color;
    }
</script>
<canvas id = "gl-canvas" width = "640" height = "360" style = "border: solid;"></canvas>