Your SlideShare is downloading. ×
Cocos2dshader devcon jp_20120621_en
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Cocos2dshader devcon jp_20120621_en

1,928
views

Published on

Published in: Technology, Art & Photos

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,928
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Use of shader on cocos2d version cocos2d v2.0-rc112年7月13日金曜日
  • 2. My Profile FREE! • xionchannel • @ajinotataki • Technical Artist ElectroMaster HungryMaster 0.18M DL 0.05M DL12年7月13日金曜日
  • 3. What does shader do? • To calculate Rendering effects by GPU • VertexShader and FragmentShader • Use of GLSL language on OpenGL • Shader arguments (e.g. Attribute, Uniform)12年7月13日金曜日
  • 4. Flow on OpenGL ES 2.0 glCreateShader() glShaderSource() glCreateProgram() glCompileShader() glAttachShader() glLinkProgram() destructible later Usable later glUseProgram()12年7月13日金曜日
  • 5. 1. Create VertexShader, FragmentShader objects by glCreateShader() 2. Load shader program into object by glShaderSource() 3. Compile shader program by glCompileShader()12年7月13日金曜日
  • 6. 4. Create program object by glCreateProgram() 5. Attach shader program to program object by glAttachShader() ( At this time, you can destroy shader as object) 6. Link shader program by glLinkProgram() ( These steps are preprocessing ) 7. Apply shader program by glUseProgram()12年7月13日金曜日
  • 7. Use in cocos2d12年7月13日金曜日
  • 8. Flow on cocos2d 2.0 self.shaderProgram = [[CCShaderCache sharedShaderCache] programForKey:kCCShader_PositionTextureColor]; glCreateShader() glShaderSource() glCreateProgram() glCompileShader() glAttachShader() glLinkProgram() Destroy Initialize CC_NODE_DRAW_SETUP(); glUseProgram() draw12年7月13日金曜日
  • 9. Flow of initialization self.shaderProgram = [[CCShaderCache sharedShaderCache] programForKey:kCCShader_PositionTextureColor]; [CCShaderCache sharedShaderCache] [[CCShaderCache alloc] init]; [self loadDefaultShaders]; [[CCGLProgram alloc] initWithVertexShaderByteArray:fragmentShaderByteArray:]; glCreateShader() glCreateProgram() glShaderSource() glAttachShader() glCompileShader() Preparation of Attribute, Uniform Destroy glLinkProgram()12年7月13日金曜日
  • 10. Flow of initialization 1. Call [CCShaderCache sharedShaderCache] 2. In step1, call [[CCShaderCache alloc] init] 3. In step 2, call [self loadDefaultShaders] 4. In step 3, call [[CCGLProgram alloc] initWithVertexShaderByteArray: fragmentShaderByteArray: ], to compile shader and keep them in array.12年7月13日金曜日
  • 11. 5. Prepare identifiers of Attribute for Uniform ( see updateUniforms() ) 6. Link shader program and destroy programs that are created by step4. 7. Identifiers (e.g. attribute, uniform) pass self.shaderProgram which is a part of CCNode. This is due to cocos2d using shaders for CCNode that are kept in array by step4.12年7月13日金曜日
  • 12. Flow of drawing CC_NODE_DRAW_SETUP(); glUseProgram() glUniform*() Update dynamic uniform glBindTexture2d() Specify texture glVertexAttribPointer() Specify attribute positions glDrawArrays() Draw polygons12年7月13日金曜日
  • 13. Flow of drawing 1. In CC_NODE_DRAW_SETUP() macro, execute glUseProgram(). Enable to use shader. 2. Update dynamic Uniform parameters. 3. Bind texture. 4. Setup positions of Attribute parameters. 5. Draw polygons.12年7月13日金曜日
  • 14. Attribute, Uniform • Attribute is parameter for VertexShader. ★ Requires the number of vertexes data. (vertex positions, normal vectors, vertex colors) • Uniform is parameter of both sides. ★ does not require the number of pixels data. ★ Same data for all pixels. (Texture, value of calculation)12年7月13日金曜日
  • 15. How to use our original shader on cocos2d?12年7月13日金曜日
  • 16. Modify-initialize method self.shaderProgram = [[CCShaderCache sharedShaderCache] programForKey:kCCShader_PositionTextureColor]; [CCShaderCache sharedShaderCache] [[CCShaderCache alloc] init]; Replace with our original code. [self loadDefaultShaders]; [[CCGLProgram alloc] initWithVertexShaderByteArray:fragmentShaderByteArray:]; glCreateShader() glCreateProgram() glShaderSource() glAttachShader() glCompileShader() Preparation of Attribute, Uniform Destroy glLinkProgram()12年7月13日金曜日
  • 17. Modify-draw method CC_NODE_DRAW_SETUP(); Specify texture glUseProgram() Specify attribute positi glUniform*() Update dynamic uniform Draw polygons glUniform*() Add code that updates our original dynamic この辺に自 uniform. Add our 前パラメー original glBindTexture2d() Bind texture. And also add others you want to use. parameters タを追加 Specify attribute positions. And also add others glVertexAttribPointer() that you want to use. glDrawArrays() Draw polygons.12年7月13日金曜日
  • 18. Demo12年7月13日金曜日
  • 19. e.g. Directional lighting by using normal mapping.12年7月13日金曜日
  • 20. e.g. Point lighting by using normal mapping.12年7月13日金曜日
  • 21. GLSL references • Reference site( 床井研究室 ) http://marina.sys.wakayama-u.ac.jp/~tokoi/? date=20051006 • Today’s source code http://xionchannel.no-ip.org/ cocos2d_shaderTest.zip • Today’s keynote http://xionchannel.no-ip.org/ cocos2dShader20120621.pdf12年7月13日金曜日
  • 22. Special Thanks(Translation correction) Tomohisa Takaoka http://twitter.com/tomohisa Nicholas Salerno at http://salernodesignstudio.com/12年7月13日金曜日