Lecture 6: Discrete techniques

Transcription

1 Lecture 6: Discrete techniques Topics: 1. Buffer operations 2. Texture maps 3. Environmental maps 4. Bump maps 5. Opacity and blending 6. Depth cueing and fog Chapter 7, Sections 7.1, 7.2, 7.3, 7.6, 7.7., 7.8, 7.9. Chapter 3, Section

2 Buffers operations A buffer is a block of memory with a spatial resolution of n m k-bit elements. OpenGL defines the frame buffer as consisting of a variety of buffers, including the front and back buffers, the depth buffer, and others, each of which may have a different depth (k). Typically there are 32 bits in a colour buffer for RGBA displays. The depth buffer varies in depth. The total depth of the frame buffer can exceed a few hundred bits. A bitplane is any one of the k n m planes in a buffer. A pixel refers to all k bits at a particular spatial location. m n k 2

3 A digital image is usually an array of pixels, varying in size and type. For example, if we are working with a monochromatic or luminance image, each pixel has one byte, representing a grey level, from black (0) to white (255). Thus, we would define a image in our program as Glubyte myimage[512][512]; For an RGB image we usually use one byte per component, whose value ranges from 0 to 255. Thus, we would define Glubyte myimage[512][512][3]; For example, to generate a chess board with red and black squares, we could use the code Glubyte chessboard[512][512][3]; for(int i=0; i<512; i++) for(int j=0; j<512; j++) { for(int k=0; k<3; k++) chessboard[i][j][k]=0; if((8*(i/64)+j/64)%2 == 0) chessboard[i][j][0]=255; } Images can be produced by scanning continuous images or directly from digital cameras, and stored in various formats: GIF, TIFF, PS, EPS, JPEG. These formats include direct coding of the values in some order, using either compressed lossless coding or compressed lossy coding. JPEG provides lossy compression, but with high compression ratios. 3

4 Writing into buffers. We usually need to write blocks of pixels into a buffer and we use a bit-block transfer (bitblt). A bitblt is used to take an n m block of pixels from one buffer, the source buffer, to either the same buffer or another, the destination buffer. However, unlike normal memory writing operations, bitblt operations can come in a variety of forms. Suppose we work with one bit at a time. The obvious operation is to simply replace the destination bit, d, by the source bit, s. But if we are allowed to read before writing, the writing can be described as a replacement function f, thus d f(d, s). There are 16 possible functions f; the 16 logical operations between two bits. s d d All 16 operations are supported by OpenGL. 4

5 Mode 3 is simply replacement, d s, while Mode 7 is the logical OR, d d + s. However Mode 6, the exclusive or-operation XOR is particulary useful, d d s. The XOR operation can be used to swap the contents of one buffer with another without using temporary storage. Suppose that in response to a mouse click, a menu appears, covering a portion of the screen. Once an item is chosen, the menu should disappear and the portion of the screen covered restored. Assuming the menu is the source s in off-screen memory, and the screen the destination d, the (bitwise) sequence s s d d s d s s d moves the menu to the screen, and the screen portion to off-screen memory. This is because of the identity s = (s d) d. 5

6 The XOR operation can also be used for rubber-banding, and to move the cursor around the screen. In rubber-banding, the user draws, for example, a line segment interactively. Suppose one end point is fixed, and that the user uses the mouse to interactively move the other end point. Assume we have an OpenGL window of pixels and the clipping window is [0, 1] [0, 1]. We fetch the first point from the mouse and store it in world coordinates, x1 = x/500.0; y1 = (500-y)/500.0; We then get the second point and draw the line segment in XOR mode. 6

