1. 242-515 AGD: 9. Illumination11 Objectives o light sources, reflection models, affects on materials Animation and Games Development 242-515, Semester 1, 2014-2015 9. Illumination

2. 242-515 AGD: 9. Illumination22 1.Lighting 2.jME Light Sources 3.The Phong Reflection Model 4.Three Kinds of Reflection 5.The Blinn-Phong Model 6.Material and Lighting 7.Orbiting a Torus 8.Surface (Face) Normals 9.Shading Overview

3. 242-515 AGD: 9. Illumination33 Light source(s) send out light. Light hits points on a shape, and may be absorbed, or reflected. Reflected light that reaches our eyes determines the color of a point. 1. Lighting

4. 242-515 AGD: 9. Illumination44 Lighting in jME is the process of determining the color of each point in the scene. It depends on: o light source properties colour, position, direction, shape … o the shape's material properties (which affect reflection)

5. 242-515 AGD: 9. Illumination55 1.1. Some Light-Material Interactions Specular material Diffuse material Translucent material

6. 242-515 AGD: 9. Illumination66 Real-world lighting of an object involves adding in the light reflected/refracted from other objects in the scene o called global illumination Global illumination takes too long to calculate. JME uses the OpenGL local illumination model which only considers how light sources affect an object 1.2. Local Illumination

7. 242-515 AGD: 9. Illumination77 Lighting in jME is separate from how objects cast a shadow on the floor or other objects. Shadow processing is a sepate step in jME (described later) o casting shadows slows down performance, so they are not activated by default 1.3. Shadows

8. 242-515 AGD: 9. Illumination88 Four types of light source: o ambient lighting o point sources o directional light o spotlights You must set the color and intensity of each source. o typically you set the color to white new ColorRGBA(1f,1f,1f,1f) or ColorRGBA.White 2. jME Light Sources

9. 242-515 AGD: 9. Illumination99 An ambient light source uniformly lights the entire scene. o It has no direction and no location and shines equally everywhere. An AmbientLight does not cast any shadows, and it lights all sides of a shape evenly o this makes shapes look unnaturally flat o other light sources can improve the look of a shape 2.1. Ambient Light

10. 242-515 AGD: 9. Illumination10 Bathe all the lit objects in white light: AmbientLight al = new AmbientLight(); al.setColor( ColorRGBA.White ) ; rootNode.addLight(al);Example

11. 242-515 AGD: 9. Illumination11 A PointLight has a location and shines from that point in all directions o the shining range (radius) can be specified o The light intensity decreases with distance from the light source. A PointLight can not cast shadows in jME (at the moment) 2.2. Point Sources

12. 242-515 AGD: 9. Illumination12 Locate a yellow point light at (1,0,2), and limits its effect to a radius of 4 units: PointLight lamp = new PointLight(); lamp.setColor(ColorRGBA.Yellow); lamp.setRadius(4f); lamp.setPosition(new Vector3f(1, 0, 2)); rootNode.addLight(lamp);Example

13. 242-515 AGD: 9. Illumination13 A DirectionalLight has no position, only a direction. It sends out parallel beams of light and is considered "infinitely" far away from the objects in the scene. You typically have one directional light per scene o acting as the 'sun' Shadows can be used with a directional light in jME 2.3. Directional Light

14. 242-515 AGD: 9. Illumination14 A white light pointing in the direction (-1,-1,1): DirectionalLight sun = new DirectionalLight(); sun.setColor(ColorRGBA.White); sun.setDirection(new Vector3f(-1f, -1f,1f).normalizeLocal()); rootNode.addLight(sun);Example x z y

15. 242-515 AGD: 9. Illumination15 A SpotLight sends out a cone of light. A SpotLight has a direction, a location, distance (range) and two angles: o the inner angle is the central maximum of the light cone o the outer angle the edge of the light cone. Everything outside the light cone's angles is not affected by the light. 2.4. Spotlights outer angle inner range

16. 242-515 AGD: 9. Illumination16 SpotLight spot = new SpotLight(); spot.setSpotRange(100f); // range spot.setSpotInnerAngle(15f * FastMath.DEG_TO_RAD); // 15 degree inner light cone (central beam) spot.setSpotOuterAngle(35f * FastMath.DEG_TO_RAD); // 35 degree outer light cone (edge of the light) spot.setColor(ColorRGBA.White); spot.setPosition(cam.getLocation()); // shine from camera location spot.setDirection(cam.getDirection()); // shine forward from camera loc rootNode.addLight(spot);Example

17. 242-515 AGD: 9. Illumination17 The default reflection model used in jME was developed by Phong o it's close enough to real-world reflection for a wide range of light sources and object materials o it's efficient to calculate since it involves only four vectors to calculate a color for a point P on a surface. 3. The Phong Reflection Model P

18. 242-515 AGD: 9. Illumination18 p = a point on the surface n = the normal vector at point p v = the vector from P to the user l = the vector from P to the light source r = the direction that a perfectly reflected ray would take from p o this requires a (costly) calculation involving n and l

