WebGL utilities

webgl.js

"use strict";

function setupWebGLFromCanvas(canvas) {
  var gl = canvas.getContext("webgl2");
  if (!gl) {
    console.log("ERROR: canvas.getContext('webgl2'); failed, perhaps no webgl2 enabled...");
    return null;
  }
  return gl;
}

function createProgramWithShaders(gl, vertexShaderSource, fragmentShaderSource) {
  var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
  var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
  
  return createProgram(gl, vertexShader, fragmentShader);
}

function createProgram(gl, vertexShader, fragmentShader) {
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  // check for errors in linking shaders
  if (!gl.getProgramParameter(program, gl.LINK_STATUS) && !gl.isContextLost()) {
    let info_log = gl.getProgramInfoLog(program);
    window.console.log("Shader linking error:\n" + "    " + info_log);
    gl.deleteProgram(program);
    return null;
  }

  return program;
}

function createShader(gl, type, source) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);

  // check for errors in compiling shaders
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS) && !gl.isContextLost()) {
    let info_log = gl.getShaderInfoLog(shader);
    window.console.log("Shader compilation error:\n" + "    " + info_log);
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}

function setupVertices(gl, vertices) {
  var positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
}

function setupVerticesAndEnableAttribArray(gl, vertices, attribArray, size, type, normalize, stride, offset) {
  var positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  if (type == gl.INT || type == gl.UNSIGNED_INT){
    gl.vertexAttribIPointer(attribArray, size, type, normalize, stride, offset);    
  } else {
    gl.vertexAttribPointer(attribArray, size, type, normalize, stride, offset);
  }
  gl.enableVertexAttribArray(attribArray);
}

function getVertexArrayObject(gl) {
  var vao = gl.createVertexArray();
  gl.bindVertexArray(vao);
  return vao;
}

function createAndSetupMultiTexture(gl, i) {
  var texture = gl.createTexture();
  gl.activeTexture(gl.TEXTURE0 + i);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  
  // minimum needed for data textures
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

  return texture;
}

function createAndSetupOneTexture(gl) {
  var texture = gl.createTexture();
  gl.activeTexture(gl.TEXTURE0 + 0);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  
  // Set up texture so we can render any size image and so we are
  // working with pixels.
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  
  return texture;
}

function bindTextureToFramebuffer(gl, texture, attachmentPoint, framebuffer) {
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, texture, 0);
}

function bindTextures(gl, textureArray) {
  for (var i=0; i<textureArray.length; i++) {
    gl.activeTexture(gl.TEXTURE0+i);
    gl.bindTexture(gl.TEXTURE_2D, textureArray[i]);
  }
}

function setupCanvas(gl) {
  
  // Tell WebGL how to convert from clip space to pixels
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  // Clear the canvas
  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT);
}