SlideShare une entreprise Scribd logo
1  sur  22
Télécharger pour lire hors ligne
Use of shader on cocos2d

                  version cocos2d v2.0-rc1




12年7月13日金曜日
My Profile
                                                     FREE!




              •   xionchannel

              •   @ajinotataki

              •   Technical Artist
                                     ElectroMaster   HungryMaster
                                       0.18M DL       0.05M DL



12年7月13日金曜日
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日金曜日
Flow on OpenGL ES 2.0

                 glCreateShader()

                 glShaderSource()   glCreateProgram()

                glCompileShader()   glAttachShader()

                                     glLinkProgram()



              destructible later

                                                 Usable later
                                     glUseProgram()



12年7月13日金曜日
1. Create VertexShader, FragmentShader
                 objects by glCreateShader()
              2. Load shader program into object by
                 glShaderSource()
              3. Compile shader program by
                 glCompileShader()




12年7月13日金曜日
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日金曜日
Use in cocos2d




12年7月13日金曜日
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()                  draw


12年7月13日金曜日
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日金曜日
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日金曜日
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日金曜日
Flow of drawing
       CC_NODE_DRAW_SETUP();


                       glUseProgram()

                         glUniform*()         Update dynamic uniform



                      glBindTexture2d()       Specify texture

                    glVertexAttribPointer()   Specify attribute positions

                       glDrawArrays()         Draw polygons




12年7月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日金曜日
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日金曜日
How to use our original
               shader on cocos2d?



12年7月13日金曜日
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日金曜日
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日金曜日
Demo




12年7月13日金曜日
e.g. Directional lighting by using normal mapping.



12年7月13日金曜日
e.g. Point lighting by using normal mapping.



12年7月13日金曜日
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.pdf



12年7月13日金曜日
Special Thanks(Translation correction)

                 Tomohisa Takaoka http://twitter.com/tomohisa
               Nicholas Salerno at http://salernodesignstudio.com/




12年7月13日金曜日

Contenu connexe

Similaire à Cocos2dshader devcon jp_20120621_en

Cocos2d x-sprite3d
Cocos2d x-sprite3dCocos2d x-sprite3d
Cocos2d x-sprite3d
aktsk
 
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
AdvancedTechNight
 
cocos2d-xにおけるBox2Dの利用方法および便利なツール
cocos2d-xにおけるBox2Dの利用方法および便利なツールcocos2d-xにおけるBox2Dの利用方法および便利なツール
cocos2d-xにおけるBox2Dの利用方法および便利なツール
Tomoaki Shimizu
 
GameKitを使ったBluetoothプログラミング
GameKitを使ったBluetoothプログラミングGameKitを使ったBluetoothプログラミング
GameKitを使ったBluetoothプログラミング
taiko19xx
 
Groovy base gradle_20130309
Groovy base gradle_20130309Groovy base gradle_20130309
Groovy base gradle_20130309
Nobuhiro Sue
 

Similaire à Cocos2dshader devcon jp_20120621_en (20)

Cocos2d Shaders
Cocos2d ShadersCocos2d Shaders
Cocos2d Shaders
 
はじめてのぽりごん
はじめてのぽりごんはじめてのぽりごん
はじめてのぽりごん
 
Cocos2d x-sprite3d
Cocos2d x-sprite3dCocos2d x-sprite3d
Cocos2d x-sprite3d
 
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
 
Flashup13 Basic Training of Flare3D
Flashup13 Basic Training of Flare3DFlashup13 Basic Training of Flare3D
Flashup13 Basic Training of Flare3D
 
cocos2d-xにおけるBox2Dの利用方法および便利なツール
cocos2d-xにおけるBox2Dの利用方法および便利なツールcocos2d-xにおけるBox2Dの利用方法および便利なツール
cocos2d-xにおけるBox2Dの利用方法および便利なツール
 
GameKitを使ったBluetoothプログラミング
GameKitを使ったBluetoothプログラミングGameKitを使ったBluetoothプログラミング
GameKitを使ったBluetoothプログラミング
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分
 
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
 
Web GLの話
Web GLの話Web GLの話
Web GLの話
 
Dsl&Builder
Dsl&BuilderDsl&Builder
Dsl&Builder
 
Groovyで楽にSQLを実行してみよう
Groovyで楽にSQLを実行してみようGroovyで楽にSQLを実行してみよう
Groovyで楽にSQLを実行してみよう
 
㉒初期プロジェクトを改造!
㉒初期プロジェクトを改造!㉒初期プロジェクトを改造!
㉒初期プロジェクトを改造!
 
Gws 20130315 gradle_handson
Gws 20130315 gradle_handsonGws 20130315 gradle_handson
Gws 20130315 gradle_handson
 
3次元図形をSchemeで造ろう!
3次元図形をSchemeで造ろう!3次元図形をSchemeで造ろう!
3次元図形をSchemeで造ろう!
 
MacRubyとHotCocoaでMacのアプリを作ってみた
MacRubyとHotCocoaでMacのアプリを作ってみたMacRubyとHotCocoaでMacのアプリを作ってみた
MacRubyとHotCocoaでMacのアプリを作ってみた
 
Groovy base gradle_20130309
Groovy base gradle_20130309Groovy base gradle_20130309
Groovy base gradle_20130309
 
Pivotal認定講師によるSpring Framework 5.1 & Spring Boot 2.1ハンズオン! #jjug_ccc
Pivotal認定講師によるSpring Framework 5.1 & Spring Boot 2.1ハンズオン! #jjug_cccPivotal認定講師によるSpring Framework 5.1 & Spring Boot 2.1ハンズオン! #jjug_ccc
Pivotal認定講師によるSpring Framework 5.1 & Spring Boot 2.1ハンズオン! #jjug_ccc
 
Eclipse ADTとAndroidStudio両方で動かせる開発環境構築
Eclipse ADTとAndroidStudio両方で動かせる開発環境構築Eclipse ADTとAndroidStudio両方で動かせる開発環境構築
Eclipse ADTとAndroidStudio両方で動かせる開発環境構築
 
Windows 8 ストア アプリ 開発 Tips
Windows 8 ストア アプリ 開発 TipsWindows 8 ストア アプリ 開発 Tips
Windows 8 ストア アプリ 開発 Tips
 

Dernier

Dernier (11)

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 

Cocos2dshader devcon jp_20120621_en

  • 1. Use of shader on cocos2d version cocos2d v2.0-rc1 12年7月13日金曜日
  • 2. My Profile FREE! • xionchannel • @ajinotataki • Technical Artist ElectroMaster HungryMaster 0.18M DL 0.05M DL 12年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日金曜日
  • 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() draw 12年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 polygons 12年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日金曜日
  • 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.pdf 12年7月13日金曜日
  • 22. Special Thanks(Translation correction) Tomohisa Takaoka http://twitter.com/tomohisa Nicholas Salerno at http://salernodesignstudio.com/ 12年7月13日金曜日