Using Shader in cocos2d-x
30
Using Shader in cocos2d-x Dong Xuan Thuy, Fuji Technology 2017/03/09
-
Upload
vu-hung-nguyen -
Category
Education
-
view
42 -
download
7
Transcript of Using Shader in cocos2d-x
Using Shader in cocos2d-xDong Xuan Thuy, Fuji Technology
2017/03/09
About myself
- Đồng Xuân Thủy (Nick), 1992
- Game/Full-stack Developer (FujiTech)
- TechLead (WeenGame Studio)
https://github.com/thuydx55
[email protected]@fujitechjsc.com
Cocos2d family
Wiki: https://en.wikipedia.org/wiki/Cocos2d
Cocos2d (Python)
Cocos2d-ObjC (ObjC)
Cocos2d-x (C++, Javascript, Lua)
Cocos2d-html5 (deprecated) (Javascript)
Cocos2d-XNA (C#)
Rendering Pipeline
Position: Identifies it in a 3D space (x, y, z).
Color: Holds an RGBA value (R, G and B for the red, green, and blue channels, alpha for transparency — all values range from 0.0 to 1.0).
Normal: A way to describe the direction the vertex is facing.
Texture: A 2D image that the vertex can use to decorate the surface it is part of instead of a simple color.
Rendering Pipeline
Ref: https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory
Rendering Pipeline
Vertex processing
Rendering Pipeline
Rasterization
Rendering Pipeline
Fragment processing
What is shader?
Micro-program
Executed for each “vertex” or each “pixel”
Run on GPU
Languages
GLSL (OpenGL)
HLSL (DirectX)
2 kinds of shader: Vertex & Fragment
Example (What I’ve done)
TSOG (The School Of Games)
Lines98
TSOG (The School Of Games)
- http://www.theschoolofgames.org/
- Source Code: https://github.com/theschoolofgames/tsog-mainapp/
- Open Source Project
- Education
TSOG
Problem
200 objects difference images
Create animations
Create shade images
Create outline images
TSOG
TSOG
TSOG
Edge Detection
Lines98
- OpenCV?
Lines98
Clipping Node - Aliasing
Lines98R
G
B
A
Lines98
Lines98
Barrel Distort
Lines98
Lines98
QA
Example of shader in cocos2d-x
Old way to create effect like that
60 FPS
189 Frames / 30.6MB
Memory: 129.8 MB
30 FPS
95 Frames / 15.4MB
Memory: 65.2 MB
Old way to create effect like that
15 FPS
47 Frames / 7.6MB
Memory: 32.3 MB
10 FPS
31 Frames / 5MB
Memory: 21.3 MB
60 FPS
60 FPS 30 FPS
15 FPS 10 FPS
Using Shader: Better
Only one image
Implement shader and apply to that image
Comparison
Memory
FPS
