Week 8: More on Vertex and Fragment Shaders

Link to source code (zipped)

• Example 1: Per Vertex Colors?!
• New Shader files: (in GLSLShaders)
• ColorVertexVS
• attribute: aVertexColorValue
• We know this will be fed from a buffer in the WebGL Memory!!
• varying: vColorValue
• This is feed directly out!?
• Code changes:
• One single line!
• ColorVertexFS
• varying: vColorValue
• NOTE: this MUST match the VS varying variable
• ColorVertexShader.js: wrapping the GLSL shader for our library
• Defined in Shader/ folder
• Subclass from SimpleShader (re-use most of the code)
• Notice:
• New buffer allocation. 4 elements per vertex!
• Buffer type is DYNAMIC_DRAW
• What is the definition of a “vertex”?: For now, (x,y,z) and (r,g,b,a)
• activateShader()
• calls super class (notice the syntax)
• Also, binds and sends the new color buffer!! (to connect to the aVertexColorValue attribute)
• Renderable: can now connect to two potentially different shaders
• Can argue should have class hierarchy (E.g., ColorVertexRendearble), won’t argue here. Design decision.
• Now defines a perVertexColor (can set)
• Sends to shader before draw
• SquareRenderable:
• Makes explicitly call Renderable.draw()
• ClassExample:
• Supports defining Renderables with two potentially different kinds of Shader
• Lesson:
• GLSL:
• Review: “attribute” variable
• New: “varying” variable: always linearly interpolate from vertices!!
• In WebGL (and any graphics library), the definition of a “vertex” is more than just (x,y,z) position!!
• In this case, we have a color value associated with each vertex!
• Review:
• Our js-Shader: wraps over GLSL shaders
• One js-Shader per each set of GLSL shaders
  
  
• Example 2: How to load an image (not graphics example, just html)
• I did not know how to do this. So.
• All changes are in index.html
• <input type=”file” …>
• MainController.js: acceptFiles() function
• Lesson:
• Big deal.
  
  
• Example 3: File Texture
• NOTE: webgl only supports file textures (images) with resolutions of: 2^n x 2^m
• n and m can be integers < 10 or 11 or 12.
• REMEMBER this!! Or else, no file texture will show!!
• Engine_Core: Inside iniitalizeWebGL
• Alpha Blending
• Flipping Y-up/down for ST referencing
• Engine_VertexBuffer:
• Define Static textureCooridnates
• Notice, the pattern: define buffer, bind buffer, load data
• Now, a vertex: (xyz) (rgba) (uv)
• New GLSL shaders: to work with file textures
• TextureVS:
• attribute: aTextureCoordate
• We know this will be fed from a buffer in the WebGL Memory!!
• varying: vTexCoord
• This is feed directly out!?
• Code changes:
• One single line! (again!)
• TextureFS
• uniform uSampler
• What is uniform?
• sampler2D: ß web-gl utility/data-type
• Hint: ß connected to an image we loaded into web-gl memory
• varying: vTexCoord
• texture2D() ß web-gl library function call
• FileTextureShader.js: wrapping the GLSL shader for our library
• Defined in Shader/ folder
• Subclass from ColorVertexShader (re-use most of the code)
• Notice:
• uniform: reference to uSampler
• attribute: aTextureCoordinate connected to this.mShaderTextureCoordAttribute
• activateShader(): binds the texture coordinate
• FileTextureSupport: (defined in Renderable)
• Thin interface to WebGL File Textures
• processedLoadedImage(): familiar to allocating buffers!
• activateTexture(): again, familiar to bind/use format
• Notice: working with texture unit-0
• Texture layering?!
• Renderable:
• New instance mFileTexture [of FileTextureSupport datatype]
• Draw():
• If mFileTexture is defined, calls to activateFileTexture()
• SquareRenderable:
• Make sure switch off texture map after drawing
• ClassExample
• New mode: creation of FileTexture shaders
• mFileTexture: ß representing an open file
• use for Renderable objects
• Lesson:
• Hardware (often) only supports specific file format/size!!
• 2^n x 2^m !!!!
• A “vertex” definition can change depending on the shader … in this case:
• SimpleShader: as simple as (xyz)
• ColorVertexShader: (xyz) (rgba)
• TextureShader: (xyz) (rgba) (uv)
• “Sticking” an image on a shape is a simple matter of coordinate mapping