Animation and Games Development

1. Animation and Games Development 242-515, Semester 1, 2014-2015 • Objective • introduce texturing and its use in environment mapping, lightmapping, bump mapping and shadows 11. Textures and Maps

2. Overview • Why Textures? • Textures in jME • Wrap Modes • Texture Resizing • jME Transparency • Texture Mapping onto Surfaces Multitexturing Environment Mapping Light Mapping Bump Mapping Multi-pass Rendering Shadow Mapping

3. 1. Why Textures? • A texture makes a shape look better without increasing its number of vertices. • A texture is an image wrapped around a shape. • Textures are usually 2D images. There are also 1D and 3D textures.

4. Texture mapping • The color of a pixel is determined by mapping from (s,t) texture space to the pixel's (x,y,z) world space • sometimes (u,v) axis labels are used instead of (s,t) Texture Space World Space t (1, 1) (s, t) = (0.2, 0.8) (0, 1) A a c (0.4, 0.2) b B C (0.8, 0.4) s (1, 0) (0, 0)

5. Mapping Examples • mapping all of a texture to one face of a shape

6. Texture mappings involving parts of a texture are most commonly used by texture atlases (see later).

7. Texture Formats • Textures are made of texels • just as images are made from pixels • Texels have R,G,B,A components • usually means red, green, blue, alpha • but can be used to store other data

8. Texture Functions • Specify how texture colors modify pixel colors • Common modes: • DECAL: replace pixel color with texture color • BLEND: combine texture and pixel colors using weighted addition • MODULATE: combine texture and pixel colors using multiplication of their components

9. 1D and 3D Textures • A 1D texture is a 2D texture with height == 1 • often used for drawing colored stripes/lines • A 3D texture is like a stack of 2D textures • often used in visualization • e.g. medical imaging

10. 2. Textures in jME • Add a texture to an unshaded (unlit) material: • mat.setTexture("ColorMap", assetManager.loadTexture("Textures/monkey.png")); // with Unshaded.j3md • Add a texture to a lit material: • mat.setTexture("DiffuseMap", assetManager.loadTexture("Textures/wood.png")); // with Lighting.j3md

11. Unlit Texture Example UnlitTexture.java

12. Partial Code public void simpleInitApp() { flyCam.setMoveSpeed(20); Box mesh = new Box(2,2,2); Geometry geom = new Geometry("mesh", mesh); Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); mat.setTexture("ColorMap", assetManager.loadTexture("Textures/R.png")); geom.setMaterial(mat); rootNode.attachChild(geom); } R.png

13. Lit Texture Example LitTexture.java

14. Partial Code public void simpleInitApp() { flyCam.setMoveSpeed(20); Box mesh = new Box(2,2,2); Geometry geom = new Geometry("mesh", mesh); Material mat = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); mat.setTexture("DiffuseMap", assetManager.loadTexture("Textures/R.png")); :

15. mat.setBoolean("UseMaterialColors", true); mat.setColor("Diffuse",ColorRGBA.White); mat.setColor("Specular",ColorRGBA.White); mat.setFloat("Shininess", 8f); // [0,128] geom.setMaterial(mat); rootNode.attachChild(geom); // add a light to make the lit object visible DirectionalLight sun = new DirectionalLight(); sun.setDirection(new Vector3f(1,-1, -2).normalizeLocal()); sun.setColor(ColorRGBA.White); rootNode.addLight(sun); } // end of simpleInitApp()

16. 3. Wrap Modes How to deal with (s,t) values outside 0-1 Black edges shown for illustration only Original Wrap (Repeat) Clamp Mirror Mirror once (mirror+clamp) Border color

17. Wrapping and Clamping • Wrapping is also known as tiling or repeating.

18. Accessing jME Texture Info LitTexture.java Texture tex = mat.getTextureParam("DiffuseMap"). getTextureValue(); System.out.println("texture: " + tex); System.out.println("Texture type: " + tex.getType()); System.out.println("Mag/Min filtering: " + tex.getMagFilter() + "/" + tex.getMinFilter()); System.out.println("Anisotropic filtering level: " + tex.getAnisotropicFilter()); Texture.WrapMode horizWrapMode = tex.getWrap(Texture.WrapAxis.S); // horizontal wrap Texture.WrapMode vertWrapMode = tex.getWrap(Texture.WrapAxis.T); // vertical wrap System.out.println("(S,T) wrap modes: (" + horizWrapMode + ", " + vertWrapMode + ")");

19. Output texture: Texture2D [name=Textures/R.png, image=Image[size=256x256, format=BGR8]] Texture type: TwoDimensional Mag/Min filtering: Bilinear/Trilinear Anisotropic filtering level: 1 (S,T) wrap modes: (EdgeClamp, EdgeClamp)

20. Adjusting the Wrap Mode in jME • In LitTexture.java: • mesh.scaleTextureCoordinates(new Vector2f(2,1)); // times to repeat on X and Y axes • tex.setWrap(Texture.WrapAxis.S, Texture.WrapMode.Repeat);

21. Result

22. 4. Texture Resizing • Magnification: when a pixel is mapped to a part of one texel • Minification: when a pixel is mapped to many texels

23. Texture Filtering • Texture magnification/minification without filtering produces ugly visual effects: • When magnified, the texels become very obvious • When minified, the texture becomes “sparkly”

