Lecture 6 -- shadow example

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

by asterix77

HTML

<!DOCTYPE html>
<html>

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

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

void main() 
{
    gl_Position = projectionMatrix*modelViewMatrix*vPosition;
} 
    </script>
    <script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
   
uniform 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)

const black = vec4(0.0, 0.0, 0.0, 1.0);
const red = vec4(1.0, 0.0, 0.0, 1.0);
var fColor;

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 light;
var lightTheta = 0;
var m;

var usePerspective = true;


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

function init() {
  var canvas = document.getElementById("gl-canvas");
  gl = WebGLUtils.setupWebGL(canvas);
  if (!gl) {
    alert("WebGL isn't available");
  }

  updateDisplays();
  document.getElementById("Button3").onclick = function(){ radius *= 5/4; updateDisplays(); };
  document.getElementById("Button4").onclick = function(){ radius *= 4/5; updateDisplays();};
  document.getElementById("Button5").onclick = function(){ theta += dr; updateDisplays(); };
  document.getElementById("Button6").onclick = function(){ theta -= dr; updateDisplays(); };
  document.getElementById("Button7").onclick = function(){ phi += dr; updateDisplays(); };
  document.getElementById("Button8").onclick = function(){ phi -= dr; updateDisplays(); };
  document.getElementById("perspective").onclick = function(){ usePerspective = document.getElementById("perspective").checked; };

  //  Configure WebGL
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1.0, 1.0, 1.0, 1.0);
    
  // NEW: enable depth testing and polygon offset
  // so lines will be in front of filled...