7 x2 = x/500.0; y2 = (500-y)/500.0; gllogicop(gl_xor); glbegin(gl_lines); glvertex2f(x1, y1); glvertex2f(x2, y2); glend(); glflush(); When the user enters another point with the mouse, we erase the previous line by drawing it again in XOR mode, and then draw the new line. glbegin(gl_lines); glvertex2f(x1, y1); glvertex2f(x2, y2); glend(); x2 = x/500.0; y2 = (500-y)/500.0; glbegin(gl_lines); glvertex2f(x1, y1); glvertex2f(x2, y2); glend(); glflush(); 7

8 When the point is finally accepted, we draw the line in its final form, using the COPY operation. glbegin(gl_lines); glvertex2f(x1, y1); glvertex2f(x2, y2); glend(); gllogicop(gl_copy); x2 = x/500.0; y2 = (500-y)/500.0; glbegin(gl_lines); glvertex2f(x1, y1); glvertex2f(x2, y2); glend(); glflush(); 8

9 Texture mapping How do we make an orange look like an orange? It is hard to achieve this just by setting the material properties and colours used in the Phong reflection model. Even if we used an enormous number of polygons, it would be difficult to model the fine surface details. A solution is to add the detail as part of the rendering process, by pasting a digital image onto the surface. In OpenGL we define a texture as an array of texels : Glubyte my_texels[512][512][3]; We specify that this array is a two-dimensional texture through glteximage2d(gl_texture_2d, 0, 3, 512, 512, 0, GL_RGB, GL_UNSIGNED_BYTE, my_texels); or more generally through glteximage2d(gl_texture_2d, level, components, width, height, border, format, type, tarray); We must also enable texture mapping: glenable(gl_texture_2d); 9

10 OpenGL assumes that the texture coordinates are in the unit square [0, 1] [0, 1]. Thus the texture coordinates (0.0, 0.0) refer to the texel my_texels[0][0] and (1.0, 1.0) to the texel my_texels[511][511]. We apply a pair of texture coordinates to each vertex of the polygon. At points inside the polygon, the texture coordinates are blended, similar to the blending of colours, and the appropriate (nearest) texel is displayed. For example, the following code will paste the whole texture onto a quadrilateral. glbegin(gl_quad); gltexcoord2f(0.0,0.0); glvertex3f(x1,y1,z1); gltexcoord2f(1.0,0.0); glvertex3f(x2,y2,z2); gltexcoord2f(1.0,1.0); glvertex3f(x3,y3,z3); gltexcoord2f(0.0,1.0); glvertex3f(x4,y4,z4); glend(); One could instead just paste the part of the texture from 0 to 0.5 in each parameter. (a) (b) 10

11 There are several challenging problems with texture mapping. If the surface we are modelling is defined parameterically, i.e. in the form s(u, v) = (x(u, v), y(u, v), z(u, v)), for (u, v) in some rectangular region, then the u, v coordinates can simply be linearly mapped to (s, t) texture coordinates in [0, 1] [0, 1]. However, some surfaces, such as triangle meshes, are not defined parameterically and we then need to generate a parameterization: a one-to-one mapping from the surface to the plane. Where possible we also want to minimize distortion. One solution is to first map the texture onto a simple base surface, such as a cylinder, and then project orthogonally to the triangle mesh. Intermediate object n n n n n n (a) (b) (c) 11

12 Another difficulty is dealing with closed surfaces. How do we cover a closed objects with patches of texture which join smoothly? t s t Back Left Bottom Right Top s Front 12

13 Aliasing. Another problem is aliasing. In the figure, all the pixel centres are mapped to white, and the black stripes will not appear. t v s u A solution is to use a linear filter. Rather than just use the texel whose centre is closest to a given texture coordinate pair (s, t) (point sampling), we can take a bilinear average of the closest four: linear sampling, (1 x)(1 y)t 00 + x(1 y)t 10 + (1 x)yt 01 + xyt