19. 242-515 AGD: 9. Illumination19 The Phong model supports three types of material- light reflections: o ambient reflection o diffuse reflection o specular reflection Each of these is combined with the ambient, diffuse, and specular components of the light sources to get the light intensity at a point P, and so the color of the point. 4. Three Kinds of Reflection

20. 242-515 AGD: 9. Illumination20 The intensity of ambient reflection is the same at every point on an object. This means that a shape's ambient reflection will be just one color: 4.1. Ambient Reflection

21. 242-515 AGD: 9. Illumination21 A diffuse reflector scatters incoming light equally in all directions The amount of reflection depends on the: o object's material o the position of the light source relative to the surface The result is a shape with varying light on it, but dull. 4.2. Diffuse Reflection A rough surface

22. 242-515 AGD: 9. Illumination22 Specular reflection adds highlights to the reflection (the shiny area). The amount of specular reflection that the user sees depends on the angle θ between r (the direction of a perfect reflector vector) and v (the direction of the viewer). 4.3. Specular Reflection

23. 242-515 AGD: 9. Illumination23 There is also a shininess coefficient o as the value increases the reflected light becomes concentrated into a smaller circle around the r vector 1515

24. 242-515 AGD: 9. Illumination24 4.4. Combining Reflections Ambient Diffuse + Combination = Specular +

25. 242-515 AGD: 9. Illumination25 In the Phong model, r· v needs to be calculated very often. The Blinn-Phong model reduces the overall work by using the halfway angle vector (h) o h lies halfway between the viewer vector (v) and the light- source vector (l) It allows r· v to be replaced by the n· h, which is less work to calculate. 5. The Blinn-Phong Model h this angle is usually θ/2

26. 242-515 AGD: 9. Illumination26 If the viewer and light source are far enough away, then h can be treated like a constant and only needs to be computed once. This change only affects the look of the specular reflection (slightly). jME3 uses standard Phong by default, but can be switched to Blinn-Phong to improve performance.

27. 242-515 AGD: 9. Illumination27 In jME, there is a built-in material which causes a shape to be affected by the Phong lighting model: o Common/MatDefs/Light/Lighting.j3md This material supports: o ambient, diffuse, and specular reflections o it also supports transparency, and can be combined with textures and maps (see next part) 6. Material and Lighting

28. 242-515 AGD: 9. Illumination28 6.1. PhongTeapot

29. 242-515 AGD: 9. Illumination29 public void simpleInitApp() { Geometry teapot = (Geometry) assetManager.loadModel( "Models/Teapot/Teapot.obj"); teapot.setLocalScale(4f); // bigger teapot.center(); // center of screen Material mat = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); mat.setBoolean("UseMaterialColors", true); mat.setColor("Ambient", ColorRGBA.Orange); mat.setColor("Diffuse", ColorRGBA.Orange); mat.setColor("Specular", ColorRGBA.White); mat.setFloat("Shininess", 12); teapot.setMaterial(mat); rootNode.attachChild(teapot); : Partial Code PhongTeapot.java

30. 242-515 AGD: 9. Illumination30 // add a light to make the lit object visible DirectionalLight sun = new DirectionalLight(); sun.setDirection(new Vector3f(1, 0, -2).normalizeLocal()); sun.setColor(ColorRGBA.White); rootNode.addLight(sun); } // end of simpleInitApp()

31. 242-515 AGD: 9. Illumination31 Added code from slide 10: With White Ambient Light

32. 242-515 AGD: 9. Illumination32 With only Orange Diffuse Reflection

33. 242-515 AGD: 9. Illumination33 Material AMBIENTDIFFUSESPECULARSHININESS Polished0.231250.27750.77391189.6 Silver0.231250.27750.773911 0.231250.27750.773911 1.0 Emerald0.02150.075680.63376.8 0.17450.614240.727811 0.02150.075680.633 0.55 Jade0.1350.540.31622812.8 0.22250.890.316228 0.15750.630.316228 0.95 Pearl0.251.00.29664811.264 0.207250.8290.296648 0.207250.8290.296648 0.922 Some Typical Materials more at http://devernay.free.fr/cours/opengl/materials.html

34. 242-515 AGD: 9. Illumination34 Jade Teapot

35. 242-515 AGD: 9. Illumination35 ColorRGBA jade = new ColorRGBA(0.54f, 0.89f, 0.63f, 0.95f); Material mat = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); mat.setBoolean("UseMaterialColors", true); mat.setColor("Ambient", jade); mat.setColor("Diffuse", jade); mat.setColor("Specular", ColorRGBA.White); mat.setFloat("Shininess", 12); teapot.setMaterial(mat); Change the Material Settings

36. 242-515 AGD: 9. Illumination36 The scene contains a stationary directional green light and a point red light orbiting a torus (doughnut). 7. Orbiting a Torus

37. 242-515 AGD: 9. Illumination37 The directional green light is pointing upwards o note that the inside top half of the torus is lit when it should be dark The point light geometry is a red circle, but this has nothing to do with the red color of the light it is emitting The point light is rotated by having the update loop (the simpleUpdate() method) rotate a spatial node linking the light to the scene o a light geometry and a LighNode object are rotated

