gshader.vert

#version 300 es

//inputs
in vec3 vPosition;
in vec3 vNormal;

//outputs
out vec4 color;

//lighting structures
struct _light {
  vec3 diffuse;
  //EXERCISE 1: Add specular colour member here.
  vec3 ambient;
  vec4 position;
  vec4 specular;
  vec4 spotdirection;
  //EXERCISE 2: Add attenuation coefficients here
  vec3 attenuation;
  // (tip: pack all three coefficients into a vec3)
};

struct _material {
  vec3 diffuse;
  vec3 ambient;
  vec4 specular;
  float shininess;
  //EXERCISE 1: Add specular and shininess colour members.
};

//lighting constants
//EXERCISE 3: set the number of lights to 2
const int nLights = 2; // number of lights

//transform uniforms
uniform mat4 projViewMatrix;     // perspective matrix
uniform mat4 modelViewMatrix;    // modelview matrix

in vec3 vColor; //per-vertex colour attribute
//lighting uniforms
uniform bool lighting;  // to enable and disable lighting
uniform vec3 uColor;    // colour to use when lighting is disabled
uniform _light light[nLights]; // properties for the n lights
uniform _material material; // material properties

//globals
// vec3 attenuation(_light.constant, _light.linear, _light.quadratic);
vec4 mvPosition; // unprojected vertex position
mat4 Nm; // normal matrix
vec3 mvN; // transformed normal
vec3 N; // renormalized normal

//prototypes
vec3 lightCalc(in _light light);

void main() {
  //Transform the point
  // mvPosition = modelViewMatrix * vPosition;  //mvPosition is used often
  // gl_Position = projViewMatrix * mvPosition; 

   //Move vertex to view
  vec4 mvPosition = modelViewMatrix*vec4(vPosition,1);
  //Apply projection and send out
  gl_Position = projViewMatrix*mvPosition;
  //Construct a normal matrix to fix non-uniform scaling issues
  Nm = transpose(inverse(modelViewMatrix));
  //Transform the normal
  mvN = (Nm * vec4(vNormal, 0.0)).xyz;

  /// Color Calculation ///
  // if(lighting == false) {
    color.rgb  = uColor;
    // color.a =  1.0;
  // } else {
  //   //Renormalize normal, just in case...
  //   N = normalize(mvN);

  //   //For combining colors from all lights
  //   color = vec4(0, 0, 0, 1);

  //   //EXERCISE 3: loop through all the lights (not just light[0]
  //   //            and accumulate their returned rgb values in color.
  //   for(int i = 0; i < light.length(); i++){
  //     color.rgb += lightCalc(light[i]);
  //   }
    
  // }
  /// End Color Calculation ///

}

vec3 lightCalc(in _light light) {
  //Set up light direction for positional lights
  vec3 L;

  //If the light position is a vector, use that as the direction
  float attenuation = 1.;
  // LIGHT IS DIRECTIONAL
  if(light.position.w == 0.0)
    L = normalize(light.position.xyz);
  //Otherwise, the direction is a vector from the current vertex to the light
  else {
    L = normalize(light.position.xyz - mvPosition.xyz);
    //EXERCISE 2: Calculate distance from mvPosition to light position
    //EXERCISE 2: Calculate attenuation
   float dist = length(light.position.xyz - mvPosition.xyz);
   attenuation = 1.0/(light.attenuation[0] + light.attenuation[1] * dist + light.attenuation[2] * dist*dist);

  }

  //EXERCISE 1: Set up eye vector
  vec3 E = -normalize(mvPosition.xyz);

  //EXERCISE 1: Set up the half vector
  vec3 H = normalize(L + E);

  //EXERCISE 1: Calculate the Specular coefficient
  float Ks = pow(max(dot(N, H), 0.0), material.shininess);

  //Calculate diffuse coefficient
  float Kd = max(dot(L, N), 0.0);

  //If diffuse coefficient is negative, the light is behind the surface.
  if(Kd < 0.) {
    Kd = 0.;
    //EXERCISE 1: Set Ks to 0.
  }

  //Calculate colour for this light
  //EXERCISE 1: Add specular colour calculations
  vec3 color = Ks +
    Kd * material.diffuse * light.diffuse +
    material.ambient * light.ambient;

  //correct for all colors being [0,255] instead of [0,1]
  //** Stupid RGB color inspectors... **
  color = color / 255. / 255.;

  return color;
}

mine.js

window.onload = function init() {
  // Set up a WebGL Rendering Context in an HTML5 Canvas
  var canvas = document.getElementById('gl-canvas')
  gl = canvas.getContext('webgl2')
  if (!gl) {
    canvas.parentNode.innerHTML('Cannot get WebGL2 Rendering Context')
  }

  //  Configure WebGL
  //  eg. - set a clear color
  //      - turn on depth testing
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
  gl.enable(gl.DEPTH_TEST)
  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.enable(gl.CULL_FACE)

  // Load shaders and initialize attribute buffers
  program = initShaders(gl, './Shaders/gshader.vert', './Shaders/gshader.frag')
  
  gl.useProgram(program)

  buildSpherePoints()
  loadShape(shapes.sphere, gl.TRIANGLE_STRIP)
  loadShape(shapes.axes, gl.LINES)
  loadShape(shapes.floor, gl.LINES)
  

  // ***Normals***
  program.vNormal = gl.getAttribLocation(program, "vNormal");
  gl.enableVertexAttribArray(program.vNormal);

  // Get addresses of shader uniforms
  projLoc = gl.getUniformLocation(program, 'projViewMatrix')
  mvLoc = gl.getUniformLocation(program, 'modelViewMatrix')

//Set up projection matrix
p = perspective(45.0, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);
gl.uniformMatrix4fv(projLoc, gl.FALSE, flatten(transpose(p)));  

  // Load the data into GPU data buffers and
  // Associate shader attributes with corresponding data buffers
  //***Vertices***
  console.log('pro', gl.getAttribLocation(program, 'vPosition'))

  var vertexBuffer = gl.createBuffer()
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
  gl.vertexAttribPointer(program.vPosition, 4, gl.FLOAT, gl.FALSE, 0, 0)
  gl.bufferData(gl.ARRAY_BUFFER, flatten(globalPoints), gl.STATIC_DRAW)
  program.vPosition = gl.getAttribLocation(program, 'vPosition')
  gl.enableVertexAttribArray(program.vPosition)


  
  //Set up uofrGraphics
  urgl = new uofrGraphics(gl)
  urgl.connectShader(program, 'vPosition', 'vNormal', 'stub')


  projViewMatrix = ortho(-4, 4, -4, 4, 0.1, 100)
  gl.uniformMatrix4fv(projLoc, gl.FALSE, flatten(transpose(projViewMatrix)))
  uColor = gl.getUniformLocation(program, "uColor");
  gl.uniform1i(lighting, 1);
  gl.uniform3fv(uColor, white);
 

  requestAnimationFrame(render)
}

// later
//drawArrays()
// WebGL: INVALID_OPERATION: drawArrays: no buffer is bound to enabled attribute