cocos2dでシェーダーを使おう     cocos2d v2.0-rc1
自己紹介                                       FREE!•   xionchannel•   @ajinotataki•   Technical Artist                       ...
シェーダーとは• GPU用の色をつけるプログラム• VertexShaderとFragmentShaderがある• OpenGLではGLSL言語を使う• シェーダーに与える引数もある  Attribute, Uniform
OpenGL ES 2.0 での流れglCreateShader()glShaderSource()    glCreateProgram()glCompileShader()   glAttachShader()               ...
1. VertexShader, FragmentShaderのシェーダーオブ  ジェクトを作成 glCreateShader()2. シェーダーオブジェクトにプログラムを読み  込む glShaderSource()3. プログラムをコンパイ...
4. プログラムオブジェクトを作成 glCreateProgram()5. プログラムオブジェクトにシェーダーを登録 glAttachShader() ※ここでシェーダーオブジェクトは破棄して良い6. シェーダープログラムをリンク glLink...
cocos2dではどういう流れになっているか
cocos2d 2.0 での流れself.shaderProgram = [[CCShaderCache sharedShaderCache]                      programForKey:kCCShader_Posit...
初期化メソッドの流れself.shaderProgram = [[CCShaderCache sharedShaderCache]                      programForKey:kCCShader_PositionTex...
初期化メソッドの流れ1. [CCShaderCache sharedShaderCache]が呼ばれる2. その中で[[CCShaderCache alloc] init];が呼ばれる3. その中で[self loadDefaultShader...
5. さらにシェーダーのAttribute, Uniform指定用の  識別子を準備 (updateUniformsメソッド)6. シェーダーをリンクし、4で生成されたプログ  ラムは破棄7. 4で保持されたシェーダーをCCNodeで使用する ...
drawメソッドの流れCC_NODE_DRAW_SETUP();                glUseProgram()                  glUniform*()         動的Uniformを更新         ...
drawメソッドの流れ1. CC_NODE_DRAW_SETUP()マクロ内で glUseProgram()を実行、シェーダーが使用可能に なる2. 動的Uniformパラメータを更新3. 使用テクスチャをBind4. Attributeパラメ...
Attribute, Uniform• AttributeはVertexShader用パラメータ ★ 頂点数分のデータが必要   (頂点座標、法線、頂点カラーなど)• Uniformは双方へのパラメータ ★ ピクセル分のデータではない ★ 全ピ...
cocos2dでオリジナルシェーダーを使うには?
初期化メソッドを変更self.shaderProgram = [[CCShaderCache sharedShaderCache]                      programForKey:kCCShader_PositionTex...
drawメソッドの変更CC_NODE_DRAW_SETUP();                glUseProgram()                  glUniform*()         動的Uniformを更新         ...
というわけで実際にやってみた
法線マップを使用した平行光源ライティングの例
法線マップを使用した点光源ライティングの例
GLSLの参考資料•   床井研究室    http://marina.sys.wakayama-u.ac.jp/~tokoi/?    date=20051006•   今回のソース    http://xionchannel.no-ip.o...
Upcoming SlideShare
Loading in …5
×

Cocos2d Shaders

3,500 views

Published on

How to use original shaders on cocos2d.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,500
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
20
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Cocos2d Shaders

    1. 1. cocos2dでシェーダーを使おう cocos2d v2.0-rc1
    2. 2. 自己紹介 FREE!• xionchannel• @ajinotataki• Technical Artist ElectroMaster HungryMaster 18万本 5万本
    3. 3. シェーダーとは• GPU用の色をつけるプログラム• VertexShaderとFragmentShaderがある• OpenGLではGLSL言語を使う• シェーダーに与える引数もある Attribute, Uniform
    4. 4. OpenGL ES 2.0 での流れglCreateShader()glShaderSource() glCreateProgram()glCompileShader() glAttachShader() glLinkProgram()破棄してOK あとで使う glUseProgram()
    5. 5. 1. VertexShader, FragmentShaderのシェーダーオブ ジェクトを作成 glCreateShader()2. シェーダーオブジェクトにプログラムを読み 込む glShaderSource()3. プログラムをコンパイル glCompileShader()
    6. 6. 4. プログラムオブジェクトを作成 glCreateProgram()5. プログラムオブジェクトにシェーダーを登録 glAttachShader() ※ここでシェーダーオブジェクトは破棄して良い6. シェーダープログラムをリンク glLinkProgram() ※ここまで事前処理で良い7. シェーダープログラムを適用 glUseProgram()
    7. 7. cocos2dではどういう流れになっているか
    8. 8. cocos2d 2.0 での流れself.shaderProgram = [[CCShaderCache sharedShaderCache] programForKey:kCCShader_PositionTextureColor]; glCreateShader() glShaderSource() glCreateProgram() glCompileShader() glAttachShader() glLinkProgram() 破棄 初期化メソッド CC_NODE_DRAW_SETUP(); glUseProgram() drawメソッド
    9. 9. 初期化メソッドの流れself.shaderProgram = [[CCShaderCache sharedShaderCache] programForKey:kCCShader_PositionTextureColor]; [CCShaderCache sharedShaderCache] [[CCShaderCache alloc] init]; [self loadDefaultShaders]; [[CCGLProgram alloc] initWithVertexShaderByteArray:fragmentShaderByteArray:]; glCreateShader() glCreateProgram() glShaderSource() glAttachShader() glCompileShader() Attribute, Uniformの準備 glLinkProgram() 破棄
    10. 10. 初期化メソッドの流れ1. [CCShaderCache sharedShaderCache]が呼ばれる2. その中で[[CCShaderCache alloc] init];が呼ばれる3. その中で[self loadDefaultShaders];が呼ばれる4. その中で[[CCGLProgram alloc] initWithVertexShaderByteArray: fragmentShaderByteArray: ];が呼ばれシェーダーが コンパイルされ、配列に保持
    11. 11. 5. さらにシェーダーのAttribute, Uniform指定用の 識別子を準備 (updateUniformsメソッド)6. シェーダーをリンクし、4で生成されたプログ ラムは破棄7. 4で保持されたシェーダーをCCNodeで使用する ために識別子がCCNode側のself.shaderProgram を渡す
    12. 12. drawメソッドの流れCC_NODE_DRAW_SETUP(); glUseProgram() glUniform*() 動的Uniformを更新 glBindTexture2d() 使用するテクスチャを指定 glVertexAttribPointer() Attributeメモリ座標を指定 glDrawArrays() ポリゴン描画
    13. 13. drawメソッドの流れ1. CC_NODE_DRAW_SETUP()マクロ内で glUseProgram()を実行、シェーダーが使用可能に なる2. 動的Uniformパラメータを更新3. 使用テクスチャをBind4. Attributeパラメータのメモリ座標をセット5. ポリゴンを描画
    14. 14. Attribute, Uniform• AttributeはVertexShader用パラメータ ★ 頂点数分のデータが必要 (頂点座標、法線、頂点カラーなど)• Uniformは双方へのパラメータ ★ ピクセル分のデータではない ★ 全ピクセルに対して同じデータ (テクスチャ、演算用の値など)
    15. 15. cocos2dでオリジナルシェーダーを使うには?
    16. 16. 初期化メソッドを変更self.shaderProgram = [[CCShaderCache sharedShaderCache] programForKey:kCCShader_PositionTextureColor]; [CCShaderCache sharedShaderCache] これを自前にして自前の [[CCShaderCache alloc] init]; シェーダーを登録する [self loadDefaultShaders]; [[CCGLProgram alloc] initWithVertexShaderByteArray:fragmentShaderByteArray:]; glCreateShader() glCreateProgram() glShaderSource() glAttachShader() glCompileShader() Attribute, Uniformの準備 glLinkProgram() 破棄
    17. 17. drawメソッドの変更CC_NODE_DRAW_SETUP(); glUseProgram() glUniform*() 動的Uniformを更新 glUniform*() 自前の動的Uniformを更新を追加この辺に自前パラメー glBindTexture2d() 使用するテクスチャを指定、自前のも追加タを追加 glVertexAttribPointer() Attributeメモリ座標を指定、自前のも追加 glDrawArrays() ポリゴン描画
    18. 18. というわけで実際にやってみた
    19. 19. 法線マップを使用した平行光源ライティングの例
    20. 20. 法線マップを使用した点光源ライティングの例
    21. 21. GLSLの参考資料• 床井研究室 http://marina.sys.wakayama-u.ac.jp/~tokoi/? date=20051006• 今回のソース http://xionchannel.no-ip.org/ cocos2d_shaderTest.zip• 今回のスライド http://xionchannel.no-ip.org/ cocos2dShader20120621.pdf

    ×