WebGL - 模拟时钟

Question

我刚刚开始学习WebGL，我正在尝试创建一个模拟时钟动画。

我用正确的旋转（1rpm）创建了秒针。但是，我有分钟和时针的问题。

 

var VSHADER_CODE = 
    'attribute vec4 position;\n' +
    'uniform mat4 modelMatrix;\n' + 
    'void main() {\n' +
        'gl_Position = modelMatrix * position;\n' +
    '}';

var FSHADER_CODE = 
    'void main() {\n' + 
        'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
    '}';

function main() {

    initCanvas();
    initVertices();    //initialize 6 vertices. 
    // initBuffer()...
    initVertexShader(gl, VSHADER_CODE, verShader);
    initFragShader(gl, FSHADER_CODE, fragShader);

    var shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
}

function drawScene(angle) {

    var modelMatrixLoc = gl.getUniformLocation(shaderProgram, 'modelMatrix');
    var m = mat4.create();
    mat4.rotateZ(m,m,angle*Math.PI/180.0);
    gl.uniformMatrix4fv(modelMatrixLoc, false, m);

    var positionSec = gl.getAttribLocation(shaderProgram, 'position');
    gl.enableVertexAttribArray(positionSec);
    gl.bindBuffer(gl.ARRAY_BUFFER, secondBuffer);
    gl.vertexAttribPointer(positionSec, 2, gl.FLOAT, false, 0, 0);
    gl.drawArrays(gl.LINES, 0, 2);
}

function drawSecond(timeStamp) {

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.useProgram(shaderProgram);
    var angle = ((6*timeStamp/1000) % 360);
    drawScene(angle);
    requestAnimationFrame(drawSecond);
}

我尝试过分钟和时针创建不同的缓冲区，但我不知道如何以不同于秒针的速度旋转它们。

欢迎任何帮助。