Mouse Input

For Further Reading• Learning WebGL, Lesson 11:

http://learningwebgl.com/blog/?p=1253

2

Rotating Cube by Mouse Input

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

Rotating Cube(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;}

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

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();};

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

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

Textures in WebGL

For Further Reading• Angel 7th Ed:

– Section 7.5: Texture Mapping in WebGL.• Beginning WebGL:

– Chapter 3• Learning WebGL, Lesson 5:

http://learningwebgl.com/blog/?p=507

11

Textured Cube

Summary (1/2)• OpenGL setup (house keeping) for

textures:– gl.createTexture()– gl.bindTexture()– gl.pixelStorei()– gl.texImage2D()– gl.texParameter()

13

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

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; gl_Position = projectionMatrix * ...}</script>

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