Assignment 5: Object Picking and Projections
- Due May 13, 2018 by 11:59pm
- Points 7
- Submitting a file upload
Objectives:
Setup basic object picking by clicking and projections.
Description:
This assignment comes in two parts: picking and projections.
With picking, we want to be able to select our objects in the scene by clicking on them. This is a non-trivial task, since in the end, an image drawn to the screen is just a bunch of pixels: there's nothing inherently telling us that a block of pixels is actually a cylinder.
There are several tricks to do picking. For this assignment, we will take a relatively simple approach. In WebGL, we have the ability to read pixels from the canvas and get their color. We can use this to discern objects from each other.
One trick to distinguish between different objects is alter the alpha component of the color slightly. For example, if you have multiple objects in your scene, one of them might have an alpha of 255 (totally opaque), and another might have a value of 254 (essentially opaque). This way, we can tell if we're clicking on one object or the other. This isn't the only method, but it's probably the easiest.
For projections, we will move away from our default orthographic projection (which made everything look flat and 2D) and be able to toggle what's called perspective projection. Perspective projections warp the points in a way that makes them seem 3D (farther things seem smaller, there are vanishing points, etc). To achieve this, we will need to introduce the concept of a projection matrix, which is simply a matrix that we will multiply by each of our vertices' locations.
How to Proceed:
This lab is relatively short in terms of code, and is much more technical.
For picking, you will need to use the function 'gl.readPixel', which we're going to use to get the color of a pixel on the canvas. Then, you need to write the internal code to link up your objects to their alpha "tags." Look at the posted examples for guidance.
For projections, we will need to generate a projection matrix. The 'cuon-matrix.js' library provided to you has a function that does this for you. Your job is to then pass that matrix as a uniform to the shader. Once it's in the shader, you simply multiply all of your points by the matrix before you use them. There are many examples of how to do this in the Matsuda/Lea textbook.
Also to generate your projection matrix, you'll need to give it various parameters like where the viewer is, their field of view, clipping planes, etc: all of which will be talked about more in class. You'll have to experiment with what numbers look the best. But in general, the change going from an orthographic projection (what you had before) to a perspective projection is subtle. The main difference you'll notice is at the ends of your cylinders, which will look slightly rounded.
Resources:
Pick Object (weird picking) Links to an external site. <--- Located in Chapter 10 (this method is kind of weird, but it does show how to use 'gl.readPixel'. It's perhaps a little more flexible, but is not necessary for our assignments).
Pick Face (alpha picking) Links to an external site. <--- Located in Chapter 10 (this method uses alpha picking)
Perspective Projection Links to an external site. <--- Located in Chapter 7
Rubric
Criteria | Ratings | Pts |
---|---|---|
2r. The user can click on a cylinder to highlight it (on and off).
This is for a single object. If the user clicks on the object, it becomes highlighted. If they click on the background, it becomes un-highlighted.
To highlight, there are various techniques. The simplest is to have a uniform bool (or a float) that is true of false depending on whether the object is clicked. Then, if it's true, we add onto our final color calculation a fixed color (0.1,0.1,0.1,0).
threshold:
pts
|
pts
--
|
|
3r. The objects on the canvas are displayed with a perspective projection (rather than the default orthographic).
Specific parameters (LookFrom/etc) can vary. However, difference should be noticeable and not distracting. To do this, you should make 2 new uniforms: u_ViewMatrix and u_ProjMatrix. Then, after setting them (as shown in the Matsuda/Lea 'PerspectiveView' example), pass them to the shader, where your positions are then multiplied by the matrices.
threshold:
pts
|
pts
--
|
|
1r. When the user clicks on the canvas, the color of the clicked pixel is printed to console.
threshold:
pts
|
pts
--
|
|
1e. Implement part of your UI within the canvas. At least 2 interactable items should be put inside the canvas.
For example, you might have some HTML buttons that control some aspect of your assignment. Turn those buttons/sliders/etc into interactable objects on the canvas. For example, you could have a square on your canvas that, when clicked, turns the lights on and off.
threshold:
pts
|
pts
--
|
|
2e. Implement a button (HTML or canvas) that toggles between orthographic and perspective projection.
Specific parameters (LookFrom/etc) can vary. However, difference should be noticeable and not distracting. To do this point, you should make 2 new uniforms: u_ViewMatrix and u_ProjMatrix. Then, after setting them (as shown in the Matsuda/Lea 'PerspectiveView' example), pass them to the shader, where your positions are then multiplied by the matrices.
threshold:
pts
|
pts
--
|
|
3e. Have a slider that changes the near/far planes
For full credit, we should be able to see clipping at some point. See this example: http://rodger.global-linguist.com/webgl/ch07/OrthoView_halfSize.html
threshold:
pts
|
pts
--
|
|
4e. Have a button that, when pressed, teleports the camera to view the scene at a different angle.
This can be a fixed position (finer camera movements will be required in a later assignment). We should be able to see your objects at a significantly different angle (e.g. from the top right, from behind, etc).
threshold:
pts
|
pts
--
|
|
5e. Be able to click and highlight between multiple objects.
This only applies if you implemented multiple objects. If you click on an object, all other highlights turn off, and the clicked object is highlighted. If the background is clicked, all highlights are removed.
threshold:
pts
|
pts
--
|
|
6e. Have objects light up a different color when the mouse is hovering over them.
threshold:
pts
|
pts
--
|