Picking (In WebGL) Picking idea

Transcription

1 9. Picking IN THIS CHAPTER Selecting objects in a WebGL scene using the mouse Creating and using offscreen framebuffers What renderbuffers are and how they are used by framebuffers Reading pixels from framebuffers Using color labels to perform object selection based on color

2 Picking (In WebGL) Selecting objects in a WebGL scene using the mouse Select objects by casting a ray (vector) from the camera position Ray casting 2D Viewport space -> 3D world space (complex) You implement gluunproject() Picking based on object colors Picking idea Set up off-screen framebuffer Render to off-screen framebuffer Assign one color per object in the scene Click on the canvas Read pixels from off-screen framebuffer Look up for hits Process hits

3 Setting up an offscreen framebuffer Framebuffer is the final rendering destination in WebGL Set up a new framebuffer and tell WebGL that we want to use it instead of the default one Creating a texture to store colors Creating a Renderbuffer to store depth information Creating a framebuffer for offscreen rendering Creating a texture to store colors var canvas = document.getelementbyid('canvas-element-id'); var width = canvas.width; var height = canvas.height; var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, gl.rgba, width, heigh ht, 0, gl.rgba, gl.unsigned_byte, null); Just allocating the space to store colors for the offscreen framebuffer

4 Creating a Renderbuffer to store depth information var renderbuffer = gl.createrenderbuffer(); gl.bindrenderbuffer(gl.renderbuffer, renderbuffer); gl.renderbufferstorage(gl.renderbuffer, gl.depth_component16, width, height); Creating a framebuffer rendering for offscreen var framebuffer = gl.createframebuffer(); gl.bindframebuffer(gl.framebuffer, framebuffer); gl.framebuffertexture2d(gl.framebuffer, gl.color_attachment0, gl.texture_2d, texture, 0); gl.framebufferrenderbuffer(gl.framebuffer, gl.depth ATTACHMENT, gl.renderbuffer, renderbuffer); The texture is attached for color The renderbuffer is attached for depth gl.bindtexture(gl.texture_2d, null); gl.bindrenderbuffer(gl.renderbuffer, null); gl.bindframebuffer(gl.framebuffer, null); The previously created framebuffer is unbound, the WebGL state machine goes back to rendering into the screen framebuffer

5 Assigning one color per object in the scene Pick an object based on its color Assuming that each object has a unique diffuse property Offscreen rendering Onscreen redering Rendering to an offscreen framebuffer function render() //off-screen rendering gl.bindframebuffer(gl.framebuffer, framebuffer); gl.uniform1i(program.uoffscreen, true); draw(); //on-screen rendering gl.bindframebuffer(gl.framebuffer, null); gl.uniform1i(program.uoffscreen, false); draw(); void main(void) if(uoffscreen) gl_fragcolor = umaterialdiffuse; return;... The fragment shader

6 Clicking on the canvas canvas.addeventlistener('mousedown', handlemousedown, false); function handlemousedown(event) var x, y, top = 0, left = 0, obj = canvas; while (obj && obj.tagname!== 'BODY') top += obj.offsettop; left += obj.offsetleft; obj = obj.offsetparent; left += window.pagexoffset; For browser scrolling top -= window.pageyoffset; // return relative mouse position x = event.clientx - left; y = canvas.height - (event.clienty - top); Reading pixels from the offscreen framebuffer Using readpixels function unction gl.readpixels(x, y, width, height, format, type, pixels) Description x and y: Starting coordinates. width, height: The extent of pixels to read from the framebuffer. In our example we are just reading one pix xel (where the user clicks) so this will be 1,1. format: At the time of writing this book the only supported format is gl.rgba. type: At the time of writing this book the only supported type is gl.unsigned_byte. pixels: It is a typed array that will contain the results of querying the framebuffer. It needs to have sufficient space to store the results depending on the extent of the query (x,y,width,height). Type is Uint8Array

7 Reading pixels from the offscreen framebuffer //read one pixel var readout = new Uint8Array(1 * 1 * 4); gl.bindframebuffer(gl.framebuffer, framebuffer); gl.readpixels(coords.x,coords.y,1,1,gl.rgba,gl.unsigned_byte,readout); gl.bindframebuffer(gl.framebuffer, null); readout array is 1*1*4. This means it has one pixel of width times one pixel height times four channels, as the format is RGBA. Looking for hits function compare(readout, color) return (Math.abs(Math.round(color[0]*255) - readout[0]) <= 1 && Math.abs(Math.round(color[1]*255) - readout[1]) <= 1 && Math.abs(Math.round(color[2]*255) - readout[2]) <= 1); Readout: read pixel from offscreen buffer Color: object unique color

8 Picking