A look at Homework Five

• We will look at some of the common files in much more detail soon.
  • DO NOT MAIL ME COPIES Of the common files.
  • This will be an irreplaceable point loss.
• References
  • I use my GLSL books
  • On line references
  • This file is helpful.
• In the vertex shader
  • GLSL supports a number of C++/FORTRAN like types.
  • See page 6 of the reference guide
  • 
  • Also a number of standard operators
  • 
  • NOTE THE COLUMN MAJOR matrix
  • vPosition is tied to
    • The buffers in the bind commands later.
    • The vertexes in the bind commands later
  • gl_Position is a required output, passed down the pipeline
• SetupGL
  • Not too much here, but we do use a function from Common/WebGLUtils
  • We will us the gl context throughout the program
  • We add an extension for the needs of some future work.
• makeShaders
  • Compiles the shader code and ships it to the GPU
  • Did you try to introduce a syntax error and see what happens
  • If so, good for you, if not, silly you.
  • Note, we will possibly change programs in our work.
• The init function
  • viewport(x,y,width,height)
    • Lower left corner of the viewport
    • These are GLint values (GL type definitions)
    • The width and height of the canvas (GLsizei)
  • The viewport is the picture frame we look through.
  • We could use multiple viewports in a program to draw things in different locations on the canvas.
• OpenGL/WebGL is sometimes called a state machine
  • This is not what you discussed in AI
  • This is just a machine where a setting persists until it is changed.
• If we wanted to draw four different views of a scene in the same canvas
  • Set the viewport for scene 1
  • Display it
  • Set the viewport for scene 2
  • Display it
  • ...
• gl.clearColor(r,g,b,a)
  • Sets the value used to clear the color buffer (frame buffer)
  • The values are between 0 and 1
  • Note, this does not clear the color, it just "flips a switch" on the WebGL machine.
• gl.clear
  • Can clear one of three buffers.
    • gl.COLOR_BUFFER_BIT
    • gl.DEPTH_BUFFER_BIT
    • gl.STENCIL_BUFFER_BIT
  • We will probably only use the first two.
• Setting up a VBO
  • A VBO holds
    • Vertex information
    • attributes.
  • Think of it as an primitive stored in the GPU
  • There is a "currently active " vbo.
    • gl.bindBuffer(target, buffer pointer)
    • Binding the first time creates a VBO and makes it active.
    • Binding after that just makes the buffer active.
    • There are numerous types of buffers, but we will probably exclusively use a array buffer.
  • We now need to put data into the VBO
  • This is done through attributes
  • gl.getAttribLocation(program, name);
    • Get the location of the attribute in the program.
  • gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
    • Describe the data that you will be storing in the attribute
      • The index is a location in the buffer of the attribute.
      • The Size is the number of components per vertex, (1,2,3,4 are permissible values)
      • The type is the type of data stored at each point
      • Normalized specifies if it is between [0,1] or [-1,1] for some values.
        • Not applicable for float
      • Stride is used if you are not using all of the data in the array
      • Offset is used if you are not using all of the data in the array.
      • We will discuss the last two in more detail later.
  • gl.enableVertexAttribArray(index); Makes the attribute active.
  • gl.bufferData(target, sourceData, usage);
    • The target is the type of array we are passing.
    • The sourceData is the data we are passing
    • Usage how the data will be used.
    • I am apparently using an older version of this call.
    • I may update it as we go.
• Finally in Display
  • Bind the buffer and make the attribute current.
  • gl.drawArrays(mode, first, count);
    • Draw the data in the buffer.
    • How do you want to draw the data.
      • Look here
    • Where to start drawing.
    • The number of items to draw.