1. UniS CS293 Graphics with Java and OpenGL Textures

2. UniS 2 Material from the Redbook is extensively used throughout these slides. Code has been translated from C++ to JOGL based on examples from the book

3. UniS 3 Overview Understand what texture mapping can add to your scene Specify a texture image Control how a texture image is filtered as it's applied to a fragment Create and manage texture images in texture objects Supply texture coordinates to indicate how the texture image should be aligned to the objects in your scene Use automatic texture coordinate generation

4. UniS 4 Texture mapping To draw a large brick wall without texture mapping, each brick must be drawn as a separate polygon. Without texturing, a large flat wall might need thousands of individual bricks Texture mapping allows you to glue an image of a brick wall (obtained, perhaps, by scanning in a photograph of a real wall) to a polygon draw the wall as a single polygon. Texture mapping ensures that all the right things happen as the polygon is transformed and rendered. E.g. when viewed in perspective, the bricks appear smaller as the wall gets farther from the viewpoint. Textures can also be used in flight simulation textures to create the illusion of natural.

5. UniS 5 Texture mapping Textures can be mapped to surfaces made of a set of polygons or to curved surfaces, and you can repeat a texture in one or both directions to cover the surface. A texture can be one-dimensional. You can automatically map a texture onto an object in such a way that the texture indicates contours or other properties of the item being viewed. Shiny objects can be textured so that they appear to be in the centre of a room or other environment, reflecting the surroundings off their surfaces. A texture can be applied to a surface in different ways. It can be painted on directly, used to modulate the colour the surface would have been painted otherwise, or used to blend a texture colour with the surface colour.

6. UniS 6 Texture mapping Textures are simply rectangular arrays of data - for example, colour data, luminance data, or colour and alpha data. The individual values in a texture array are often called texels. What makes texture mapping tricky is that a rectangular texture can be mapped to nonrectangular regions, and this must be done in a reasonable way.

7. UniS 7 Texture mapping A quadrilateral displayed on the screen might be distorted by applying various transformations - rotations, translations, scaling, and projections. The figure shows how the texture- mapped quadrilateral might appear on your screen after these transformations. The quadrilaterals are only distorted by perpesctive transformations and rotations in 3D. Three of the quads are squares the front one is arbitrary. Note how the texture image of rectangular text is distorted to fit into a non-rectangular region. Note we have also used blending to show all the quads at the same time.

8. UniS 8 Steps in Texture Mapping To use texture mapping, you perform these steps. 1.Create a texture object and specify a texture for that object. 2.Indicate how the texture is to be applied to each pixel. 3.Enable texture mapping. 4.Draw the scene, supplying both texture and geometric coordinates.

9. UniS 9 Create a Texture Object and Specify a Texture for That Object A texture is usually thought of as being two- dimensional, like most images, but it can also be one-dimensional. The data describing a texture may consist of one, two, three, or four elements per texel, representing anything from a modulation constant to an (R, G, B, A) quadruple.

10. UniS 10 Indicate How the Texture Is to Be Applied to Each Pixel Four possible functions for computing the final RGBA value from the fragment color and the texture-image data. 1.Use the texture color as the final color; the decal mode, the texture is painted on top of the fragment 2.The replace mode, a variant of the decal mode. 3.Use the texture to modulate, or scale, the fragment's color; this technique is useful for combining the effects of lighting with texturing. 4.Finally, a constant color can be blended with that of the fragment, based on the texture value.

11. UniS 11 Enable Texture Mapping gl.glEnable(GL.GL_TEXTURE_2D); gl.glDisable(GL.GL_TEXTURE_2D);

12. UniS 12 Texture and Geometric Coordinates Define how the texture is aligned relative to the fragments its applied to before it's "glued on.“ For a two-dimensional texture map the texture coordinates range from 0.0 to 1.0 in both directions, but the coordinates of the items being textured can be anything. Define how texture coordinates outside the range [0.0,1.0] should be treated. Do textures repeat, or are they clamped to a boundary value?

13. UniS 13 Jpeg images for textures It is not part of this course to cover the conversion of Jpg, or other image format, into texture maps. In order to have interesting examples we use the library NeHe Java ports from: http://pepijn.fab4.be/?page_id=34 http://pepijn.fab4.be/?page_id=34 The NeHe tutorials are written for OpenGL, not JOGL. The web site is http://nehe.gamedev.net/ http://nehe.gamedev.net/ Lab material contains details of how to use these ports for coding purposes.

14. UniS 14 Coding conventions String[ ] textureNames = new String[ ] { "demos/data/images/mona-lisa.png", "demos/data/images/monkey.jpg", "demos/data/images/newton2.jpg", "demos/data/images/marilyn.jpg", "demos/data/images/SEPS_Computing.png" }; The coding convention for all the lab material is to store image names in the textureNames array, and manipulate this field directly to generate texture maps.

15. UniS 15 Coding conventions Textures in JOGL are given identifiers that are integer values. Thus our list of images is converted into textures who’s identifiers can be stored in an integer array. Our convention is to define this as a field: private int textures[] = new int[textureNames.length];

16. UniS 16 NeHe library methods TextureReader This is a NeHe class that permits us to load a Jpg image directly into a Texture object. Texture is and internal class to TextureReader that is used as a temporary place holder for textures. Following code shows how these classes are used in a NeHe routine to attach textures to an integer array of texture identifiers.