38. 242-515 AGD: 9. Illumination38 Scene Graph geom mat red PointLight pl rootNode moving Node LightNode lightBulb geometry red-lit Material green DirectionalLight dl b&w lit Material

39. 242-515 AGD: 9. Illumination39 private float angle = 0f; // globals private Node movingNode; public void simpleInitApp() { Torus torus = new Torus(50, 30, 1, 3); // fine-detailed Geometry geom = new Geometry("Torus Geom", torus); geom.center(); // a white shiny doughnut with no ambient reflection Material mat = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); mat.setBoolean("UseMaterialColors", true); mat.setColor("Ambient", ColorRGBA.Black); mat.setColor("Diffuse", ColorRGBA.White); mat.setColor("Specular", ColorRGBA.White); mat.setFloat("Shininess", 32f); geom.setMaterial(mat); rootNode.attachChild(geom); : Partial Code TorusOrbiter.java

40. 242-515 AGD: 9. Illumination40 // red sphere representing the light source Geometry lightBulb = new Geometry("Light", new Sphere(10, 10, 0.1f)); lightBulb.setMaterial( assetManager.loadMaterial( "Common/Materials/RedColor.j3m")); movingNode = new Node("lightParentNode"); movingNode.attachChild(lightBulb); rootNode.attachChild(movingNode); // red point light, added to the scene graph PointLight pl = new PointLight(); pl.setColor(ColorRGBA.Red); pl.setRadius(4f); rootNode.addLight(pl); // also attached to same node as the lightbulb LightNode lightNode = new LightNode("pointLight", pl); movingNode.attachChild(lightNode); :

41. 242-515 AGD: 9. Illumination41 // green directional light, point upwards DirectionalLight dl = new DirectionalLight(); dl.setColor(ColorRGBA.Green); dl.setDirection(new Vector3f(0, 1, 0)); rootNode.addLight(dl); } // end of simpleInitApp()

42. 242-515 AGD: 9. Illumination42 public void simpleUpdate(float tpf) { angle += tpf; // increase the angle angle %= FastMath.TWO_PI; // limit to 0-360 degrees in radians movingNode.setLocalTranslation( new Vector3f(FastMath.cos(angle) * 3f, 2, FastMath.sin(angle) * 3f)); } // end of simpleUpdate() Circle around the (0,2,0) over the XZ plane with radius of 3 Circle around the (0,2,0) over the XZ plane with radius of 3

43. 242-515 AGD: 9. Illumination43 x == cos(angle), y == constant, z == sin(angle) this is a circle in the XZ plane Circle Maths X Z

44. 242-515 AGD: 9. Illumination44 Aim the light along the +x axis: dl.setDirection(new Vector3f(1, 0, 0)); Change the Directional Light

45. 242-515 AGD: 9. Illumination45 Surface normal vectors are essential in lighting calculations (they are the n vector). When you create a model in Blender, make sure to have it generate the surface (face) normals for you. 8. Surface (Face) Normals

46. 242-515 AGD: 9. Illumination46 8.1. Vertex Normals Vertex normals use the object's vertices as the source for the normals o this is how jME implements normals itself o vertex normals can be converted into surface normals Vertex normals can be set by jME method calls, but it's a lot of work for anything but simple shapes.

47. 242-515 AGD: 9. Illumination47 Lighting is only computed at the vertices of a shape (these are the P points). Shading is the process of filling in the colors for the pixels of the shape that lie between the verticies. There are three main approaches to shading: o flat shading o Gouraud shading (smooth shading) o Phong shading this is different from Phong lighting Shading is nothing to do with shadows. 9. Shading

48. 242-515 AGD: 9. Illumination48 Compute a single lighting value for each triangle (or quadrilateral) making up the shape. The worst looking shader, but is very fast. 9.1. Flat Shading

49. 242-515 AGD: 9. Illumination49 Lighting color is calculated per-vertex o saves computation Color is bilinearly interpolated across the pixels of each triangle using the verticies. 9.2. Gouraud Shading

50. 242-515 AGD: ??50 Gouraud in Action Apply interpolated values across pixels.

51. 242-515 AGD: ??51

52. 242-515 AGD: ??52

53. 242-515 AGD: ??53

54. 242-515 AGD: ??54

55. 242-515 AGD: 9. Illumination55 Not the same as Phong lighting. Calculate the lighting equation for every pixel of the shape o the surface normal is linearly interpolated across the triangle o looks the best, but is the slowest 9.3. Phong Shading

56. 242-515 AGD: 9. Illumination56 Phong vs Gouraud Specular highlights don’t look as good in Gouraud

57. 242-515 AGD: 9. Illumination57 jME3 supports all three approaches o it uses Phong shading by default, but this can be changed It use to be possible to change the shaders using: oShadeState st = new LWJGLShadeState(); st.setShade(ShadeState.SM_FLAT); // SM_SMOOTH st.setEnabled(true); rootNode.setRenderState(st); rootNode.updateRenderState(); o but ShadeState is not in v3 of jME o it looks like you need to use a programmable shader (see later) 9.4. Shading in jME3