1. Animation and Games Development
, Semester 1,
11. Textures and Maps
Objective
introduce texturing and its use in environment mapping, lightmapping, bump mapping and shadows

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
(1, 0) s
(0.8, 0.4)
(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
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. Black edges shown for illustration only
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 images for 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 apparent when the user moves

33. Anisotropic Filtering
Improves on bilinear and trilinear filtering by reducing blur and preserving more detail at extreme viewing angles.
trilinear
filtering
(blurry)
anisotropic
filtering
(less 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

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. or add an alpha channel to the ColorMap/DiffuseMap
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 Spinning see-through sphere in front of a brick wall
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
// 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 Using a cylinderical surface for the texture:
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);

51. Texture Atlases
A texture atlas is a texture image which contains several sub-images, each of which is a texture for a part of the 3D object. + =

52. for decorating a 2D world
Texture atlases reduce the amount of texture state switching by the underlying graphics engine
makes rendering faster
atlas with 100 sub-images,
for decorating a 2D world

53. The HoverTank Model
TestHoverTank.java

54. The model is loaded with:
Node tank = (Node) assetManager.loadModel( "Models/HoverTank/Tank2.mesh.xml");
The mesh, and various texture maps, are located inside jmonkeyplatform\libs\ jME3-testdata.jar

55. tank_diffuse.jpg

56. 7. Multitexturing
Multitexturing is applying several textures to the same surface.
Multitexturing hardware supports texture units, each of which applies a standard texture map operation.

57. Multitexturing for layering detail onto a terrain.
we'll do this later in jME

58. Animating Texture
A texture matrix can be used to “transform” the texture
e.g. translation the texture over the shape
If the texture matrix changes over time, the texture will appear to move on the object
Useful for implementing flames, water, clouds, etc.

59. 8. Environment Mapping
An environment map (a texture) is used to approximate mirrored surfaces

61. Theory
Environment Map
(a texture)
The texture color is transferred from the environment map onto the object in the direction of the reflected ray sent from the viewer.
Reflected ray
viewer
Object

62. Cube Mapping
A cube map texture is made from six 2D texture maps that correspond to the sides of a box
one kind of environment map

63. Cube Map Format

64. Static Environment Maps
An environment map can be static
often used for sky + hills + ground in a 3D scene
hard to notice that it’s not correct
very fast and effective
called a skybox

65. A Skybox in jME
SkyBox.java
rotate the
camera in
the scene

66. Partial Code
public void simpleInitApp() { Texture west = assetManager.loadTexture("Textures/Sky/ Lagoon/lagoon_west.jpg"); Texture east = assetManager.loadTexture("Textures/Sky/ Lagoon/lagoon_east.jpg"); Texture north = assetManager.loadTexture("Textures/Sky/ Lagoon/lagoon_north.jpg"); Texture south = assetManager.loadTexture("Textures/Sky/ Lagoon/lagoon_south.jpg"); Texture up = assetManager.loadTexture("Textures/Sky/ Lagoon/lagoon_up.jpg"); Texture down = assetManager.loadTexture("Textures/Sky/ Lagoon/lagoon_down.jpg"); Spatial sky = SkyFactory.createSky(assetManager, west, east, north, south, up, down); rootNode.attachChild(sky); }

67. Six Skybox Images
\jmonkeyplatform\libs\jME3-testdata.jar

68. Dynamic Environment Mapping
When the object using the environment map moves, then the map should change.
Can be done using multi-pass rendering
six rendering passes needed to build the sides of a new cube map
another pass to apply the map to the object

69. Sphere Mapping Problems: non-uniform sampling non-linear mapping
Another kind of
environment mapping.
Problems:
non-uniform sampling
non-linear mapping

70. 9. Light Mapping
A light map is used to simulate light effects on a surface.
It’s often a gray scale image, which is blended with another texture to produce lighting effects
This approach speeds up run-time lighting since the lighting effects have been pre-computed and stored in a map
complex (slow) illumination techniques can be used to create the map (e.g. shadows) when the game is being coded

71. Example
No light maps
With light maps

72. Specular Mapping
Not all objects are uniformly shiny all over their surface, e.g.:
tile floors are worn in places
metal with corrosion spots
partially wet surfaces
Specular mapping is a way to vary the amount of specular light over a shape.

73. Example
specular reflection
the specular map

74. Specular Map for the Hover Tank
tank_specular.jpg

75. jME Glowing Add a BloomFilter PostProcessor to simpleInitApp()
Specify a Glow color.
mat.setColor("GlowColor",ColorRGBA.White);
Optionally specify a GlowMap texture.
mat.setTexture("GlowMap", assetManager.loadTexture("Textures/alien_glow.png"));
says where the DiffuseMap texture glows;
If you don't supply a GlowMap, then the whole material glows

76. Glowing Colors
GlowSpheres.java
no glow
white glow
red glow

77. Partial Code // needed by all glowing objects
FilterPostProcessor fpp = new FilterPostProcessor(assetManager);
BloomFilter bloom = new BloomFilter(BloomFilter.GlowMode.Objects);
fpp.addFilter(bloom);
viewPort.addProcessor(fpp); :

78. // the glowing red sphere Geometry sph2 = new Geometry("chequered", sphere); Material mat2 = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); mat2.setBoolean("UseMaterialColors",true); mat2.setColor("Diffuse", ColorRGBA.Cyan); mat2.setColor("Ambient", ColorRGBA.Cyan); mat2.setColor("GlowColor", ColorRGBA.Red); :

79. Glowing Maps Version random map no glow chequered map
GlowSpheres.java (with maps)
random map
no glow
chequered map

80. Partial Code bloom-glow2.png
// glowing using a chequered pattern Geometry sph2 = new Geometry("chequered", sphere); Material mat2 = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); mat2.setBoolean("UseMaterialColors",true); mat2.setColor("Diffuse", ColorRGBA.Cyan); mat2.setColor("Ambient", ColorRGBA.Cyan); mat2.setTexture("GlowMap", assetManager.loadTexture("Textures/bloom-glow2.png"));
bloom-glow2.png

81. 10. Bump Mapping
Makes a shape's surface look bumpy without changing the shape's geometry.
The bump map changes the surface normal values by small amounts.
also called normal mapping

82. Normal vectors are stored with the shape's vertices.
Rough surfaces require lots of variation in the surface normals
this would require lots more vertices
Use a bump map instead to change the shape's normals at each pixel.

83. Bump

84. Bump Map Example Object Surface (with normals) Bump map
Object Surface (with changed normals)

85. Bump Mapping Uses Heights
The bump map stores a series of heights
the heights are turned into surface normals by calculating the differences between neighbors in the s and t directions
bump map heights
bump map surface normals

86. Varying the Bumps

87. Bump Maps in jME Generate normal vectors information for the mesh:
TangentBinormalGenerator.generate(mesh);
Specify a normal map texture for the Material:
mat.setTexture("NormalMap", assetManager.loadTexture( "Textures/wood_normal.png")); // with Lighting.j3md

88. Example
Bumps.java

89. Partial Code
Sphere rock = new Sphere(32, 32, 2); // A rocky ball Geometry rockGeom = new Geometry("rock", rock); rock.setTextureMode(Sphere.TextureMode.Projected); TangentBinormalGenerator.generate(rock); Material rMat = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); rMat.setTexture("DiffuseMap", assetManager.loadTexture( "Textures/Pebbles/Pebbles_diffuse.png")); rMat.setTexture("NormalMap", assetManager.loadTexture( "Textures/Pebbles/Pebbles_normal.png")); rMat.setBoolean("UseMaterialColors", true); rMat.setColor("Diffuse",ColorRGBA.White); rMat.setColor("Specular",ColorRGBA.White); rMat.setFloat("Shininess", 4f); // [0,128] rockGeom.setMaterial(rMat); rockGeom.setLocalTranslation(0,1,0); // Move it a bit rockGeom.rotate(1.6f, 0, 0); // Rotate it a bit rootNode.attachChild(rockGeom); :

90. // A wall with a rough bricky surface Box box = new Box(2, 2, 2); Geometry wall = new Geometry("wall", box); TangentBinormalGenerator.generate(wall); Material wMat = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); wMat.setTexture("DiffuseMap", assetManager.loadTexture( "Textures/BrickWall/BrickWall_diffuse.jpg")); wMat.setTexture("NormalMap", assetManager.loadTexture( "Textures/BrickWall/BrickWall_normal.jpg")); wall.setMaterial(wMat); wall.setLocalTranslation(0,-3,0); // Move it a bit rootNode.attachChild(wall);

91. Bumps.java Maps

92. Without Bumps
If the normal maps are commented out:

93. Bump Mapping Atlas

94. Normal Map for the Hover Tank
tank_normals.png

95. Displacement Mapping
Bump mapping adjusts surface normals (but there's no change to the vertices)
Displacement mapping uses a map to change the shape's vertices.

96. The outline of the shape gives away whether bump mapping or displacement mapping was used.

97. 11. Multi-pass Rendering
Draw the scene, or parts of the scene, multiple times to achieve certain effects.
Used for mirrors, shadows, etc.
It can be used to approximate multi-texturing when multi-texturing is not supported by the hardware
Disadvantage: rendering a frame takes longer

98. 12. Shadow Mapping
Shadows are created by testing whether a pixel is visible from the light source
comparing pixel to a z-buffer or depth image of the light source's view
add shadow
mapping

99. jME Shadows jME offers two forms of shadow:
BasicShadowRenderer: basic drop shadows onto a flat surface
Parallel-Split Shadow Map (PSSM): for shadows that fall on complex (curved) surfaces; more resource intensive

100. Reducing Shadow Calculations
Shadow calculations (casting and receiving) slow down performance.
So switch off shadow processing for the scene graph, and specify the shadow behaviour for each node that needs it:
specifiy whether a node casts shadows, receives shadows, or does both

101. rootNode. setShadowMode(ShadowMode
rootNode.setShadowMode(ShadowMode.Off); // graph nodes will not process shadows wall.setShadowMode(ShadowMode.CastAndReceive); // switch on cast/receive processing for this node floor.setShadowMode(ShadowMode.Receive); // only receive; this node doesn't make shadows airplane.setShadowMode(ShadowMode.Cast); // only cast; no shadows fall onto this node

102. The Basic Shadow Renderer
TeapotShadow.java
the teapot
casts and
receives
shadows
the floor
only
receives
shadows

103. Partial Code
cam.setLocation(new Vector3f(0, 3, 5)); cam.lookAt(Vector3f.ZERO, Vector3f.UNIT_Y); // look at the origin with +y-axis being up cam.setFrustumFar(10); // or shadows go 'funny' rootNode.setShadowMode(ShadowMode.Off); :

104. // the floor Box floor = new Box(Vector3f. ZERO, 2, 0
// the floor Box floor = new Box(Vector3f.ZERO, 2, 0.1f, 2); Geometry floorGeom = new Geometry("Floor", floor); Material fmat = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); fmat.setBoolean("UseMaterialColors",true); fmat.setColor("Diffuse", ColorRGBA.Blue); fmat.setColor("Specular", ColorRGBA.White); fmat.setFloat("Shininess", 16f); // [0,128] floorGeom.setMaterial(fmat); floorGeom.setShadowMode(ShadowMode.Receive); rootNode.attachChild(floorGeom); :

105. // the teapot teapot = assetManager. loadModel("Models/Teapot/Teapot
// the teapot teapot = assetManager.loadModel("Models/Teapot/Teapot.obj"); teapot.setLocalScale(1.5f); Material tmat = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); tmat.setBoolean("UseMaterialColors", true); tmat.setColor("Diffuse", ColorRGBA.Orange); tmat.setColor("Specular", ColorRGBA.White); tmat.setFloat("Shininess", 12); teapot.setMaterial(tmat); RenderState rs = tmat.getAdditionalRenderState(); rs.setFaceCullMode(RenderState.FaceCullMode.Off); teapot.setShadowMode(ShadowMode.CastAndReceive); rootNode.attachChild(teapot); :

106. BasicShadowRenderer bsr = new BasicShadowRenderer(assetManager, 512); bsr.setDirection(new Vector3f(-1, -1, -1).normalizeLocal()); viewPort.addProcessor(bsr); // add a light to make the lit objects visible DirectionalLight sun = new DirectionalLight(); sun.setDirection(new Vector3f(-1, -1, -1).normalizeLocal()); sun.setColor(ColorRGBA.White); rootNode.addLight(sun);

107. Parallel-Split Shadow Map
TeapotPssm.java
The same scene graph as before, but using PSSM.

108. Partial Code
The only change is the replacement of the BasicShadowRenderer object by a PssmShadowRenderer
PssmShadowRenderer pr = new PssmShadowRenderer(assetManager, 1024, 3);
pr.setDirection( new Vector3f(-1, -1, -1).normalizeLocal());
viewPort.addProcessor(pr);
On my low-end machine, PSSM shadows often do not render correctly when the camera is moved.