17. UniS 17 loadGLTextures method, version 1 public void loadGLTextures(GL gl) throws IOException { gl.glGenTextures(textureNames.length, textures, 0); gl.glTexEnvf(GL.GL_TEXTURE_ENV, GL.GL_TEXTURE_ENV_MODE, GL.GL_DECAL); for (int textureIndex = 0; textureIndex < textureNames.length; textureIndex++) { String textureName = textureNames[textureIndex]; TextureReader.Texture texture = TextureReader.readTexture(textureName); imageW[textureIndex] = texture.getWidth(); imageH[textureIndex] = texture.getHeight(); gl.glBindTexture(GL.GL_TEXTURE_2D, textures[textureIndex]); gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_MAG_FILTER, GL.GL_LINEAR); gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_MIN_FILTER, GL.GL_LINEAR); gl.glTexImage2D(GL.GL_TEXTURE_2D, 0, GL.GL_RGB8, texture.getWidth(), texture.getHeight(), 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, texture.getPixels()); }

18. UniS 18 glTexEnvf gl.glTexEnvf( GL.GL_TEXTURE_ENV, GL.GL_TEXTURE_ENV_MODE, GL.GL_DECAL); Defines the mode for combining texture map with geometric model In this case GL_DECAL specifies that the texture will be attached to the surface of the polygon and replace the material characteristics of the polygon.

19. UniS 19 Loading Texture String textureName = textureNames[textureIndex]; TextureReader.Texture texture = TextureReader.readTexture( textureName); imageW[textureIndex]=texture.getWidth(); imageH[textureIndex]=texture.getHeight(); These lines of code use the TextureReader.readTexture method to load in a particular Jpeg and convert it to a texture. This is stored in the internal variable texture.

20. UniS 20 Binding the texture gl.glBindTexture(GL.GL_TEXTURE_2D, textures[textureIndex]); gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_MAG_FILTER, GL.GL_LINEAR); gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_MIN_FILTER, GL.GL_LINEAR); gl.glTexImage2D( GL.GL_TEXTURE_2D, 0, GL.GL_RGB8, texture.getWidth(), texture.getHeight(), 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, texture.getPixels());

21. UniS 21 Binding the texture glGenTextures() and glBindTexture() name and create a texture object for a texture image. The single, full-resolution texture map is specified by glTexImage2D(), whose parameters indicate –size of the image, –type of the image, –location of the image, –and other properties of it.

22. UniS 22 Filtering Texture maps are square or rectangular After being mapped to a polygon or surface and transformed into screen coordinates, the individual texels rarely correspond to individual pixels. Depending on the transformations used and the texture mapping applied, a single pixel on the screen can correspond to anything from a tiny portion of a texel (magnification) to a large collection of texels (minification) Texture Polygon Texture Polygon texel portion texel group pixel Magnification Minification

23. UniS 23 Filtering gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_MAG_FILTER, GL.GL_LINEAR); gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_MIN_FILTER, GL.GL_LINEAR); These lines define how to compute texel magnification and minification.

24. UniS 24 Texture coordinates (in display method) gl.glPushMatrix(); gl.glBindTexture(GL.GL_TEXTURE_2D, textures[filter1]); float text_crd = 8f; gl.glTranslatef(0.0f, 0.0f, -2.0f * square_x); gl.glScalef(((float)imageW[filter1])/((float)imageH[filter1]), 1.0f, 1.0f); gl.glBegin(GL.GL_QUADS); gl.glNormal3f(0.0f, 0.0f, 1.0f); gl.glTexCoord2f(0.0f, 0.0f); gl.glVertex3f(-15.0f, -15.0f, 15.0f); gl.glTexCoord2f(text_crd, 0.0f); gl.glVertex3f(15.0f, -15.0f, 15.0f); gl.glTexCoord2f(text_crd,text_crd); gl.glVertex3f(15.0f, 15.0f, 15.0f); gl.glTexCoord2f(0.0f, text_crd); gl.glVertex3f(-15.0f, 15.0f, 15.0f); gl.glEnd(); gl.glPopMatrix(); Define a mapping that describes how the texture is pasted on top of any polygon

25. UniS 25 Repeating textures gl.glTexCoord2f(0.0f, 0.0f); gl.glVertex3f(-15.0f, -15.0f, 15.0f); gl.glTexCoord2f(text_crd, 0.0f); gl.glVertex3f(15.0f, -15.0f, 15.0f); gl.glTexCoord2f(text_crd,text_crd); gl.glVertex3f(15.0f, 15.0f, 15.0f); gl.glTexCoord2f(0.0f, text_crd); gl.glVertex3f(-15.0f, 15.0f, 15.0f); When texture coordinates are larger than 1.0f, then the texture can either be cropped, or repeated.

26. UniS 26 Repeating textures If we use the following lines within the loadGLTextures method, then the texture will be repeated when its texture coordinates exceed 1.0f gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_WRAP_S, GL.GL_REPEAT); gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_WRAP_T, GL.GL_REPEAT);

27. UniS 27 Repeating textures In this case taking text_crd = 8.0f results in the polygon containing an 8x8 grid of the texture.

28. UniS 28 Modulating textures Use the command gl.glTexEnvf( GL.GL_TEXTURE_ENV, GL.GL_TEXTURE_ENV_MODE, GL.GL_MODULATE); Instead of gl.glTexEnvf(GL.GL_TEXTURE_ENV, GL.GL_TEXTURE_ENV_MODE, GL.GL_DECAL); Then the colour properties of the material we are texture mapping will modulate how the final image appear.

29. UniS 29 Modulating textures Here the material has pure red diffuse material set. Note since we have blending enabled we also have transparency