OpenGL ES App 2 – Lighting

OpenGL ES App 2 – Lighting

Goal Learn how you can use the shader through OpenGL ES Put the light in the scene and make the objects in the scene have light effect Also, the position of light source can MOVE!!

Phong Lighting Model • A simple model that Computes light intensity at a surface point, assuming point light source. • Considers only light reflected and regards others as an ambient term. • Consists of • Ambient term • Diffuse term • Specular term

Phong Lighting Model • Ambient term • Gross approximation of light, which produce constant illumination on all surface. • Diffuse term • Reflection of light from a surface that is reflected at many angles rather than at just one angle. • Specular term • Mirror-like reflection of light from a surface with a single outgoing direction.

Phong Lighting Model Specular Ambient Diffuse I = Ii (Ka + Kdcosθ + Ks cosNsΦ)

Phong Lighting Model • I = Ii (Ka + Kdcosθ+ Ks cosNsΦ) • Ii : the intensity of the light source • Ka : the ambient reflection coefficient • Kd : the diffuse reflection coefficient • θ: angle between the surface normal and a line from the surface point to the point light source • Ks : the specular reflection coefficient • Ns : the shininess coefficient • Φ : angle between v and r

Lighting by Vertex Shader • In the example, we simualte ambient lighting and diffuse lighting of a point light source by vertex shader. (a.k.a. Per-Vertex Lighting) • Ambient light is easy to compute, so we focus on diffuse light source • color = material color * ambient light color

Diffuse Lighting of Point Light • Idiffuse = Ii * Kdcosθ • Kd : the diffuse reflection coefficient • θ : angle between the surface normal(n) and a line from the surface point to the point light source(l) • Morover, • cosθ = nnorm ‧lnorm

Diffuse Lighting of Point Light • Attenuation factor • You may attenuate the light based on distance. • Ex: Diffuse = diffuse / (distance * distance) • Final color • final color = material color * ( light color * ( nnorm ‧lnorm ) * attenuation )

Lighting by Vertex Shader The vertex’s position and orientation in eye space u_LightPos is the light positon in eye space, so these formula is correct!!! ( how it’s passed in vertex shader will explain later. ) vec3 modelViewVertex = vec3(u_MVMatrix *a_Position); vec3 modelViewNormal = vec3(u_MVMatrix *vec4(a_Normal, 0.0)); float distance = length(u_LightPos - modelViewVertex); vec3 lightVector = normalize(u_LightPos - modelViewVertex);

Lighting by Vertex Shader We must ensure that the diffuse value is positive. Apply Attenuation factor. Final color and position. Note that the position is the projected position. That is, the position that is projected on the screen. float diffuse = max(dot(modelViewNormal, lightVector), 0.1); diffuse = diffuse * (1.0 / (1.0 + (0.25 * distance * distance))); v_Color = a_Color * diffuse; gl_Position = u_MVPMatrix * a_Position;

Lighting by Vertex Shader • Fragment shader • Since it’s per-vertex lighting, it’s no need to modify the fragment shader at all !!! precision mediump float; varying vec4 v_Color; void main() { gl_FragColor = v_Color; }

Shader Program for Light Source For demostrating the light effect, we show the point of light source in this program. However, we just want to show the point but not to put the light effect on that point !!! Therefore, we use another shader for the indicate where the light source is.

Display and see the light effect In OpenGL, the polygon is consist of triangles. Therefore, we must use two triangles to represent a face of cube. • Construction of the cube • In this example, we display cubes on the screen. final float[] cubePositionData = { // Front face -1.0f, 1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, ... }

Display and see the light effect Enable face culling. If you do this, the face that face back from you eye will not display. In large scene (i.e. 10000000 triangles in the scene), it will save a lot of time displaying back faces. • When displaying the objects, there are some flags that you should know. • GLES20.glEnable(GLES20.GL_CULL_FACE);

Display and see the light effect Enable depth test. If you do this, the depth of a generated pixel is stored in a buffer when an object is rendered. If another object of the scene must be rendered in the same pixel, the method compares the two depths and chooses the one closer to the observer. • When displaying the objects, there are some flags that you should know. • GLES20.glEnable(GLES20.GL_DEPTH_TEST);

Finally … • Here is the result !!!

Problem • Since we implement per-vertex lighting, the other parts of the cube face will let the pipeline to help us to generate the color. • You’ll see the right figure. The center the the cube face is not brighten …

Solution • Use per-pixel lighting!! • Process • In vertex shader, not only pass the position & color to the fragment shader, but the normal !!! ( it will also be interpolated ) • Compute the diffuse lighting in fragment shader.

Reference Learn OpenGL ES http://www.learnopengles.com/ Phong reflection model http://en.wikipedia.org/wiki/Phong_reflection_model OpenGL ES 2.0 Reference Pages http://www.khronos.org/opengles/sdk/docs/man/

OpenGL ES App 2 – Lighting