1 / 108

Animation and Games Development

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. Overview. Why Textures? Textures in jME Wrap Modes Texture Resizing jME Transparency

edison
Download Presentation

Animation and Games Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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);

More Related