Cocos2d Shaders

  • 2,459 views
Uploaded on

How to use original shaders on cocos2d.

How to use original shaders on cocos2d.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,459
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
16
Comments
0
Likes
7

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

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