Opengl es app 2 lighting
This presentation is the property of its rightful owner.
Sponsored Links
1 / 20

OpenGL ES App 2 – Lighting PowerPoint PPT Presentation


  • 90 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

OpenGL ES App 2 – Lighting

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

Presentation Transcript


Opengl es app 2 lighting

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

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 model1

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 model2

Phong Lighting Model

Specular

Ambient

Diffuse

I = Ii (Ka + Kdcosθ + Ks cosNsΦ)


Phong lighting model3

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

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

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 light1

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 shader1

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 shader2

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 shader3

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

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

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 effect1

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 effect2

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

Finally …

  • Here is the result !!!


Problem

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

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

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/


  • Login