quickdudley/learn-webgl - Change LZ2M7LF5SWQM5DXYT5ONBTRQG7NTTHFBS3JYQCZYLSG4AUBZZSYAC

Starting the exercises

Created by quickdudley on July 8, 2021

LZ2M7LF5SWQM5DXYT5ONBTRQG7NTTHFBS3JYQCZYLSG4AUBZZSYAC

In channels

main

Change contents

File addition: index.js (----------)

[1.0]

const vertex_shader_2d = `
attribute vec4 a_position;
void main() {
  gl_Position = a_position;
}`
const fragment_shader_2d = `
precision mediump float;
void main() {
  gl_FragColor = vec4(1,0,0.5,1);
}`
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);
}
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);
}
self.addEventListener('load', (event) => {
  var canvas = document.querySelector('#c');
  var gl = canvas.getContext("webgl");
  if (!gl) {
    alert("Canvas did not yield WebGL context!");
  } else {
    self.gl = gl;
    var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertex_shader_2d);
    var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragment_shader_2d);
  }
})

File addition: index.html (----------)

[1.0]

<!DOCTYPE html>
<html><head>
<meta charset = "UTF-8">
<title>Exercises while learning WebGL</title>
<script src="./index.js"></script>
</script>
  </head>
  <body>
    <canvas id="c"></canvas>
    <p>Learning WebGL from <a href="https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html">https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html</a></p>
  </body>
</html>