International 5-days Graphics Programming Workshop

using Cocos-2d-x

DAY 4

Trident College of Information Technology

Takao WADA

1. Review

2. Modified classes

3. Per pixel rendering

4. Normal mapping

5. Parametric surface

6. Work

Agenda

Ambient color Ambient Color = Material (Ma)

Lambert shading Diffuse Color (Cd) = Light (Id) * Material (Md) * df

df = max(0, (L ∙ N)

Blinn-Phong shading Specular color (Cs) = Light (Is) * Material (Ms) * sf

H = normalize(L + E) sf = max(0, N ∙ H)n

Per vertex shading using texture (Ct)

Vertex shader --- Cv = Ca + Cd + Cs

Fragment shader --- C = Cv * Ct

Per pixel shading using texture Vertex shader ---- Pass parameters only Fragment shader --- C = Ca + Cd * Ct + Cs

Review

Create some shapes using sphere mesh R: Rings S: Slices

Work 4-1

R=16 S=32 R=2 S=3 R=2 S=4

Class hierarchy

Modified classes

ShaderNode(Abstract)

Shader2dNode DiceShaderNode SphereShaderNode

TextureShaderNode

Camera Light VertexPositionNormalColorTexture

ShaderNode class public

update --- virtual function (can override by subclass) draw --- common drawing for Cocos2d-x setPosition, setRotation, setScale --- set parameters to create a world matrix setCamera --- set a camera used to draw (Required) setLight --- set a light used to draw (Required) setTexture0 --- diffuse texture setTexture1--- normal texture (later)

protected (can access from subclasses) onDraw --- pure virtual function (override by subclass) loadShaders ---load vertex and fragment shader from file setCommon3dEnvironment --- Set up common 3-D environment for 3-D node

(can override) default combination of matices is Scale -> Rotation(Z) -> Rotation(X) -> Rotation(Y) -> Translation

New functions

Subclasses of ShaderNode class public

create --- static function (called by Subclass name::create), factory of instance object

update --- override function, update per a frame protected

init--- local function, initialize data onDraw --- override function, draw mesh

New functions (cont’d)

Camera3d class public

getViewMatrix --- get the view matrix called for drawing getProjectionMatrix --- get the projection matrix called for drawing getEye --- get the eye position to draw hi-lighting etc. in 3D vector setEye --- set the eye position by x,y,z setLookat -– set the target position to look at by x,y,z setFov --- set FOV(field of view angle in degree)

protected setViewMatrix--- set the view matrix (common function) setProjectionMatrix --- set the projection matrix (common function)

Light class public

getDirection--- get the light direction in 3D vector setDirection--- set the light direction by x,y,z

New functions (cont’d)

Compute the lighting per pixel in the fragment shader

Per pixel rendering

void main(void) {vec3 N = normalize(v_normal);vec3 L = v_light0;vec3 E = v_eye;vec3 H = normalize(L + E);

// Diffuse colorfloat df = max(0.0, dot(N, L));// Specular colorfloat sf = max(0.0, dot(N, H));sf = pow(sf, c_power);// Texture colorvec4 tf = texture2D(u_texture0, v_texCoord);

gl_FragColor = c_ambient + df * c_diffuse * tf + sf * c_specular;}

Culling glCullFace(GL_BACK); or glCullFace(GL_FRONT); glEnable(GL_CULL_FACE); or glDisable(GL_CULL_FACE);

Composing Draw a background image without using a depth buffer

glDisable(GL_DEPTH_TEST);

Sample source Fill the view port with texture image (Ex.) ShaderTextureNode.cpp

Culling and composing 2-D and 3-D

1. Render the 2 spheres using Blinn-Phong shading, one is per vertex, the other is per pixel.

2. Change the background color glClearColor(0.6f, 0.8f, 1.0f, 1.0f);

3. Change the position of spheres.

4. Change the eye position and/or look at position of the camera

5. Draw the background and spheres

Work 4-2

Normal mapping

Normal

TangentBi-normal

Tangent space Local coordinate space per vertex to implement normal mapping

Tangent vector A vector that is tangent to a curve or surface Include in the vertex format

Bi-normal vector It can be computed by the normal vector and tangent vector because of they

make 3 orthogonal axes.

Normal mapping (cont’d)

Coordinate spaces

Tangent space

Object space

World space

Eye space

Projection space

Model (World) matrix

TBN matrix

View matrix

Projection matrix

TBN matrix Tangent space coordinate

T – tangent vector B – bi-normal vector N – normal vector

Transform to the tangent space Eye vector in the tangent space

TBN matrix * eye vector in the object space

Light vector in the tangent space TBN matrix * light vector in the

object space

TBN matrix Tangent space coordinate

T – tangent vector B – bi-normal vector N – normal vector

Transform to the tangent space Eye vector in the tangent space

TBN matrix * eye vector in the object space Light vector in the tangent space

TBN matrix * light vector in the object space

Normal vector is sampled from the normal map. Compute from the color value by converting

from 0 to 1 -> from -1 to +1 texture2D(u_texture1, v_texCoord).rgb * 2.0 - 1.0

Normal mapping (cont’d)

Sample shader code snipets

Normal mapping (cont’d)

vec3 N = normalize(texture2D(u_texture1, v_texCoord).rgb * 2.0 - 1.0);Fragment shader

Vertex shader // Compute tangent space matrixmat3 normalMatrix = mat3_emu(u_normalMatrix);

vec3 normal = normalize(normalMatrix * a_normal);vec3 tangent = normalize(normalMatrix * a_tangent);vec3 binormal = cross(normal, tangent);mat3 TBNMatrix = mat3(tangent, binormal, normal);

mat3 modelViewMatrix = mat3_emu(u_viewMatrix * u_worldMatrix);vec3 pos = (u_viewMatrix * u_worldMatrix * a_position).xyz;

// Transform the light vector into tangent spacev_light0 = normalize(TBNMatrix * (-u_lightDirection0 - pos));// Transform the eye vector into tangent spacev_eye = normalize(TBNMatrix * (u_eye - pos));

Create a 3-D geometry by a parametric equation with 2 parameters (u, v).

Ex 1. Plane x = u y = v z = 0 0 ≤ u ≤ 1 0 ≤ v ≤ 1

Parametric surface

Ex 2. Sphere x = r - sin u cos v y = r cos u z = r sin u cos v 0 ≤ u ≤ π 0 ≤ v ≤ 2π

Parametric surface (cont’d)

Create some parametric surfaces NewParametricShaderNode class

Work 4-3

NewParametricShaderNode::NewParametricShaderNode(): ParametricMeshShaderNode(50, 50){snip…

// (Umin, Umax, Vmin, Vmax)computeVertexAndNormals(-1, 1, -1, 1);

snip…}

Vec3 NewParametricShaderNode::evaluate(const Vec2& domain) const{

float u = domain.x, v = domain.y;

float x = u;float y = v;float z = 0;return Vec3(x, y, z);

}