Source: lib/teal_book/cuon-utils.js

  1. /**
  2.  * @file
  3.  *
  4.  * Summary.
  5.  * <p>This is a class for creating shaders.</p>
  6.  *
  7.  * @author Kanda and Matsuda
  8.  * @copyright © 2012 Kanda and Matsuda
  9.  * @since 25/09/2016
  10.  * @see <a href="/cwdc/13-webgl/lib/teal_book/cuon-utils.js">source</a>
  11.  */
  13. /**
  14.  * Create a program object and make it current.
  15.  * @param {WebGLRenderingContext} GL context.
  16.  * @param {String} vshader a vertex shader program.
  17.  * @param {String} fshader a fragment shader program.
  18.  * @return {Boolean} true, if the program object was created and successfully made current.
  19.  */
  20. function initShaders(gl, vshader, fshader) {
  21.   var program = createProgram(gl, vshader, fshader);
  22.   if (!program) {
  23.     console.log("Failed to create program");
  24.     return false;
  25.   }
  27.   gl.useProgram(program);
  28.   gl.program = program;
  30.   return true;
  31. }
  33. /**
  34.  * Create the linked program object
  35.  * @param {WebGLRenderingContext} gl GL context.
  36.  * @param {String} vshader a vertex shader program.
  37.  * @param {String} fshader a fragment shader program.
  38.  * @return {WebGLProgram} created program object, or null if the creation has failed.
  39.  * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/createProgram WebGLRenderingContext: createProgram() method}
  40.  */
  41. function createProgram(gl, vshader, fshader) {
  42.   // Create shader object
  43.   var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
  44.   var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
  45.   if (!vertexShader || !fragmentShader) {
  46.     return null;
  47.   }
  49.   // Create a program object
  50.   var program = gl.createProgram();
  51.   if (!program) {
  52.     return null;
  53.   }
  55.   // Attach the shader objects
  56.   gl.attachShader(program, vertexShader);
  57.   gl.attachShader(program, fragmentShader);
  59.   // Link the program object
  60.   gl.linkProgram(program);
  62.   // Check the result of linking
  63.   var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
  64.   if (!linked) {
  65.     var error = gl.getProgramInfoLog(program);
  66.     console.log("Failed to link program: " + error);
  67.     gl.deleteProgram(program);
  68.     gl.deleteShader(fragmentShader);
  69.     gl.deleteShader(vertexShader);
  70.     return null;
  71.   }
  72.   return program;
  73. }
  75. /**
  76.  * Create a shader object
  77.  * @param {WebGLRenderingContext} gl GL context.
  78.  * @param {gl.VERTEX_SHADER | gl.FRAGMENT_SHADER} type the type of the shader object to be created,
  79.  * @param {DOMString} source shader program.
  80.  * @return {WebGLShader} created shader object, or null if the creation has failed.
  81.  * @see {@link https://udn.realityripple.com/docs/Web/API/WebGLRenderingContext/shaderSource WebGLRenderingContext.shaderSource()}
  82.  * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/createShader WebGLRenderingContext: createShader() method}
  83.  */
  84. function loadShader(gl, type, source) {
  85.   // Create shader object
  86.   var shader = gl.createShader(type);
  87.   if (shader == null) {
  88.     console.log("unable to create shader");
  89.     return null;
  90.   }
  92.   // Set the shader program
  93.   gl.shaderSource(shader, source);
  95.   // Compile the shader
  96.   gl.compileShader(shader);
  98.   // Check the result of compilation
  99.   var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  100.   if (!compiled) {
  101.     var error = gl.getShaderInfoLog(shader);
  102.     console.log("Failed to compile shader: " + error);
  103.     gl.deleteShader(shader);
  104.     return null;
  105.   }
  107.   return shader;
  108. }
  110. /**
  111.  * Initialize and get the rendering context for WebGL.
  112.  * This will make any GL errors show up in your browser JavaScript console.
  113.  * @deprecated since WebGL2
  114.  * @param {HTMLCanvasElement} canvas &lt;canvas&gt; element.
  115.  * @param {Boolean} opt_debug flag to initialize the context for debugging.
  116.  * @return {WebGL2RenderingContext} the rendering context for WebGL.
  117.  * @see {@link https://www.khronos.org/webgl/wiki/Debugging Debugging}
  118.  * @see {@link http://learnwebgl.brown37.net/browser_environment/canvas_and_gl_context.html Getting the WebGL Context}
  119.  */
  120. function getWebGLContext(canvas, opt_debug) {
  121.   // Get the rendering context for WebGL
  122.   var gl = WebGLUtils.setupWebGL(canvas);
  123.   if (!gl) return null;
  125.   // if opt_debug is explicitly false, create the context for debugging
  126.   if (arguments.length < 2 || opt_debug) {
  127.     gl = WebGLDebugUtils.makeDebugContext(gl);
  128.   }
  130.   return gl;
  131. }