Trident International Graphics Workshop 2014 5/5
-
Upload
takao-wada -
Category
Documents
-
view
146 -
download
1
description
Transcript of Trident International Graphics Workshop 2014 5/5
International 5-days Graphics Programming Workshop
using Cocos-2d-x
DAY 5
Trident College of Information Technology
Takao WADA
1. Review
2. Toon Shading
3. Alpha blending
4. Play with shader program
5. Final work
6. Presentation
Agenda
Review
Normal
TangentBi-normal
Normal mapping Tangent space TBN matrix
Parametric surface Plane Sphere Klein bottle Torus
Like a cartoon, cell shading
Toon shading
Final color is changed into the intensity.
Toon shading (cont’d)
varying float v_intensity;
void main(){
vec4 color;if (v_intensity > 0.95)
color = vec4(1.0,0.5,0.5,1.0);
else if (v_intensity > 0.5)color =
vec4(0.6,0.3,0.3,1.0);else if (v_intensity > 0.25)
color = vec4(0.4,0.2,0.2,1.0);
elsecolor =
vec4(0.2,0.1,0.1,1.0); gl_FragColor = color;}
Snip…varying float v_intensity;
void main(){
// Set the transformed positiongl_Position = u_projectionMatrix *
u_viewMatrix * u_worldMatrix * a_position;// Normal vector in view spacevec3 N =
normalize((u_normalMatrix * vec4(a_normal, 1)).xyz);
v_intensity = max(0.0, dot(N, vec3(0, 0, 1)));}
Vertex shader Fragment shader
Normal mapping and parametric surfaces Draw a Klein bottle (revised) Draw a torus
Toon shading Draw a torus Change the color or the rage
Work 5-1
Test in the rendering pipeline
ScissorTest
AlphaTest
StencilTest
DepthTest
AlphaBlending
Fragment
FrameBuffer
Dithering Logicop
Scissor test Within the scissor rectangle defined by 4 values.
Alpha test Comparison between the incoming fragment’s alpha value and a constant
value Stencil test
Comparison between the value in the stencil buffer and a reference value. Depth test
Depth comparison Alpha blending
Blend combines the incoming source fragment with the destination fragment. Dithering
Selects between two color values. Logical operation
applied between the incoming fragment’s color values and the color values stored at the corresponding location in the framebuffer.
Test in the rendering pipeline (cont’d)
Alpha blending Combine images or colors (Opaque -> Transparent) glEnable(GL_BLEND); glBlendFunc(src, dst); CB = src * Cs + dst * Cd
Multiplicative blending (Standard) (alpha * src) + (1 – alpha) * dst src: GL_SRC_ALPHA dst: GL_ONE_MINUS_SRC_ALPHA
Additive blending src + dst src: GL_ONE dst: GL_ONE
Add transparency using alpha blending
Main functions
Blending function
Function RGB Blend Factor
Alpha blend factor
ZERO (0, 0, 0) 0
ONE (1, 1, 1) 1
SRC_COLOR (Rs, Gs, Bs) As
ONE_MINUS_SRC _COLOR (1 - Rs, 1 - Gs, 1 - Bs)
1 − As
SRC_ALPHA (As, As, As) As
ONE_MINUS_SRC_ALPHA (1 - As, 1 - As, 1 - As)
1 − As
Pass the time parameter to the shader Pass a float value as an uniform variable
getGLProgramState()->setUniformFloat("u_time", _time);
Vertex shader uniform float u_time;
Dynamic controls Change the color in a shader Change the form by transforming vertices Change the texture coordinates
Dynamic controls in shaders
Add transparency NewParametricShaderNode class
update function getGLProgramState()->setUniformFloat("u_time", _time);
onDraw function (Override ParametericSurface’s) glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
alpha.vsh (Copy from lambert.vsh) v_diffuseColor = vec4(color, 0.5);
Fade in / fade out For objects (alpha.vsh)
uniform float u_time; float alpha = clamp(sin(u_time), 0.0, 1.0) ;
For background (simple.vsh)
Work 5-2
Modify the form of a shape vertexsin.vsh (Copy from lambert.vsh)
float z = sin(u_time + a_position.y); vec4 pos = a_position + vec4(0, 0, z, 1); gl_Position = u_projectionMatrix * u_viewMatrix * u_worldMatrix
* pos;
Create another formation
Work 5-3
Texture parameter glTexParameteri(GL_TEXTURE_2D,
GL_TEXTURE_WRAP_S, GL_REPEAT); GL_REPEAT – Use fractional value, then repeat pattern GL_CLAMP – Limit the range from 0 to 1
Scrolling Horizontal
v_texCoord = a_texCoord; v_texCoord.x += fract(u_time);
Scroll the background
Scroll background ShaderTextureNode.cpp
update function getGLProgramState()->setUniformFloat("u_time", _time);
onDraw function glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
simple.vsh Uniform float u_time; v_texCoord = a_texCoord; v_texCoord.x += u_time;
Work 5-4
Mosaic Modify texture coordinate in the fragment shader
float grids = 2.0; vec2 uv = floor(v_texCoord * grids + 0.5) / grids;
Play with 2-D shading
Mosaic mosaic.fsh (Copy from simple.fsh)
Noise noisy.fsh
Gray scale greyscale.fsh
Work 5-5
Create a graphics demo using some shapes and shaders. Add some objects in the scene Move, rotate, scale shapes Dynamically, change the scene
Present each other
Final work
OpenGL ES Shader program requires a precision qualifier lowp vec4 v_color; // for colors mediump vec2 v_texCoords; // for positions and texture
coordinates highp vec4 pos; // for some positions
and time Reference page
http://www.khronos.org/opengles/2_X/
For OpenGL ES
Sample source code https://github.com/drjiro/WSSample
Resources