Render

var renderLeft = function () {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    const width = gl.canvas.width;
    const height = gl.canvas.height;
    const displayWidth = gl.canvas.clientWidth;
    const displayHeight = gl.canvas.clientHeight;

    const dispWidth = displayWidth / 2;
    const dispHeight = displayHeight;
    const aspect = dispWidth / dispHeight;
    const top = 1;
    const bottom = -top;
    const right = top * aspect;
    const left = -right;

    pMatrix = ortho(left, right, bottom, ytop, near, far);
    gl.clearColor(0.2, 0.2, 0.2, 1);

    gl.viewport(0, 0, width / 2, height, pMatrix);
    gl.scissor(0, 0, width / 2, height, pMatrix);

    gl.uniformMatrix4fv(projection, false, flatten(pMatrix));


    // pMatrix = ortho(left, right, bottom, ytop, near, far);
    eye = vec3(radius * Math.sin(phi), radius * Math.sin(theta), radius * Math.cos(phi));

    mvMatrix = lookAt(eye, at, up);

    translationMatrix = translate(translateX, translateY, translateZ);
    mvMatrix = mult(mvMatrix, translationMatrix);

    scalingMatrix = scalem(scale, scale, scale);
    mvMatrix = mult(mvMatrix, scalingMatrix);

    if (flag) thetaR[axis] += 2.0;
    mvMatrix = mult(mvMatrix, rotate(thetaR[xAxis], [1, 0, 0]));
    mvMatrix = mult(mvMatrix, rotate(thetaR[yAxis], [0, 1, 0]));
    mvMatrix = mult(mvMatrix, rotate(thetaR[zAxis], [0, 0, 1]));


    // gl.uniformMatrix4fv(projection, false, flatten(pMatrix));
    gl.uniformMatrix4fv(modelView, false, flatten(mvMatrix));


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

    renderRight();
    requestAnimFrame(renderLeft);
}

var renderRight = function () {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    const width = gl.canvas.width;
    const height = gl.canvas.height;
    const displayWidth = gl.canvas.clientWidth;
    const displayHeight = gl.canvas.clientHeight;

    const dispWidthP = displayWidth / 2;
    const dispHeightP = displayHeight;
    const aspectP = dispWidthP / dispHeightP;
    const pMatrix = perspective(fovy, aspectP, near, far);
    gl.clearColor(0.1, 0.1, 0.1, 1);

    gl.viewport(width / 2, 0, width / 2, height, pMatrix);
    gl.scissor(width / 2, 0, width / 2, height, pMatrix);

    gl.uniformMatrix4fv(projection, false, flatten(pMatrix));


    eye = vec3(radius * Math.sin(phi), radius * Math.sin(theta), radius * Math.cos(phi));

    mvMatrix = lookAt(eye, at, up);

    translationMatrix = translate(translateX, translateY, translateZ);
    mvMatrix = mult(mvMatrix, translationMatrix);

    scalingMatrix = scalem(scale, scale, scale);
    mvMatrix = mult(mvMatrix, scalingMatrix);

    if (flag) thetaR[axis] += 2.0;
    mvMatrix = mult(mvMatrix, rotate(thetaR[xAxis], [1, 0, 0]));
    mvMatrix = mult(mvMatrix, rotate(thetaR[yAxis], [0, 1, 0]));
    mvMatrix = mult(mvMatrix, rotate(thetaR[zAxis], [0, 0, 1]));


    // gl.uniformMatrix4fv(projection, false, flatten(pMatrix));
    gl.uniformMatrix4fv(modelView, false, flatten(mvMatrix));


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

    renderLeft();
    requestAnimFrame(renderRight);
}