Week 9: More on File Textures

Link to source code (zipped)

• Example 1: Transform File Textures
• PivotedTransform:
• getXform2d(): New function to compute 3x3 matrix
• GLSL Shader update
• TextureVS
• uniform: uTextureTransform
• 3x3 matrix to transform 2d UV locations
• Check out how we transform the UV vertex positions
• TextureFS
• uniform: uBlendColor
• Just for fun, allow blending of vertexColor with texture mapped results
• FileTextureShader.js: wrapping the GLSL shader for our library
• New references to the two new uniforms
• For loading of CPU values to the Vertex Shader
• Define new functions to set the transform and the blend-flag
• Renderable: supports FileTexture and now transform for the file texture and blending
• Instance variables:
• mTextureTransform è this is the PivotedTransform for transforming the texture
• mBlendColor è flag for blending colors
• and getter/setter
• draw() function
• if FileTexture is defined
• loads transform to the Vertex Processor
• ClassExample:
• Only supports creation with FileTextureShader
• Lesson:
• Transforms:
• Operates perfectly on texture coordinate positions
• Texture placement:
• Values of texture transform for placing texture on geometry
• Value of well-structured library:
• Relatively minor changes to support rather powerful new function!
  
  
• Example 2: [some of the] Attributes of a file texture
• Wrapping in S and T directions
• Clamp, Repeat, Repeat-Mirrored
• Magnification filtering
• When original image is small, and display to a large screen area
• Nearest, Linear [about 4x more expensive!]
• Minification filtering
• When original image is large, and display to a smaller screen area
• Concept of a Mipmap [this is why 2^n x 2^m resolution]
• Code change: Mostly in FileTextureSupport.js
• When activateTexture, sets the user specified attributes.
• Lesson:
• Repeats in ST directions
• Artifacts when texture size and display geometry sizes are not the same!
• Mipmap a way of filtering
  
  
• Example 3: Multi Texturing, let’s support many textures!
• TextureVS:
• Array of transforms and vTexCoord
• Question: why don’t we need 8-channels of UV coordinate from the CPU?
• TextureFS:
• 8x sampler2D!!
• Note: Fragment Shader does not allow vTexCoord[i]
• The array index MUST be constant in the Fragment Shader (for our version)
• Note: Fragment Shader does not allow variable size for loop
• The (i < uNumTextues) ß is NOT allowed! Must be a constant!
• Ugly code, but simple logic
• FileTextureShader:
• Need array of references to the Transforms and the Sampler
• SetTextureTransform: now needs an index, to decide which of the transform in the Vertex Processor should be set.
• FileTextureSupport:
• activeTexture: receive an gl-Unit number instead of hardcode to gl.Texture0
• set to glTexture0 + i
• Renderable:
• Make arrays of: FileTexture and TextureTransform
• Instead of set/get from the one instance, now support an array
• Lesson:
• Relatively straightforward to “widen” the connection between CPU, Vertex Processor, and Fragment Processor
• Multi-texturing can be used to support many effects
• Tire-marks on the road (that can disappear after a while)
• Dirt on the wall (that can become clean again later)
• Light-illumination circle shinning on the wall
• “Sticking” secondary images on the base image to create effects.