1 / 20

# OpenGL ES App 2 – Lighting - PowerPoint PPT Presentation

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

OpenGL ES App 2 – Lighting

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

## 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

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

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

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;

• 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/