1. Mouse Input

2. For Further Reading Learning WebGL, Lesson 11: http://learningwebgl.com/blog/?p=1253 2

3. Rotating Cube by Mouse Input

4. Summary Adding handlers for mouse events. –Note that the mouse click may start on canvas but finish outside of canvas. canvas.onmousedown = handleMouseDown; document.onmouseup = handleMouseUp; document.onmousemove = handleMouseMove; 4

5. Rotating Cube (JavaScript code)JavaScript code // handlers for mouse input (borrowed from "Learning WebGL" lesson 11) var mouseDown = false; var lastMouseX = null; var lastMouseY = null; var moonRotationMatrix = mat4(); function handleMouseDown(event) { mouseDown = true; lastMouseX = event.clientX; lastMouseY = event.clientY; } function handleMouseUp(event) { mouseDown = false; }

6. function handleMouseMove(event) { if (!mouseDown) { return; } var newX = event.clientX; var newY = event.clientY; var deltaX = newX - lastMouseX; var newRotationMatrix = rotate( deltaX/10, 0, 1, 0 ); var deltaY = newY - lastMouseY; newRotationMatrix = mult( rotate( deltaY/10, 1, 0, 0 ), newRotationMatrix); moonRotationMatrix = mult(newRotationMatrix, moonRotationMatrix); lastMouseX = newX lastMouseY = newY; }

7. window.onload = function init() { var canvas = document.getElementById( "gl-canvas" );... //event listeners for buttons document.getElementById( "xButton" ).onclick = rotateX; document.getElementById( "yButton" ).onclick = rotateY; document.getElementById( "zButton" ).onclick = rotateZ;... // event handlers for mouse input canvas.onmousedown = handleMouseDown; document.onmouseup = handleMouseUp; document.onmousemove = handleMouseMove; render(); };

8. Notice! The rotation is defined in object space. –It works well only if the viewing direction is along the Z axis. –Change the eye position in lookAt() and see what happens! 8

9. Lab Time! Change the eye position and see what happens. Use the mouse input to rotate the light position instead of the object. Hints: –Apply the mouse-controlled rotation to the light position, either at the JavaScript or at the GLSL shader. –If you choose the former, then you need a matrix- vector multiplication in JS. –If you choose the latter, then an additional mat4 is needed. 9

10. Textures in WebGL

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

12. Textured Cube

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

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

15. 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/

17. Textured Cube (HTML code)HTML code... attribute vec2 vTexCoord;... varying vec2 fTexCoord;... void main() {... fColor = (ambient + diffuse) * vColor; fTexCoord = vTexCoord; gl_Position = projectionMatrix *... }

18. ... varying vec2 fTexCoord; uniform sampler2D texture; void main() { gl_FragColor = fColor * texture2D( texture, fTexCoord ); }

19. Textured Cube (JavaScript code)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) ];

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

21. 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";... }

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