14 Mipmapping. Even linear sampling does not satisfactorily deal with the problem that the sizes of the pixels and texels can be orders of magnitude different. t x s t x s Texel Pixel Texel Pixel s y s s y s (a) (b) Instead of using either point sampling or linear sampling, we can use mipmapping in which we store a whole sequence of coarser and coarser versions of the texture. For an orginal array of , we can automatically set up , ,..., 1 1 arrays through glubuild2dmipmaps(gl_texture_2d,3,512,512,gl_rgb, GL_UNSIGNED_BYTE,my_texels); or set them ourselves via the level parameter in glteximage2d. Level 0 is the finest level, level 1 the next coarser level, and so on. We can ask OpenGL to use the mipmap which best suits the pixel size, and use either point or linear sampling within that map. 14

15 Environmental maps Shiny surfaces, such as mirrors, produce specular reflections that mirror the whole environment (not just light sources). For example, if a shiny metal ball is placed in a room, we see the contents of the room, albeit distorted, in the ball. We can simulate this type of reflection using an environmental map. The basic idea is to render the surface in two passes. Suppose the surface is a flat mirror. In the first pass, we place the camera at the centre of the mirror pointing outwards, and form an image of the room. This gives us a texture. In the second pass we use the shades of this image to make a correct rendering of the mirror. In practice, we need to form an image of the whole environment, not just in one direction. Ideally we would like to map the environment onto a sphere. This spherical mapping is supported by OpenGL. However, it may be eaiser to form six separate images, corresponding to the sides of a room (or box). These six images should fit together continuously, giving a complete environmental map. This technique was used to map the environment onto Geri s glasses in the short film Geri s Game. 15

16 Bump maps Consider again the orange. It s surface is rough with lots of small bumps. To simluate this, we can render a perturbed version of the surface s(u, v). We add a bump or replacement function d(u, v) to the surface normal so that the perturbed surface is n = n(u, v) = s u s v s u s v, s = s + dn. However, rather than render s itself, we would prefer to render s but use the perturbed normal n = s u s v, in the shading calculation. Differentiation gives s u = s u + d u n + dn u, s v = s v + d v n + dn v, and assuming d is small, the cross product gives n n + d u (n s v ) + d v (s u n). If the bump function d(u, v) is represented as an array of pixels D = [d ij ], the required partial derivatives are d u d ij d i 1,j, d v d ij d i,j 1. 16

17 Opacity and blending Opacity is a measure of how much light penetrates a surface. An opacity of 1 (α = 1) implies no light penetrates: completely opaque. An opacity of 0 (α = 0) implies all light penetrates: transparent. Opacity α is equivalent to translucency 1 α. Consider the polygons in the figure. If the front polygon is partially opaque (like coloured glass) and red, and the second polygon is completely opaque and blue, the viewer will see part of the second polygon as magenta and the back polygon will not be seen). If the second polygon is partially opaque the viewer will see a blend of the colours of all three polygons. We can simluate this effect during rasterization by combining the colour and opacity of the pixels for the current polygon with the pixels already in the frame buffer (whose colour was set from previous polygons). If the source pixel has colour (R s, G s, B s ) and the pixel currently in the frame buffer (the destination pixel) has colour (R d, G d, B d ), then we typically use a blend of the form (αr s + (1 α)r d, αg s + (1 α)g d, αb s + (1 α)b d ). 17

18 Depth cueing and fog In depth cueing we create the illusion of a translucent space between the object and the viewer by blending a distance-dependent colour with the object. Let f be the fog factor and z the distance between the polygon fragment being rendered and the viewer. If the fragment has colour C s and the fog is assigned the colour C f then we render the fragment with the colour C s = fc s + (1 f)c f. If f varies linearly according to the distance of the viewer we get a depthcueing effect. However, a better fog effect comes from making f vary exponentially. OpenGL supports linear, exponential, and Gaussian fog densities. For example, to get a fog density of f = e 0.5z2, we use the code GLfloat fcolour[4] = {...}; glenable(gl_fog); glfogf(gl_fog_mode, GL_EXP); glfogf(gl_fog_density, 0.5); glfogf(gl_fog_color, colour); 18