Exhibit #6: Creating and Using GLSL Programs

What We Did

• In this exhibit, we create GLSL programs and switch between them.
• To create a GLSL program, you need source code for its vertex shader and fragment shader.
• Source code can be specified in the script element. For examples:

  <script id="vertexShader0" type="x-shader/x-vertex">
      attribute vec3 vert_position;
  
      void main() {
          gl_Position = vec4(vert_position, 1.0);
      }
  </script>

  or

  <script id="fragmentShader0" type="x-shader/x-fragment">
      precision highp float;
  
      void main() {
          gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
      }
  </script>

  The source code is written in GLSL. We'll worry about its details in the next exhibit.
• Creating a program out of these pieces of source code is a multi-step process. It's best to look in the code to see what's involved. It's also best to familarize yourself with the process so that you can create your own abstraction to bypass it altogether. (We did say that building thing from scratch is very tedious and error-prone, right?)
• Once you get a program object out of the above process (let's call it program), you can use it with gl.useProgram(program).
• If you don't want to use any program (say, when you're done with the current program), issue gl.useProgram(null)
• You can get the program being use with gl.getParameter(gl.CURRENT_PROGRAM)
• In this exhibit, we allow the user to change between program0 and program1 and using no single program.
  • Open the console to see the script reports which program is being used.