24. Bilinear Filtering • Bilinear filtering is used to smooth a texture when it is displayed larger or smaller than its normal size. • blends edges of texel neighbours • Magnification looks better, but minification may still sparkle.

25. Bilinear Filtering Effect minified magnified No filtering Bilinear Filtering

26. Mipmaps • Mipmaps reduce problems with minification. • A mipmap is a pre-calculated, optimized collection of bitmap imagesfor a texture • Each bitmap image is a version of the texture at a reduced level of detail (LOD). • The rendering engine uses a different bitmap for wrapping the object depending on its distance from the viewer.

27. Examples

28. Mipmapping of the road texture:

29. a single image file texture mipmap for the texture

30. + viewer

31. Mipmap Filters • Common mipmap minification filters • NEAREST: uses the nearest mipmap closest to the polygon resolution, and applies bilinear filtering • LINEAR: uses linear interpolation between the two mipmaps closest to the polygon resolution, and applies bilinear filtering

32. Trilinear Filtering • Transitions between one mipmap size and the next may be obvious • the change is visible as a moving/flickering line • Use trilinear filtering • blends between mipmap sizes smoothly • bilinear/trilinear • the difference is only apparentwhen the user moves

33. Anisotropic Filtering • Improves on bilinear and trilinear filtering by reducing blur and preserving more detail at extreme viewing angles. anisotropic filtering (less blurry) trilinear filtering (blurry)

34. Filtering and Mipmapping Using textures without filtering and mipmapping. With filtering and mipmapping

35. Mipmapping in jME • jME creates a mipmap automatically for a texture (unless disabled). • It is possible to import models with pre-calculated mipmap textures • e.g. using the dds plugin for gimp http://code.google.com/p/gimp-dds/

36. 5. jME Transparency • For colored Materials, the last float of an RGBA color is the Alpha channel. • Alpha = 1.0f makes the color opaque (the default) • Alpha = 0.0f make the color transparent • Alpha between 0f and 1f makes the color more or less translucent • A translucent red: mat.setColor("Color", new ColorRGBA(1,0,0, 0.5f));

37. For textured Materials, either supply an AlphaMap that specifies which areas are transparent. setTexture("AlphaMap", assetManager.loadTexture("Textures/window_alpha.png")); • or add an alpha channel to the ColorMap/DiffuseMap • Enable alpha rendering: mat.setBoolean("UseAlpha",true);

38. Specify alpha blending for the Material: mat.getAdditionalRenderState().setBlendMode(BlendMode.Alpha); • Put the Geometry (not the Material!) in the appropriate render queue: geom.setQueueBucket(Bucket.Translucent); or geom.setQueueBucket(Bucket.Transparent);

39. Alpha Map Example GlassSphere.java Spinning see-through sphere in front of a brick wall

40. Partial Code // cyan sphere Sphere sphere = new Sphere(32,32, 2f); Geometry geom = new Geometry("sphere", sphere); Material mat = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); mat.setBoolean("UseMaterialColors",true); mat.setColor("Ambient", ColorRGBA.Cyan); mat.setColor("Diffuse", ColorRGBA.Cyan); mat.setColor("Specular", ColorRGBA.White); mat.setFloat("Shininess", 16f); // [0,128] :

41. // transparent texture mat.setTexture("AlphaMap", assetManager.loadTexture( "Textures/R_bw.png")); mat.setBoolean("UseAlpha",true); mat.getAdditionalRenderState().setBlendMode(BlendMode.Alpha); geom.setQueueBucket(Bucket.Transparent); geom.setMaterial(mat); R_bw.jpg

42. Using a rock Alpha Map rock.png mat.setTexture("AlphaMap", assetManager.loadTexture("Textures/rock.png"));

43. 6. Texture Mapping onto Surfaces • In planar mapping, one of the (x,y,z) components of the shape (usually the z-axis) is ignored when mapping from the (s,t) texture space to the pixel's (x,y,z) world space • leaves us with a simple (s,t) ↔ (x,y) mapping ignore z-axis of shape when mapping

44. Planar Surface Mapping ignore z-axis of shapes when mapping

45. Cylindrical Surface Mapping The default mapping for most shapes in jME texture cylinder’s long axis is the y-axis

46. Cylinder in LitTexture.java Cylinder mesh = new Cylinder(100, 100, 2, 3, true); : geom.rotate(-FastMath.HALF_PI, 0, 0); // rotate up

47. Rotating Sphere SphereTex.java • Using a cylinderical surface for the texture:

48. Partial Code Sphere mesh = new Sphere(16,16,2); mesh.scaleTextureCoordinates(new Vector2f(5,1)); // times to repeat on X and y axes Geometry geom = new Geometry("mesh", mesh); Material mat = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); mat.setTexture("DiffuseMap", assetManager.loadTexture("Textures/R.png")); geom.setMaterial(mat); geom.rotate(-FastMath.HALF_PI, 0, 0); // rotate upright

49. Spherical Surface Mapping stretches the squares in the map near the equator, and squeezes the squares as the longitude reaches a pole uses latitude and longitude for the texture mapping

50. Rotating Sphere (Remapped) • Switched to a spherical surface mapping for the texture: mesh.setTextureMode(Sphere.TextureMode.Projected);