OpenGL Practical

• Our Goal
• This code is for introduction purposes.
  • WE WILL BE CHANGING IT.
  • But you should understand what is in this code first.
  • I am pulling information from many sources.
    • Your book is a reference.
    • As are the redbook and the bluebook.
    • Plus the web.
  • I would expect you to use this code in the future.
• Shaders
  • WebGL/OpenGL programs need shaders.
  • There is no good way to include shaders.
    • So we will put them into the html document.
    • They are essentially programs that get compiled
    • They run on the GPU
    • Notice the html wrappers for these
      • We will use the ID later

      • this.program = initShaders(this.gl, "vertex-shader","fragment-shader");
        

  • The vertex shader

    • attribute vec4 vPosition;
      
      void main() {
          gl_PointSize = 3.0;
          gl_Position = vPosition;
      }
      

    • Much more later but ...
    • An attribute is a input variable.
      • It comes from the thing calling the shader.
      • We will see this later.

      • let vPosition = this.gl.getAttribLocation(this.program, "vPosition"); 

      • Here we are defining a vertex position.
    • We set a real attribute, the point size to be 3
    • And we pass the vertex position on down the pipeline
  • The Fragment Shader

    • void main() {
          gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
      } 

    • This just tells the pipeline to draw every pixel red.
• "Include" files.
  • There are a set of utility files floating around the net.
  • You will want these.
  • Please place them in a directory called Common at the level of your homework directory.
    • 
    • DrawLines is my project directory.
    • Common contains the common include files.
    • Your html file should load them as follows

    • <script type="text/javascript" src="../Common/webgl-utils.js"></script>
      <script type="text/javascript" src="../Common/initShaders.js"></script>
      <script type="text/javascript" src="../Common/MV.js"></script> 

    • If you use another structure, adjust appropriately
    • I will have this directory in my grading area
    • If you don't link to it properly, I will take points off.
    • If you ship me your common files, I will take points off.
  • Here is a link to my copies.
    • I have modified them slightly for our use.
    • They are not my files, but I use them.
      • webgl-utils.js
      • initShaders.js
      • MV.js
  • We will discuss these libraries in the future.
  • But we need them for
    • Variable types (vec4 for example)
    • Library calls (initShaders)
    • The gl context and other things.
• The new canvas
  • Work with the canvas is much more involved.
  • So I have created a canvas class.
    • Right now it contains the thing that is to be drawn.
    • This is for simplicity, we will remove it later.
  • It is contained in canvas.js.
  • The constructor
    • Creates a canvas and inserts it into the document.
    • Sets up a WebGL context
    • Compiles and installs the shaders
    • Creates a Vertex Buffer Object
    • Sets up a viewport
    • Creates the object to be displayed.
  • Other methods
    • SetShape configures the way the image will be rendered.
    • Display renders the scene