Using Shader in cocos2d-x
•Download as PPTX, PDF•
0 likes•1,173 views
Using Shader in cocos2d-x
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Using Shader in cocos2d-x
Similar to Using Shader in cocos2d-x (15)
More from Vu Hung Nguyen
More from Vu Hung Nguyen (20)
Recently uploaded
Recently uploaded (20)
Using Shader in cocos2d-x
- 1. Using Shader in cocos2d-x Dong Xuan Thuy, Fuji Technology 2017/03/09
- 2. About myself - Đồng Xuân Thủy (Nick), 1992 - Game/Full-stack Developer (FujiTech) - TechLead (WeenGame Studio) https://github.com/thuydx55 nick@weengame.com thuy.dong@fujitechjsc.com
- 3. 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#)
- 4. 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.
- 9. 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
- 10. Example (What I’ve done) TSOG (The School Of Games) Lines98
- 11. TSOG (The School Of Games) - http://www.theschoolofgames.org/ - Source Code: https://github.com/theschoolofgames/tsog-mainapp/ - Open Source Project - Education
- 12. TSOG Problem 200 objects difference images Create animations Create shade images Create outline images
- 13. TSOG
- 14. TSOG
- 18. Lines98 Clipping Node - Aliasing
- 19. Lines98 R G B A
- 20. Lines98
- 22. Lines98
- 23. Lines98
- 24. QA
- 25. Example of shader in cocos2d-x
- 26. 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
- 27. 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
- 28. 60 FPS 60 FPS 30 FPS 15 FPS 10 FPS
- 29. Using Shader: Better Only one image Implement shader and apply to that image
Editor's Notes
- Vertex processing is about combining the information about individual vertices into primitives and setting their coordinates in the 3D space for the viewer to see. It's like taking a photo of the given scenery you have prepared — you have to place the objects first, configure the camera, and then take the shot.
- Rasterization converts primitives (which are connected vertices) to a set of fragments. Those fragments — which are 3D projections of the 2D pixels — are aligned to the pixel grid, so eventually they can be printed out as pixels on a 2D screen display during the output merging stage.
- Fragment processing focuses on textures and lighting — it calculates final colors based on the given parameters.
- Of course! These days, even the cheapest GPU will bring you at least 300 or so cores (with monster cards having over 3000 of them), and performing the same thing across all the cores, is what GPUs are really good with. Those 30M shader runs per second, when distributed across 300 GPU cores running @ 1GHz each, will mean that we have 10000 GPU clocks to run our shader. And while GPU cores are weaker than CPU ones7 for generic calculations, they have hardware support for those things which matter for graphics and shaders. Just as one example, GPUs tend to have sin/cos operations8 at mere 8x of the cost of integer addition operation, while for CPU the ratio is more like 50-200x Fragment: returns the color of the pixel. Vertex: what vertices we’re speaking about?