Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
WebGL Textures & Vertices: Beginner's Guide
WebGL Textures & Vertices
Beginner's Guide
Introduction
WebGL Enables Online 3D Media
Series: Online 3D Media with WebGL
This Book's Project List
Lighthouse Texture Map and Tiled Butterfly Fish
Cropped Butterfly Fish and Repeating Lighthouse
Animated Rotationand Bonus Procedural Textures
Bonus Project: Procedural Textures
WebGL Overview
OpenGL ES 2.0
Shader Overview
Conventions
Object Oriented Design
GLEntity Class
GLControl Class
Efficiency
The Book's Structure
Vertices and Meshes Overview
Diagram 1: 2D Cartesian Coordinate Graph
Third Dimension
Diagram 2: Cube on with Three Axes
Diagram 3: Viewport
WebGL Texture Overview
Powers of Two
Cross Domain Rules
Texels
Diagram 4: Texels
Lighthouse Texture Map
Display a Photograph on a Square Mesh
Start with the Web Page
Sample Web Page
Listing 1: Sample Web Page
Diagram 5: Associate Vertices with Texels
Listing 2: Interleaved Array
WebGL API Cast Float32Array(Array)
Element Array Buffer
Diagram 6: Associate Indices with Vertices and Texels
Winding Order
Culling
Diagram 7: Winding Order
Create an Element Array
Listing 3: Element Array for One Triangle
Listing 4: Element Array for One Square
WebGL API Cast Uint16Array(Array)
JavaScript to Display a Textured Square
Listing 5: GLSquare Formal Declaration
Use GLSquare(String) to Texture a Square
Listing 6: New GLSquare for Lighthouse
Use GLEntity(String,Number) to Declare Texture Values
Listing 7: GLEntity for Lighthouse Texture Map
Create a Controller: GLControl(Float32Array, Uint16Array, Array<GLEntity>, glDemo)
Listing 8: Initialize the Controller
Lighthouse Texture Map Summary
Crop a Texture Map
Diagram 8: Convert Crop Pixels to Texels
Convert Pixel Crop Coordinates to Texel Values
Top Left Crop Texels
Bottom Right Crop Texels
Listing 9: Lighthouse Cropping Texels
Listing 10: Customized Cropping Coordinates
Crop a Texture Map Summary
Tile a Texture Map
Listing 11: Tiled Array of Vertices and Texels
Listing 12: Tiled Element Index Array
Tile a Texture Map Summary
Display Repeating Graphic
Listing 13: Array Repeats Texture 4 x 4 Times
Listing 14: Array Repeats Texture 2 x 8 Times
Listing 15: Repeating Element Array
Repeat Texture Initialization
WebGL API Method texParameteri(target, wrap mode, REPEAT)
Listing 16: WebGL API texParameteri(...) Repeat Horizontal Axis
Listing 17: WebGL API texParameteri(...) Repeat Vertical Axis
Display Repeating Graphic Summary
Procedural Textures Bonus Project
Prepare Four Procedural Textures
Listing 18: Assign Procedural Data
Select a Procedural Texture from the Menu
Listing 19: Menu for Procedural Textures
Show Array Data
WebGL API Type Uint8Array
Procedural Texture: Red Square
Listing 20: Generate Solid Red Procedural Data
Procedural Texture: Blue Green Gradient
Listing 21: Generate Blue Green Gradation Procedural Data
Procedural Texture: Red Blue Stripes
Listing 22: Generate Red and Blue Stripes Procedural Data
Procedural Texture: Four Tiles
Find the Top Half
Find the Left Half
Listing 23: Generate Tiles Procedural Data
Procedural Texture: Red Green Random Colors
Listing 24: Generate Random Colors Procedural Data
WebGL Properties for Procedural Textures
Change to WebGL Initialization
Diagram 9: Procedural Texture Diagram
WebGL API texImage2D() for Procedural Textures
Listing 25: WebGL API texImage2D() for Procedural Textures
Procedural Textures Summary
Initialization
Initialization Activity Diagram
Diagram 10: Activity Diagram
Controller Overview
GLControl Constructor
GLControl Initialization
Entity Overview
GLEntity Constructor
GLEntity Structure
Activate GLEntity Texture Unit
Listing 26: Assign GLEntity Sampler to Texture Unit
GLEntity Initialization
Controller Details
Obtain a WebGLContext
Listing 27: getGLContext(canvas)
Compile and Link Shaders with a Program
Diagram 11: Activity Diagram Compile and Link Shaders with a Program
Compile and Link a Program
Listing 28: getShader(String, FRAGMENT_SHADER)
Listing 29: getShader(String, VERTEX_SHADER)
WebGL API createProgram()
Listing 30: WebGL API createProgram()
WebGL API attachShader(WebGLProgram, WebGLShader)
Listing 31: Attach Fragment Shader
Listing 32: Attach Vertex Shader
WebGL API linkProgram(WebGLProgram)
Listing 33: WebGL API linkProgram(WebGLProgram)
WebGL API useProgram(WebGLProgram)
Listing 34: WebGL API useProgram(WebGLProgram)
Compile Shaders
WebGL API createShader(type)
Listing 35: WebGL API createShader(type)
Shader Source Code
Listing 36: Assign the Default Vertex Shader
Listing 37: Assign the Default Fragment Shader
WebGL API shaderSource(WebGLShader, String)
Listing 38: WebGL API shaderSource(WebGLShader,String)
WebGL API compileShader(WebGLShader)
Listing 39: WebGL API compileShader(WebGLShader)
WebGL API getShaderParameter(WebGLShader, COMPILE_STATUS)
Listing 40: WebGL API getShaderParameter(WebGLShader, COMPILE_STATUS)
WebGL API getShaderInfoLog(WebGLShader)
Listing 41: WebGL API getShaderInfoLog(WebGLShader)
Shader Details
Shader Storage Qualifiers
Shader Uniforms
Shader Varyings
Shader Attributes
Shader Variable Types
Shader Type vec2
Shader Type vec4
Shader Type mat4
Shader Type sampler2D
The Vertex Shader
Vertex Shader Introduction
Listing 42: Vertex Shader with Line Numbers
Attribute Processing
Vertex Shader Summary
The Fragment Shader
Fragment Shader Introduction
Listing 43: Fragment Shader with Line Numbers
Diagram 12: WebGL API texture2D(sampler2D, vec2)
Fragment Shader Summary
4 x 4 Matrices
Default Identity Matrix
Diagram 13: Identity Matrix
Translation
Diagram 14: Matrix Translation
Default Matrix for Each Entity
Diagram 15: GLEntity Default matrix Property
Rotation Around the Y Axis
Diagram 16: Y Axis Rotation
Listing 44: Method matrixRotationY(Array, Number)
Listing 45: Generate Y Rotation
Perspective Projection
Perspective Projection Overview
The Book's Perspective Projection Matrix
Listing 46: Perspective Projection in the Vertex Shader
Diagram 17: Center of Projection
Upload a Perspective Projection Matrix to the Shader
WebGL API getUniformLocation(WebGLProgram,String)
Listing 47: WebGL API getUniformLocation(WebGLProgram,String)
Listing 48: JavaScript Perspective Projection Matrix
WebGL API uniformMatrix4fv(WebGLUniformLocation, Boolean, Float32Array)
Listing 49: WebGL API uniformMatrix4fv(WebGLUniformLocation, Boolean, Float32Array)
Perspective Projection Summary
Access Shader Program Variables
Listing 50: Save uniform um4_matrix to property uMatrixTransform
WebGL API getAttribLocation(WebGLProgram, String)
Listing 51: WebGL API getAttribLocation(WebGLProgram, String)
WebGL API enableVertexAttribArray(Number)
Listing 52: WebGL API enableVertexAttribArray(Number)
WebGL API viewport(Number x,Number y,Number w,Number h)
Listing 53: WebGL API viewport(Number x,Number y,Number w,Number h)
Access Shader Program Variables Summary
Prepare Buffers
Diagram 18: getBuffers()
Listing 54: Save Element Index Array Length
Prepare the Vertex Texel Buffer
WebGL API createBuffer()
WebGL API bindBuffer(ARRAY_BUFFER, WebGLBuffer)
Listing 55: WebGL API bindBuffer(ARRAY_BUFFER, WebGLBuffer)
WebGL API bufferData(ARRAY_BUFFER, Float32Array, STATIC_DRAW)
Listing 56: WebGL API bufferData(ARRAY_BUFFER, Float32Array, STATIC_DRAW)
WebGL API vertexAttribPointer() for Vertices
Listing 57: WebGL API vertexAttribPointer() Formal Declaration
Listing 58: WebGL API vertexAttribPointer() for Vertices
Prepare the Element Array Buffer
Listing 59: WebGL API bindBuffer(ELEMENT_ARRAY_BUFFER, WebGLBuffer)
WebGL API bufferData(ELEMENT_ARRAY_BUFFER, Uint16Array, STATIC_DRAW)
Listing 60: WebGL API bufferData(ELEMENT_ARRAY_BUFFER, Uint16Array, STATIC_DRAW)
Prepare Buffers Summary
Entity Details
Prepare Textures
Diagram 19: Prepare Textures
Prepare Textures from Images
Listing 61: Call getImageVariables(GLControl)
GLEntity Method getImageVariables(GLControl controller)
Listing 62: Save Uniform sampler2D Location
Listing 63: Save Attribute Location
WebGL API vertexAttribPointer() for Texels
Listing 64: WebGL API vertexAttribPointer() for Texels
Calculate Stride and Offset
Diagram 20: Calculate Offsets
Listing 65: WebGL API enableVertexAttribArray(Number) for Texels
Load the Image File
Passing Values Through Event Listeners
Listing 66: Assign GLControl and GLEntity to Image
Listing 67: Assign Image onload Event Listener
getImageVariables(GLControl controller) Summary
Assign WebGL Texture Properties
Diagram 21: After Images Download
Listing 68: Retrieve GLControl and GLEntity from Onload Event
Texture by Unit Number
Texture Preparation Sequence
WebGL API uniformi(WebGLUniformLocation, Number)
Listing 69: WebGL API uniform1i(WebGLUniformLocation, Number)
WebGL API createTexture()
WebGL API activeTexture(Number)
Listing 70: WebGL API activeTexture(Number)
WebGL API bindTexture(Number, WebGLTexture)
Listing 71: WebGL API bindTexture(Number, WebGLTexture)
WebGL API pixelStorei(Number, boolean)
Listing 72: WebGL API pixelStorei(Number, boolean)
WebGL API texImage2D() for Image Files
Listing 73: WebGL API texImage2D() for Image Files
Clamp Textures Edge to Edge
WebGL API Method texParameteri(target, Number wrap mode, CLAMP_TO_EDGE)
Listing 74: WebGL API texParameteri() Wrap Horizontal Axis
Listing 75: WebGL API texParameteri() Wrap Vertical Axis
Clamp Textures Edge to Edge Summary
Minification and Magnification Filters
WebGL API Method texParameteri(target, TEXTURE_MIN_FILTER, repeat type)
Listing 76: WebGL API Method texParameteri() For TEXTURE_MIN_FILTER
WebGL API Method texParameteri(target, TEXTURE_MAG_FILTER, repeat type)
Listing 77: WebGL API Method texParameteri() For TEXTURE_MAG_FILTER
Minification and Magnification Filter Summary
Entity Summary
Finalize then Display the Mesh
Listing 78: Call setProgramVariables(controller)
Validate the Program or Read Error Messages
WebGL API validateProgram(WebGLProgram)
Listing 79: WebGL API validateProgram(WebGLProgram)
WebGL API getProgramParameter(WebGLProgram, Number)
Listing 80: WebGL API getProgramParameter(WebGLProgram,Number)
WebGL API getProgramInfoLog(WebGLProgram)
WebGL API getProgramInfoLog(WebGLProgram)
WebGL API deleteProgram(WebGLProgram)
Successful Program
Listing 81: Unique Initialization For a Project
Draw One Frame
Method animOne(ev)
Method drawSceneDefault(controller) Renders One Frame
Listing 82: Upload Default Matrix to Vertex Shader
WebGL API drawElements(mode,count,type,offset)
Listing 83: WebGL Method drawElements()
Draw One Frame Summary
Animated Rotation
Animation Web Page
Listing 84: Load the Butterfly Fish Example
Assign Event Listeners
Listing 85: addEventListener() to the canvas
Rotate and Stop Buttons
Listing 86: Obtain Rotate and Stop Buttons
Listing 87: Assign GLControl to Button controller Property
Listing 88: Animation Start and Stop Event Listeners
Assign Event Listeners Summary
Animation Activity Diagram
Recursion
Diagram 22: Animation Overview
JavaScript window.requestAnimationFrame(Function)
Listing 89: Save window.requestAnimationFrame Functionality
Start the Animation
Listing 90: Method animStart() Save Controller Reference
Listing 91: Call requestAnimationFrame(Function)
Timed Animation
Check the Time with checkFrameTime(controller)
Method render()
Determine render() Method Reference
Draw the Animated Rotating Mesh
Listing 92: Rotate the Matrix
WebGL API uniformMatrix4fv(WebGLUniformLocation, boolean, Float32Array) Rotation Matrix
Listing 93: Upload Rotated Matrix to Vertex Shader
WebGL API drawElements(mode,count,type,offset)
Listing 94: Default Rendering: WebGL API drawElements()
Animation Rotation Summary
WebGL Textures & Vertices: Beginner's Guide Summary
Source Code
GLControl.js
GLControl getProgram()
GLControl getBuffers()
GLControl getProgramVariables()
GLControl setProgramVariables()
GLControl animOne()
GLControl animStart()
GLControl animStop()
GLControl getGLContext()
GLControl getShader()
GLControl setListeners()
GLControl viewError()
GLControl checkFrameTime()
GLControl renderDefault()
GLControl drawScene()
GLControl matrixRotationY()
GLControl matrixRotationX()
GLEntity.js
GLEntity getImageVariables()
GLEntity setImage()
GLEntity setWrapToEdges()
GLEntity setMinMagFilters()
GLEntity setActiveTexture()
GLSquareCrop.js
GLSquareCrop Constructor
GLSquare.js
GLSquare Constructor
GLSquareTile.js
GLSquareTile Constructor
GLSquareRepeat.js
GLSquareRepeat Constructor
GLSquareRepeat init() Method
GLTexProcedure.js
GLTexProcedure Constructor
GLTexProcedure Method setListener(controller)
GLTexProcedure Method optionSelect(ev)
GLTexProcedure generateSquareR()
GLTexProcedure generateStripesRB()
GLTexProcedure generateTilesRGB()
GLTexProcedure generateGradientBG()
GLTexProcedure generateRandomRG()
GLTexProcedure Method printArray(s,a)
Source Code Downloads
Copyright
← Prev
Back
Next →
← Prev
Back
Next →