1. Textures in WebGL

2. For Further Reading Angel 7th Ed: Beginning WebGL:
Section 7.5: Texture Mapping in WebGL.
Beginning WebGL:
Chapter 3
Learning WebGL, Lesson 5:

3. Textured Cube

4. Summary (1/2) OpenGL setup (house keeping) for textures:
gl.createTexture()
gl.bindTexture()
gl.pixelStorei()
gl.texImage2D()
gl.texParameter()

5. Summary (2/2) Creating image in JS.
Assuming the image file is at the same folder on the server.
Cross-Origin Resource Sharing (CORS) is discussed in P.60 of the “Beginning WebGL” eBook.
Adding texture coordinates to vertex attributes.
Texture lookup in GLSL shaders.

6. Cross-Origin Resource Sharing
Cross-Origin Resource Sharing (CORS) prohibits loading textures from local files.
To solve this, please invoke Chrome with
--allow-file-access-from-files
Or use Firefox instead!
More detail in:

8. Textured Cube (HTML code)
<script id="vertex-shader" type="x-shader/x-vertex"> ... attribute vec2 vTexCoord; varying vec2 fTexCoord; void main() { fColor = (ambient + diffuse) * vColor; fTexCoord = vTexCoord;  passing to fragment shader gl_Position = projectionMatrix * ... } </script>

9. <script id="fragment-shader" type="x-shader/x-fragment">
<script id="fragment-shader" type="x-shader/x-fragment"> ... varying vec2 fTexCoord; uniform sampler2D texture; void main() { gl_FragColor = fColor * texture2D( texture, fTexCoord ); } </script>

10. Textured Cube (JavaScript code)
var pointsArray = []; var colorsArray = []; var normalsArray = []; var texCoordsArray = []; var texture; var texCoord = [ vec2(0, 0), vec2(0, 1), vec2(1, 1), vec2(1, 0) ];

11. function configureTexture( image ) { texture = gl. createTexture(); gl
function configureTexture( image ) { texture = gl.createTexture(); gl.bindTexture( gl.TEXTURE_2D, texture ); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image ); gl.generateMipmap( gl.TEXTURE_2D ); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR ); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST ); gl.uniform1i(gl.getUniformLocation(program, "texture"), 0); } function quad(a, b, c, d) { ... pointsArray.push(vertices[a]); colorsArray.push(vertexColors[a]); normalsArray.push(normal); texCoordsArray.push(texCoord[0]);

12. window. onload = function init() {. var tBuffer = gl
window.onload = function init() { ... var tBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, tBuffer ); gl.bufferData( gl.ARRAY_BUFFER, flatten(texCoordsArray), gl.STATIC_DRAW ); var vTexCoord = gl.getAttribLocation( program, "vTexCoord" ); gl.vertexAttribPointer( vTexCoord, 2, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vTexCoord ); // // Initialize a texture var image = new Image(); image.onload = function() { configureTexture( image ); } image.src = "SA2011_black.gif";

13. Lab Time!
Use MS Paint (小畫家) to draw something and save it to a GIF file.
Use it as the texture for the above “Textured Cube” example.
You may need to create a short cut to Chrome and add --allow-file-access-from-files to the target command.