/*******************************************************************************
 * File  : pen.js
 * Author: Xistos Dosis
 * Date  : November 12, 2023
 *
 * Description: Establish a WebGL context via the canvas DOM and ultimately
 * render a simple triangle in it.
 ******************************************************************************/

//
// The GLSL source code for the Vertex Shader program.
//
const vsSource =
`#version 300 es
precision mediump float;
in vec2 vPos;
in vec3 vColor;
out vec3 color;
void main()
{
  color = vColor;
  gl_Position = vec4(vPos, 0, 1);
}`;

//
// The GLSL source code for the Fragment Shader program.
//
const fsSource =
`#version 300 es
precision mediump float;
in vec3 color;
out vec4 O;
void main()
{
  O = vec4(color, 1);
}`;

//
// The GLSL source code for the Fragment Shader program.
//
const canvas = document.getElementById("vga-standard-resolution"); // Get the canvas.
const gl     = canvas.getContext('webgl2');                        // Get the context.

// Check if `gl` exists.
if(!gl) {
  console.log("WebGL2.0 not supported");
  alert("Your browser doesn't support WebGL2.0. You should update it.");
}

gl.clearColor(.118,.125,.141, 1); // Specify the clear color.
gl.clear(gl.COLOR_BUFFER_BIT);    // Actually clear the color buffer.

//
// Create, Bind (with source code) and Compile the Vertex Shader.
//
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);
// Check for errors in the source code.
if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
  console.error("Error compiling Vertex Shader", gl.getShaderInfoLog(vertexShader));
}

//
// Create, Bind (with source code) and Compile the Fragment Shader.
//
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsSource);
gl.compileShader(fragmentShader);
// Check for errors in the source code.
if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
  console.log("Error compiling Fragment Shader", gl.getShaderInfoLog(fragmentShader));
}

//
// Create the program itself(Where all the individual shaders will be hosted).
//
program = gl.createProgram();
// No need to specify which is the Vertex Shader or the Fragment Shader,
// the WebGL API already knows.

// Attach them.
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// Link them.
gl.linkProgram(program);
// Check for linking errors.
if(!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  console.log("Error linking WebGLProgram", gl.getProgramInfoLog(program));
}

////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////

// *NOTE*: The following X,Y coordinates are provided as such since the
// default coordinate system is NDC space (Normalized Divice Coordinates)
// space, which ranges from -1 to 1 along both axes within the WebGL context.
// Color values are also normalized (e.g. 1 for Red channel instead of 255)
var VertexData =
[
 // X,    Y       R ,  G ,  B
   0.00, 0.75,   1.0, 0.0, 0.0,
  -0.50,-0.50,   0.0, 1.0, 0.0,
   0.50,-0.50,   0.0, 0.0, 1.0
];

var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // Also known as VBO, or VertexBufferObject.
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(VertexData), gl.STATIC_DRAW);
var positionAttribLoc = gl.getAttribLocation(program, 'vPos');
gl.vertexAttribPointer(
  positionAttribLoc,                  // Attribute location.
  2,                                  // Number of elements per attribute.
  gl.FLOAT,                           // Type of elements.
  gl.FALSE,                           // Do not normalize fixed-point data values.
  5 * Float32Array.BYTES_PER_ELEMENT, // Size of each vertex(in Bytes).
  0                                   // Offset from the beginning of a single vertex
                                      // to this attribute(in Bytes).
);
gl.enableVertexAttribArray(positionAttribLoc); // Use the attribute.

var colorAttribLoc = gl.getAttribLocation(program, 'vColor');
gl.vertexAttribPointer(
  colorAttribLoc,
  3,
  gl.FLOAT,
  gl.FALSE,
  5 * Float32Array.BYTES_PER_ELEMENT,
  2 * Float32Array.BYTES_PER_ELEMENT
)
gl.enableVertexAttribArray(colorAttribLoc);

gl.useProgram(program);            // Use this shader program for this render pass.

gl.drawArrays(gl.TRIANGLES, 0, 3); // Render in triangles mode,
                                   // starting from zero index (first vertex),
                                   // counting to three indices/vertices in total.
                                   // *CLARIFICATION*: Since all indices here are unique
                                   // and correspond to one of the three vertices, i use indices
                                   // and vertices interchangeably.