Download to read offline
Uploaded byVu Hung Nguyen
Using Shader in cocos2d-x
This document discusses using shaders in cocos2d-x. It begins with an introduction to the speaker and overview of the cocos2d family of frameworks. It then explains the graphics rendering pipeline and key steps like vertex processing and rasterization. The document defines what a shader is and that it is executed for each vertex and pixel. Examples of using shaders in projects like The School of Games and Lines98 are provided to improve performance over traditional techniques. In summary, shaders can enhance games by processing graphics in real-time on the GPU for better memory usage and higher frame rates.
In this document
Powered by AI
Introduction to shader usage in Cocos2d-x by Dong Xuan Thuy, a game developer.
Overview of the Cocos2d family including various versions (Cocos2d, Cocos2d-x, etc.).
Explains the rendering pipeline stages: position, color, normal, texture, vertex processing, rasterization, and fragment processing.
Definition of shaders, micro-programs executed on GPU, with types including vertex and fragment. Languages: GLSL, HLSL.
Introduction to TSOG (The School Of Games) project, its educational purpose, and related source code.
Further details on TSOG including techniques for creating animations and edge detection.
Overview of the Lines98 board game, discussing its features and potential use of OpenCV.
Technical details related to rendering in Lines98, including memory and image stats.
A dedicated slide for Q&A regarding the presentation content.
Illustration of how shaders improve rendering in Cocos2d-x with comparisons of performance (FPS and memory) from old methods.
Final comparison of memory and FPS metrics showcasing efficiency of shader implementation.
More Related Content
![[NDC 2021] 게임 PD가 되어 보니](https://cdn.slidesharecdn.com/ss_thumbnails/2021-210709020918-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![NDC 2015. 한 그루 한 그루 심지 않아도 돼요. 생태학에 기반한 [야생의 땅: 듀랑고]의 절차적 생성 생태계](https://cdn.slidesharecdn.com/ss_thumbnails/zxw42orfsbyogfutmcuz-signature-336dceb59671a895fbf4d561f6799d39719d30f09e04cae133a46c0a8f86264a-poli-150519075553-lva1-app6891-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Using Shader in cocos2d-x
![Học cờ cùng con - Nguyễn Vỹ Kỳ Anh [U8]](https://cdn.slidesharecdn.com/ss_thumbnails/hoccocungcon-nguyenvukyanhu8-190212075426-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![2018 Học cờ cùng con - Nguyễn Vũ Kỳ Anh [U7]](https://cdn.slidesharecdn.com/ss_thumbnails/2018hoccocungco-nguyenvukyanh-180131030505-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Using Shader in cocos2d-x
- 1. Using Shader incocos2d-x Dong Xuan Thuy, Fuji Technology 2017/03/09
- 2. About myself - ĐồngXuâ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: Identifiesit 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.
- 5.
- 6.
- 7.
- 8.
- 9. What is shader? Micro-program Executedfor each “vertex” or each “pixel” Run on GPU Languages GLSL (OpenGL) HLSL (DirectX) 2 kinds of shader: Vertex & Fragment
- 10. Example (What I’vedone) TSOG (The School Of Games) Lines98
- 11. TSOG (The SchoolOf Games) - http://www.theschoolofgames.org/ - Source Code: https://github.com/theschoolofgames/tsog-mainapp/ - Open Source Project - Education
- 12. TSOG Problem 200 objects differenceimages Create animations Create shade images Create outline images
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. Lines98 Clipping Node -Aliasing
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. Example of shaderin cocos2d-x
- 26. Old way tocreate 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 tocreate 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 FPS30 FPS 15 FPS 10 FPS
- 29. Using Shader: Better Onlyone image Implement shader and apply to that image
- 30.
Editor's Notes
- #7 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.
- #8 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.
- #9 Fragment processing focuses on textures and lighting — it calculates final colors based on the given parameters.
- #10 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?