With the code below, design an interactive Viewer using WebGL function render() { gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); eye = vec3(radius * Math.sin(theta) * Math.cos(phi), radius * Math.sin(theta) * Math.sin(phi), radius * Math.cos(theta)); modelViewMatrix = lookAt(eye, at, up); projectionMatrix = ortho(left, right, bottom, ytop, near, far); gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); gl.uniformMatrix4fv(projectionMatrixLoc, false, flatten(projectionMatrix)); gl.drawArrays(gl.TRIANGLES, 0, numPositions); requestAnimationFrame(render); } where up and at and other fixed values are set as part of the initialization const at = vec3(0.0, 0.0, 0.0); const up = vec3(0.0, 1.0, 0.0); Note that we use the name ytop instead of top to avoid a naming conflict with the window object member names. The corresponding vertex shader is in vec4 aPosition; in vec4 aColor; out vec4 vcolor; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { vcolor = aColor; gl_Position = uProjectionMatrix * uModelViewMatrix * aPosition; } and the fragment shader is in vec4 vColor; out vec4 fColor; void main() { fColor = vColor; } The sliders are specified in the HTML file. For example, to control the near and far distances we can use

depth .05 3

and the corresponding event handler in the JavaScript file: document.getElementById("depthSlider").onchange = function() { far = event.target.value/2; near = -event.target.value/2; };