Lecture 5 -- rendering without elements (start)

Based on https://www.cs.unm.edu/~angel/WebGL/7E/CLASS/cube3.js

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 vec3 theta;


void main() 
{
    // Compute the sines and cosines of theta for each of
    //   the three axes in one computation.
    vec3 angles = radians( theta );
    vec3 c = cos( angles );
    vec3 s = sin( angles );

    // Remeber: thse matrices are column-major
    mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
		    0.0,  c.x,  s.x, 0.0,
		    0.0, -s.x,  c.x, 0.0,
		    0.0,  0.0,  0.0, 1.0 );

    mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
		    0.0, 1.0,  0.0, 0.0,
		    s.y, 0.0,  c.y, 0.0,
		    0.0, 0.0,  0.0, 1.0 );


    mat4 rz = mat4( c.z, -s.z, 0.0, 0.0,
		    s.z,  c.z, 0.0, 0.0,
		    0.0,  0.0, 1.0, 0.0,
		    0.0,  0.0, 0.0, 1.0 );

    fColor = vColor;
    gl_Position = ry * rz * rx * vPosition;
    // gl_Position.w = 1.0;
} 
    </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>
  </body>

</html>

JavaScript

var gl;

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

var thetaLoc;

// 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);
    
    console.log(indices);
    console.log(vertexColors);
}

function makeCubeFace(a, b, c, d)
{
   var inds = [ a, b, c, a, c, d ];
   for ( var i = 0; i < inds.length; ++i ) {
      // TODO: append vertex to points[]
      indices.push(inds[i]);
   }
}


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

  makeCube();  


  //  Configure WebGL
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1.0, 1.0, 1.0, 1.0);
  gl.enable(gl.DEPTH_TEST);  // <--- New

  //  Load shaders and initialize attribute buffers
  var program = initShaders(gl, "vertex-shader", "fragment-shader");
  gl.useProgram(program);

  // Load vertex data into the GPU
  var bufferId = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
 ...