Lecture 5 -- cube viewer

Based on https://www.cs.unm.edu/~angel/WebGL/7E/05/perspective.html

by asterix77

HTML

<!DOCTYPE html>
<html>

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

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

void main() 
{
    gl_Position = projectionMatrix*modelViewMatrix*vPosition;
    fColor = vColor;
} 
    </script>
    <script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
   
varying vec4 fColor;

void
main()
{
    gl_FragColor = fColor;
}
    </script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/webgl-utils.js"></script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"></script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"></script>
  </head>

  <body>
    <canvas id="gl-canvas" width="256" height="256">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>

<br />
Move: 
<button id = "Button3">Farther</button><span id="distance"></span>
<button id = "Button4">Closer</button>
<button id = "Button6">Up</button><span id="theta"></span>
<button id = "Button5">Down</button>
<button id = "Button7">Left</button><span id="phi"></span>
<button id = "Button8">Right</button>

<div>
<input type="checkbox" id="perspective" name="perspective"
         checked>
  <label for="perspective">Use perspective</label>
</div>
  </body>

</html>

JavaScript

var gl;

var points = [];  // All vertices to be drawn (including duplicates)
var colors = [];  // Colors of all vertices to be drawn (including duplicates)

var near = 0.001;
var far = 1000.0;
var radius = 4.0;
var theta  = 60 * Math.PI/180;
var phi    = 30 * Math.PI/180;
var dr = 5.0 * Math.PI/180.0;

var  fovy = 45.0;  // Field-of-view in Y direction angle (in degrees)
var  aspect;       // Viewport aspect ratio

var modelViewMatrix, projectionMatrix;
var modelViewMatrixLoc, projectionMatrixLoc;
var eye;
const at = vec3(0.0, 0.0, 0.0);
const up = vec3(0.0, 1.0, 0.0);

var usePerspective = true;


// Vertices of our model
var vertices = [
        vec3( -0.5, -0.5,  0.5 ),
        vec3( -0.5,  0.5,  0.5 ),
        vec3(  0.5,  0.5,  0.5 ),
        vec3(  0.5, -0.5,  0.5 ),
        vec3( -0.5, -0.5, -0.5 ),
        vec3( -0.5,  0.5, -0.5 ),
        vec3(  0.5,  0.5, -0.5 ),
        vec3(  0.5, -0.5, -0.5 )
    ];

// Colors of each model vertex
var vertexColors = [
        [ 0.0, 0.0, 0.0, 1.0 ],  // black
        [ 1.0, 0.0, 0.0, 1.0 ],  // red
        [ 1.0, 1.0, 0.0, 1.0 ],  // yellow
        [ 0.0, 1.0, 0.0, 1.0 ],  // green
        [ 0.0, 0.0, 1.0, 1.0 ],  // blue
        [ 1.0, 0.0, 1.0, 1.0 ],  // magenta
        [ 0.0, 1.0, 1.0, 1.0 ],  // cyan
        [ 1.0, 1.0, 1.0, 1.0 ]   // white
    ];

function makeCube( )
{
    makeCubeFace(0,3,2,1);
    makeCubeFace(2,3,7,6);
    makeCubeFace(3,0,4,7);
    makeCubeFace(1,2,6,5);
    makeCubeFace(4,5,6,7);
    makeCubeFace(5,4,0,1);
}

function makeCubeFace(a, b, c, d)
{
   var inds = [ a, b, c, a, c, d ];
   for ( var i = 0; i < inds.length; ++i ) {
			points.push( vertices[inds[i]]);
      
      // Color by vertex
      //colors.push( vertexColors[inds[i]] );
            
      // Color by face
      colors.push(vertexColors[a]);
   }
}


function updateDisplays() {
  document.getElementById("distance").innerText = radius.toFixed(2);
	document.getElementById("theta").innerText = (theta * 180 /...