Textures in WebGL

For Further Reading Angel 7th Ed: Beginning WebGL: Section 7.5: Texture Mapping in WebGL. Beginning WebGL: Chapter 3 Learning WebGL, Lesson 5: http://learningwebgl.com/blog/?p=507

Textured Cube

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

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.

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: http://www.realtimerendering.com/blog/setting-up-a-windows-server-for-webgl/

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>

<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>

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) ];

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]);

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";

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.