VictorVelarde/index.html

## index.html
<html>
  <head>
    <title>Basic 101</title>
    <!-- Based on https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html -->
    <script>
      // UTILS
      // 1. Create a shader
      function createShader(gl, type, source) {
        var shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (success) {
          return shader;
        }
        console.log(gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
      }

      // 2. Create a program
      function createProgram(gl, vertexShader, fragmentShader) {
        var program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        var success = gl.getProgramParameter(program, gl.LINK_STATUS);
        if (success) {
          return program;
        }
        console.log(gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
      }

      // 3. Resize canvas
      function resize(canvas) {
        // Lookup the size the browser is displaying the canvas.
        var displayWidth = canvas.clientWidth;
        var displayHeight = canvas.clientHeight;

        // Check if the canvas is not the same size.
        if (canvas.width !== displayWidth ||
            canvas.height !== displayHeight) {

          // Make the canvas the same size
          canvas.width = displayWidth;
          canvas.height = displayHeight;
        }
      }
    </script>
  </head>
  <body>
    <canvas id="c" style="width:300px; height:300px">
    </canvas>

    <!-- Vertex shader -->
    <script id="vertexShader" type="no-js">
      attribute vec4 a_position;

      void main() {
        gl_Position = a_position;
      }
    </script>

    <!-- Fragment shader -->
	<script id="fragmentShader" type="no-js">
      precision mediump float;

      void main() {
        gl_FragColor = vec4(1, 0, 0.5, 1); // return redish-purple
      }
    </script>

    <script>
      // 1. PREPARATION
      // Connect to canvas and create gl 'engine'
	  var canvas = document.getElementById("c");
      var gl = canvas.getContext("webgl");
      if (!gl) {
        throw Error("WebGL is not supported!");
      }

      // Shaders creation
      var vertexSource = document.getElementById("vertexShader").text;
      var fragmentSource = document.getElementById("fragmentShader").text;
      var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
      var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);

      // Program creation
      var program = createProgram(gl, vertexShader, fragmentShader);

      var positionAttributeLocation = gl.getAttribLocation(program, "a_position"); // < point of entry... (ENTRY)

      // Create a buffer to serve as A data "channel"
      var positionBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // >>>
      var positions = [
        0, 0,
        0, 0.5,
        0.7, 0,
      ];
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // <<<


      // 2. RENDERING
      // Prepare previoUsly the canvas
      gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // WebGL -1 +1 space maps to 0 <-> canvas.width for x and 0 <-> canvas.height for y.
      gl.clearColor(0, 0, 0, 0);
	  gl.clear(gl.COLOR_BUFFER_BIT);

      gl.useProgram(program);


      gl.enableVertexAttribArray(positionAttributeLocation); // turn on attribute (ENTRY)

      // Bind the position buffer.
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

      // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
      var size = 2;          // 2 components per iteration
      var type = gl.FLOAT;   // the data is 32bit floats
      var normalize = false; // don't normalize the data
      var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
      var offset = 0;        // start at the beginning of the buffer
      gl.vertexAttribPointer(
          positionAttributeLocation, size, type, normalize, stride, offset); // it uses the ARRAY_BUFFER (positionBuffer)

      var primitiveType = gl.TRIANGLES;
      var offset = 0;
      var count = 3; // nº of points
      gl.drawArrays(primitiveType, offset, count);

    </script>
  </body>
</html>
	<html>
	<head>
	<title>Basic 101</title>
	<!-- Based on https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html -->
	<script>
	// UTILS
	// 1. Create a shader
	function createShader(gl, type, source) {
	var shader = gl.createShader(type);
	gl.shaderSource(shader, source);
	gl.compileShader(shader);
	var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
	if (success) {
	return shader;
	}
	console.log(gl.getShaderInfoLog(shader));
	gl.deleteShader(shader);
	}

	// 2. Create a program
	function createProgram(gl, vertexShader, fragmentShader) {
	var program = gl.createProgram();
	gl.attachShader(program, vertexShader);
	gl.attachShader(program, fragmentShader);
	gl.linkProgram(program);
	var success = gl.getProgramParameter(program, gl.LINK_STATUS);
	if (success) {
	return program;
	}
	console.log(gl.getProgramInfoLog(program));
	gl.deleteProgram(program);
	}

	// 3. Resize canvas
	function resize(canvas) {
	// Lookup the size the browser is displaying the canvas.
	var displayWidth = canvas.clientWidth;
	var displayHeight = canvas.clientHeight;

	// Check if the canvas is not the same size.
	if (canvas.width !== displayWidth \|\|
	canvas.height !== displayHeight) {

	// Make the canvas the same size
	canvas.width = displayWidth;
	canvas.height = displayHeight;
	}
	}
	</script>
	</head>
	<body>
	<canvas id="c" style="width:300px; height:300px">
	</canvas>

	<!-- Vertex shader -->
	<script id="vertexShader" type="no-js">
	attribute vec4 a_position;

	void main() {
	gl_Position = a_position;
	}
	</script>

	<!-- Fragment shader -->
	<script id="fragmentShader" type="no-js">
	precision mediump float;

	void main() {
	gl_FragColor = vec4(1, 0, 0.5, 1); // return redish-purple
	}
	</script>

	<script>
	// 1. PREPARATION
	// Connect to canvas and create gl 'engine'
	var canvas = document.getElementById("c");
	var gl = canvas.getContext("webgl");
	if (!gl) {
	throw Error("WebGL is not supported!");
	}

	// Shaders creation
	var vertexSource = document.getElementById("vertexShader").text;
	var fragmentSource = document.getElementById("fragmentShader").text;
	var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
	var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);

	// Program creation
	var program = createProgram(gl, vertexShader, fragmentShader);

	var positionAttributeLocation = gl.getAttribLocation(program, "a_position"); // < point of entry... (ENTRY)

	// Create a buffer to serve as A data "channel"
	var positionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // >>>
	var positions = [
	0, 0,
	0, 0.5,
	0.7, 0,
	];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // <<<


	// 2. RENDERING
	// Prepare previoUsly the canvas
	gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // WebGL -1 +1 space maps to 0 <-> canvas.width for x and 0 <-> canvas.height for y.
	gl.clearColor(0, 0, 0, 0);
	gl.clear(gl.COLOR_BUFFER_BIT);

	gl.useProgram(program);


	gl.enableVertexAttribArray(positionAttributeLocation); // turn on attribute (ENTRY)

	// Bind the position buffer.
	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

	// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
	var size = 2; // 2 components per iteration
	var type = gl.FLOAT; // the data is 32bit floats
	var normalize = false; // don't normalize the data
	var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
	var offset = 0; // start at the beginning of the buffer
	gl.vertexAttribPointer(
	positionAttributeLocation, size, type, normalize, stride, offset); // it uses the ARRAY_BUFFER (positionBuffer)

	var primitiveType = gl.TRIANGLES;
	var offset = 0;
	var count = 3; // nº of points
	gl.drawArrays(primitiveType, offset, count);

	</script>
	</body>
	</html>