Real-Time 3D Graphics with WebGL 2 - Second Edition

Creating a Program

To start, open up ch03_05_wall.html in an editor. Let's take a step-by-step look at initProgram:

function initProgram() {  const canvas = utils.getCanvas('webgl-canvas');  utils.autoResizeCanvas(canvas);  gl = utils.getGLContext(canvas);  gl.clearColor(0.9, 0.9, 0.9, 1);  gl.clearDepth(100);  gl.enable(gl.DEPTH_TEST);  gl.depthFunc(gl.LEQUAL);  const vertexShader = utils.getShader(gl, 'vertex-shader');  const fragmentShader = utils.getShader(gl, 'fragment-shader');  program = gl.createProgram();  gl.attachShader(program, vertexShader);  gl.attachShader(program, fragmentShader);  gl.linkProgram(program);  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {    console.error('Could not initialize shaders');  }  gl.useProgram(program);