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.
    • 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 in javascript

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

  • The vertex shader

    • <script id="vertex-shader" type="x-shader/x-vertex">
      
      attribute vec4 vPosition;
      
      void main() {
          gl_PointSize = userPointSize;
          gl_Position = vPosition;
      }
      </script>
      

    • Much more later but ...
    • An attribute, in GLSL, is a input variable.
      • It comes from the thing calling the shader, ie the Javascript program.
      • 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 the attribute userPointSize
      • gl_PointSize is a predefined value in the pipeline that determines the size, in pixels, used to draw a point.
      • Reference
    • And we pass the vertex position on down the pipeline
      • This is done with a pipeline variable gl_Position
      • reference
  • The Fragment Shader

    • <script id="fragment-shader1" type="x-shader/x-fragment">
      
      void main() {
          gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
      }
      </script>

    • This just tells the pipeline to draw every pixel red.
      • gl_FragColor is a variable that is passed on that describes the color to use to draw this fragment (pixel)
• "Include" files.
  • There are a set of utility files floating around the net.
  • You will want these.
  • You can include the links below if you are online.

    • <script src="https://mirkwood.cs.edinboro.edu/~bennett/GraphicsCode/Common/webgl-utils.js" ></script>
      <script src="https://mirkwood.cs.edinboro.edu/~bennett/GraphicsCode/Common/initShaders.js"></script>
      <script src="https://mirkwood.cs.edinboro.edu/~bennett/GraphicsCode/Common/MV.js"></script> 

  • If not 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 src="../Common/webgl-utils.js" ></script>
      <script src="../Common/initShaders.js"></script>
      <script 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.
      • You could just build the canvas in html and pass it in to the constructor.
    • Sets up a WebGL context
      • You should not really concern yourself with this code.
      • Just do it.
    • Compiles and installs the shaders
      • You should not really concern yourself with this code.
      • Just do it.
    • Creates a Vertex Buffer Object
      • We do care about this.
      • It will be the topic of discussion.
    • Sets up a viewport
      • reference
      • This is a map from the 3d view volume into the canvas.
        • It doesn't matter right now, but the Normalized 3D view volume is from (-1,-1,-1) to (1,1,1)
        • reference
      • This defines where on the canvas things will be drawn.
      • In general you use the entire canvas.
      • But there is no need to do this...
    • Creates the object to be displayed.
      • We need to have a significant discussion of this.
    • And initializes everything
      • gl.clearColor
        • reference
        • Sets the value with which to clear the buffer.
      • We will need to talk about gl.bufferData.
  • SetPointSize
    • This communicates the new point size to the shader.
    • The uniform UserPointSize is declared in the vertex shader.
    • It is mapped to this.PointSizeLoc in SetupVBO
    • It is used in this function.
  • Other methods
    • SetShape configures the way the image will be rendered.
    • Display renders the scene
      • gl.clear
        • reference
        • Clears the specified buffers.
        • In this case, we are clearing the Color buffer.
        • We will also clear the depth buffer.
      • gl.DrawArrays
        • Reference
        • This actually performs the drawing.
        • This draws the active array.
        • Using the type type given.