using shader in cocos2d-x
TRANSCRIPT
![Page 1: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/1.jpg)
Using Shader in cocos2d-xDong Xuan Thuy, Fuji Technology
2017/03/09
![Page 2: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/2.jpg)
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
![Page 3: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/3.jpg)
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#)
![Page 4: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/4.jpg)
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.
![Page 5: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/5.jpg)
Rendering Pipeline
Ref: https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory
![Page 6: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/6.jpg)
Rendering Pipeline
Vertex processing
![Page 7: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/7.jpg)
Rendering Pipeline
Rasterization
![Page 8: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/8.jpg)
Rendering Pipeline
Fragment processing
![Page 9: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/9.jpg)
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
![Page 10: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/10.jpg)
Example (What I’ve done)
TSOG (The School Of Games)
Lines98
![Page 11: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/11.jpg)
TSOG (The School Of Games)
- http://www.theschoolofgames.org/
- Source Code: https://github.com/theschoolofgames/tsog-mainapp/
- Open Source Project
- Education
![Page 12: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/12.jpg)
TSOG
Problem
200 objects difference images
Create animations
Create shade images
Create outline images
![Page 13: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/13.jpg)
TSOG
![Page 14: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/14.jpg)
TSOG
![Page 15: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/15.jpg)
TSOG
Edge Detection
![Page 17: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/17.jpg)
Lines98
- OpenCV?
![Page 18: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/18.jpg)
Lines98
Clipping Node - Aliasing
![Page 19: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/19.jpg)
Lines98R
G
B
A
![Page 20: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/20.jpg)
Lines98
![Page 21: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/21.jpg)
Lines98
Barrel Distort
![Page 22: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/22.jpg)
Lines98
![Page 23: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/23.jpg)
Lines98
![Page 24: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/24.jpg)
QA
![Page 25: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/25.jpg)
Example of shader in cocos2d-x
![Page 26: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/26.jpg)
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
![Page 27: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/27.jpg)
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
![Page 28: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/28.jpg)
60 FPS
60 FPS 30 FPS
15 FPS 10 FPS
![Page 29: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/29.jpg)
Using Shader: Better
Only one image
Implement shader and apply to that image
![Page 30: Using Shader in cocos2d-x](https://reader036.vdocuments.us/reader036/viewer/2022081502/58ef59131a28ab73588b459b/html5/thumbnails/30.jpg)
Comparison
Memory
FPS