How to use original shaders on cocos2d.

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. 使用テクスチャをBind
4. 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