Cocos2d Shaders
?Download as KEY, PDF?
7 likes?2,581 views
How to use original shaders on cocos2d.
![cocos2d 2.0 での流れ
self.shaderProgram = [[CCShaderCache sharedShaderCache]
programForKey:kCCShader_PositionTextureColor];
glCreateShader()
glShaderSource() glCreateProgram()
glCompileShader() glAttachShader()
glLinkProgram()
破棄 初期化メソッド
CC_NODE_DRAW_SETUP();
glUseProgram() drawメソッド](https://image.slidesharecdn.com/cocos2dshader20120621-120621120712-phpapp02/85/Cocos2d-Shaders-8-320.jpg)
![初期化メソッドの流れ
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()
破棄](https://image.slidesharecdn.com/cocos2dshader20120621-120621120712-phpapp02/85/Cocos2d-Shaders-9-320.jpg)
![初期化メソッドの流れ
1. [CCShaderCache sharedShaderCache]が呼ばれる
2. その中で[[CCShaderCache alloc] init];が呼ばれる
3. その中で[self loadDefaultShaders];が呼ばれる
4. その中で[[CCGLProgram alloc]
initWithVertexShaderByteArray:
fragmentShaderByteArray: ];が呼ばれシェーダーが
コンパイルされ、配列に保持](https://image.slidesharecdn.com/cocos2dshader20120621-120621120712-phpapp02/85/Cocos2d-Shaders-10-320.jpg)
![初期化メソッドを変更
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()
破棄](https://image.slidesharecdn.com/cocos2dshader20120621-120621120712-phpapp02/85/Cocos2d-Shaders-16-320.jpg)
Cocos2d Shaders
- 1. 肠辞肠辞蝉2诲でシェーダーを使おう 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()
- 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. 使用テクスチャをBind 4. Attributeパラメータのメモリ座標をセット 5. ポリゴンを描画
- 14. Attribute, Uniform ? AttributeはVertexShader用パラメータ ★ 頂点数分のデータが必要 （頂点座標、法線、頂点カラーなど） ? Uniformは双方へのパラメータ ★ ピクセル分のデータではない ★ 全ピクセルに対して同じデータ （テクスチャ、演算用の値など）
- 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. というわけで 実際にやってみた
- 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
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n