SlideShare a Scribd company logo
Submit Search
Upload
【TechBuzz】第9回cocos2d-x勉強会「シェーダ書いてますか?」
Report
Share
N
nyagasuki
Follow
•
13 likes
•
7,629 views
1
of
57
【TechBuzz】第9回cocos2d-x勉強会「シェーダ書いてますか?」
•
13 likes
•
7,629 views
Report
Share
Download Now
Download to read offline
Software
TechBuzzの第9回cocos2d-x勉強会での発表資料 https://atnd.org/events/61374
Read more
N
nyagasuki
Follow
Recommended
C++ マルチスレッドプログラミング by
C++ マルチスレッドプログラミング
Kohsuke Yuasa
107.6K views
•
97 slides
2017年11月02日「radare2」トーク/ワークショップAVTokyo 2017 by
2017年11月02日「radare2」トーク/ワークショップAVTokyo 2017
unixfreaxjp
2.5K views
•
41 slides
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで by
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
Shuichi Tsutsumi
197.4K views
•
91 slides
卒論執筆・スライド作成のポイント by
卒論執筆・スライド作成のポイント
Tsubasa Hirakawa
1.9K views
•
97 slides
「再代入なんて、あるわけない」 ~ふつうのプログラマが関数型言語を知るべき理由~ (Gunma.web #5 2011/05/14) by
「再代入なんて、あるわけない」 ~ふつうのプログラマが関数型言語を知るべき理由~ (Gunma.web #5 2011/05/14)
parrotstudio
15.3K views
•
56 slides
まじめに!できる!LT by
まじめに!できる!LT
Akabane Hiroyuki
16.9K views
•
22 slides
More Related Content
What's hot
最近のやられアプリを試してみた by
最近のやられアプリを試してみた
zaki4649
24.5K views
•
16 slides
徳丸本ができるまで by
徳丸本ができるまで
Hiroshi Tokumaru
4.9K views
•
47 slides
イマドキC++erのモテカワリソース管理術 by
イマドキC++erのモテカワリソース管理術
Kohsuke Yuasa
10.6K views
•
114 slides
初心者向けCTFのWeb分野の強化法 by
初心者向けCTFのWeb分野の強化法
kazkiti
15.8K views
•
38 slides
エンジニアから飛んでくるマサカリを受け止める心得 by
エンジニアから飛んでくるマサカリを受け止める心得
Reimi Kuramochi Chiba
64.4K views
•
24 slides
現場で役立つシステム設計の原則 by
現場で役立つシステム設計の原則
増田 亨
6.3K views
•
21 slides
What's hot
(20)
最近のやられアプリを試してみた by zaki4649
最近のやられアプリを試してみた
zaki4649
•
24.5K views
徳丸本ができるまで by Hiroshi Tokumaru
徳丸本ができるまで
Hiroshi Tokumaru
•
4.9K views
イマドキC++erのモテカワリソース管理術 by Kohsuke Yuasa
イマドキC++erのモテカワリソース管理術
Kohsuke Yuasa
•
10.6K views
初心者向けCTFのWeb分野の強化法 by kazkiti
初心者向けCTFのWeb分野の強化法
kazkiti
•
15.8K views
エンジニアから飛んでくるマサカリを受け止める心得 by Reimi Kuramochi Chiba
エンジニアから飛んでくるマサカリを受け止める心得
Reimi Kuramochi Chiba
•
64.4K views
現場で役立つシステム設計の原則 by 増田 亨
現場で役立つシステム設計の原則
増田 亨
•
6.3K views
Modeling in the Agile Age - JP by Kenji Hiranabe
Modeling in the Agile Age - JP
Kenji Hiranabe
•
20.5K views
継承やめろマジやめろ。 なぜイケないのか 解説する by TaishiYamada1
継承やめろマジやめろ。 なぜイケないのか 解説する
TaishiYamada1
•
771 views
enterprise agile lean modeling by Kenji Hiranabe
enterprise agile lean modeling
Kenji Hiranabe
•
22.6K views
Streamlitを用いた音響信号処理ダッシュボードの開発 by Hiromasa Ohashi
Streamlitを用いた音響信号処理ダッシュボードの開発
Hiromasa Ohashi
•
869 views
個の育成と知的創造する組織 by Satol Skg
個の育成と知的創造する組織
Satol Skg
•
381 views
これから始めるSpringのwebアプリケーション by 土岐 孝平
これから始めるSpringのwebアプリケーション
土岐 孝平
•
19.2K views
老害について by Ken SASAKI
老害について
Ken SASAKI
•
86.6K views
Ansible troubleshooting 101_202007 by Hideki Saito
Ansible troubleshooting 101_202007
Hideki Saito
•
10K views
[DL輪読会]Learning Transferable Visual Models From Natural Language Supervision by Deep Learning JP
[DL輪読会]Learning Transferable Visual Models From Natural Language Supervision
Deep Learning JP
•
46.1K views
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive by Tokoroten Nakayama
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
Tokoroten Nakayama
•
122.2K views
async/await不要論 by bleis tift
async/await不要論
bleis tift
•
29K views
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week by Mignon Style
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
Mignon Style
•
10.4K views
20181112 SRE本輪読会#26_22章_カスケード障害 by harutsugu shimoji
20181112 SRE本輪読会#26_22章_カスケード障害
harutsugu shimoji
•
484 views
OSを手作りするという趣味と仕事 by uchan_nos
OSを手作りするという趣味と仕事
uchan_nos
•
1.2K views
Viewers also liked
シェーダーしよっ☆ Let's play shaders! by
シェーダーしよっ☆ Let's play shaders!
Yuichi Higuchi
19.5K views
•
66 slides
Cocos2d-x x iBeacon Bluetoothを使ったゲームを作ろう by
Cocos2d-x x iBeacon Bluetoothを使ったゲームを作ろう
Tomoo Kaku
5.5K views
•
22 slides
Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから by
Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから
Akihiro Matsuura
17.7K views
•
60 slides
[学内勉強会]C++11とdirectxライブラリ by
[学内勉強会]C++11とdirectxライブラリ
Shota Homma
10.6K views
•
83 slides
ゲームオブジェクトの管理 by
ゲームオブジェクトの管理
Shota Homma
7.4K views
•
55 slides
AndroidにおけるCocos2d-x製ゲームの画面の録画 by
AndroidにおけるCocos2d-x製ゲームの画面の録画
gomachan_7
4.4K views
•
18 slides
Viewers also liked
(20)
シェーダーしよっ☆ Let's play shaders! by Yuichi Higuchi
シェーダーしよっ☆ Let's play shaders!
Yuichi Higuchi
•
19.5K views
Cocos2d-x x iBeacon Bluetoothを使ったゲームを作ろう by Tomoo Kaku
Cocos2d-x x iBeacon Bluetoothを使ったゲームを作ろう
Tomoo Kaku
•
5.5K views
Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから by Akihiro Matsuura
Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから
Akihiro Matsuura
•
17.7K views
[学内勉強会]C++11とdirectxライブラリ by Shota Homma
[学内勉強会]C++11とdirectxライブラリ
Shota Homma
•
10.6K views
ゲームオブジェクトの管理 by Shota Homma
ゲームオブジェクトの管理
Shota Homma
•
7.4K views
AndroidにおけるCocos2d-x製ゲームの画面の録画 by gomachan_7
AndroidにおけるCocos2d-x製ゲームの画面の録画
gomachan_7
•
4.4K views
3D勉強会 第1回 3Dプログラミングのススメ by infinite_loop
3D勉強会 第1回 3Dプログラミングのススメ
infinite_loop
•
26K views
DeNA流cocos2d xとの付き合い方 by dena_study
DeNA流cocos2d xとの付き合い方
dena_study
•
18.1K views
ゲーム開発とデザインパターン by Takashi Komada
ゲーム開発とデザインパターン
Takashi Komada
•
24.8K views
3D描画基礎知識 by AimingStudy
3D描画基礎知識
AimingStudy
•
19.3K views
Extending Ajax Events for all mankind by Kyle Simpson
Extending Ajax Events for all mankind
Kyle Simpson
•
2.1K views
Universal Image Loader: Story, Architecture, FAQ by Sergey Tarasevich
Universal Image Loader: Story, Architecture, FAQ
Sergey Tarasevich
•
1.4K views
Q3 2013 ASSA ABLOY investors presentation 28 october by ASSA ABLOY
Q3 2013 ASSA ABLOY investors presentation 28 october
ASSA ABLOY
•
778 views
Irfan e-mazhab-o-maslak-by-allama-yasin-akhthar-misbahi by Other
Irfan e-mazhab-o-maslak-by-allama-yasin-akhthar-misbahi
Other
•
1.9K views
Microsoft Wpf Silverlight Comparison Whitepaper V1 1 by guest91fb2a
Microsoft Wpf Silverlight Comparison Whitepaper V1 1
guest91fb2a
•
2.6K views
What Do You Want To Order by Vinicius Luciano Menezes Cotrim
What Do You Want To Order
Vinicius Luciano Menezes Cotrim
•
3.5K views
Kewirausahaan by heldamayasari
Kewirausahaan
heldamayasari
•
947 views
Communication in business life by Filip Buček
Communication in business life
Filip Buček
•
596 views
Asat book0-fresh blood by Ashraf Ali
Asat book0-fresh blood
Ashraf Ali
•
621 views
Lobel LED Leaflet - New launching of LED Products in this Diwali. by L'Obel Solar Power System
Lobel LED Leaflet - New launching of LED Products in this Diwali.
L'Obel Solar Power System
•
1.3K views
Similar to 【TechBuzz】第9回cocos2d-x勉強会「シェーダ書いてますか?」
Shadow gunのサンプルから学べるモバイル最適化 by
Shadow gunのサンプルから学べるモバイル最適化
Katsutoshi Makino
13.6K views
•
70 slides
Cocos2d x-sprite3d by
Cocos2d x-sprite3d
aktsk
4.7K views
•
31 slides
coma Creators session vol.2 by
coma Creators session vol.2
Atsushi Tadokoro
4.6K views
•
88 slides
怪しいWindowsプログラミング by
怪しいWindowsプログラミング
nagoya313
3.5K views
•
42 slides
Dive into RTS - another side by
Dive into RTS - another side
Kiwamu Okabe
1.4K views
•
50 slides
Rのデータ構造とメモリ管理 by
Rのデータ構造とメモリ管理
Takeshi Arabiki
15.2K views
•
22 slides
Similar to 【TechBuzz】第9回cocos2d-x勉強会「シェーダ書いてますか?」
(20)
Shadow gunのサンプルから学べるモバイル最適化 by Katsutoshi Makino
Shadow gunのサンプルから学べるモバイル最適化
Katsutoshi Makino
•
13.6K views
Cocos2d x-sprite3d by aktsk
Cocos2d x-sprite3d
aktsk
•
4.7K views
coma Creators session vol.2 by Atsushi Tadokoro
coma Creators session vol.2
Atsushi Tadokoro
•
4.6K views
怪しいWindowsプログラミング by nagoya313
怪しいWindowsプログラミング
nagoya313
•
3.5K views
Dive into RTS - another side by Kiwamu Okabe
Dive into RTS - another side
Kiwamu Okabe
•
1.4K views
Rのデータ構造とメモリ管理 by Takeshi Arabiki
Rのデータ構造とメモリ管理
Takeshi Arabiki
•
15.2K views
HaskellではじめるCortex-M3組込みプログラミング by Kiwamu Okabe
HaskellではじめるCortex-M3組込みプログラミング
Kiwamu Okabe
•
2.8K views
コンピューティングとJava~なにわTECH道 by なおき きしだ
コンピューティングとJava~なにわTECH道
なおき きしだ
•
2.1K views
mbedではじめる組み込みHaskellプログラミング by Kiwamu Okabe
mbedではじめる組み込みHaskellプログラミング
Kiwamu Okabe
•
4K views
20141129-dotNet2015 by Takayoshi Tanaka
20141129-dotNet2015
Takayoshi Tanaka
•
13.2K views
Dsl&Builder by Uehara Junji
Dsl&Builder
Uehara Junji
•
1.3K views
これからのコンピューティングとJava(Hacker Tackle) by なおき きしだ
これからのコンピューティングとJava(Hacker Tackle)
なおき きしだ
•
4.7K views
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう by AdvancedTechNight
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
AdvancedTechNight
•
5.4K views
Android OpenGL HandsOn by Ikuo Tansho
Android OpenGL HandsOn
Ikuo Tansho
•
2.1K views
㊱タイルマップに挑戦 by Nishida Kansuke
㊱タイルマップに挑戦
Nishida Kansuke
•
8.9K views
ホームディレクトリに埋もれた便利なコードをさがせ! by Yohei Fushii
ホームディレクトリに埋もれた便利なコードをさがせ!
Yohei Fushii
•
27.6K views
GPUが100倍速いという神話をぶち殺せたらいいな ver.2013 by Ryo Sakamoto
GPUが100倍速いという神話をぶち殺せたらいいな ver.2013
Ryo Sakamoto
•
8.8K views
Core Graphicsでつくる自作UIコンポーネント入門 by cocopon
Core Graphicsでつくる自作UIコンポーネント入門
cocopon
•
9.6K views
EWD 3トレーニングコース#19 JavaScriptからGlobalストレジにアクセスする by Kiyoshi Sawada
EWD 3トレーニングコース#19 JavaScriptからGlobalストレジにアクセスする
Kiyoshi Sawada
•
101 views
Boost.SIMD by Akira Takahashi
Boost.SIMD
Akira Takahashi
•
4.6K views
【TechBuzz】第9回cocos2d-x勉強会「シェーダ書いてますか?」
1.
シェーダ 書いてますか? 2015/01/27(Tue) Ryo Tsuruda
2.
Agenda ● 自己紹介 ● 本日の目的 ●
シェーダとは ● シェーダを見てみる ● シェーダを書いてみる ● まとめ
3.
自己紹介
4.
自己紹介 ● 名前:りょう ● 趣味:猫とプログラミング ●
仕事:ゲーム作り ○ 今まではサーバ、インフラ、ネイティブアプリなど ※今回の内容は、仕事とは関係なく趣味での発表です
5.
本日の目的
6.
本日の目的 ● シェーダとは何か?を知る ● Cocos2d-xでシェーダを書けるようになる ●
シェーダの仕組みの理解 やらないこと
7.
注意事項 ● シェーダのプロではないので、質問など答えら れない場合もあります ● Android/iOSで動作させるための
OpenGL ES のプログラマブルシェーダついての説明です ● Cocos2d-x v3.xでのみ動作確認しています
8.
シェーダとは
9.
シェーダとは ● GPUに命令して処理させるもの ● スクリーンに表示させる色を制御するもの 床井研究室 http://marina.sys.wakayama-u.ac.jp/~tokoi/?date=20090827
10.
シェーダとは 書いたことがある方?
11.
シェーダの例 ● トゥーンシェーダ ● ファーシェーダ ●
他多数
12.
シェーダの例 (cont.)
13.
シェーダの例 (cont.) !?
14.
シェーダの言語 ● シェーダを書くために必要な言語 ○ GLSL(OpenGL
Shading Language) ○ GLSL ES (OpenGL for Embedded System) ● 他には、 ○ DirectX : HLSL(High Level Shading Language) ○ NVIDIA : Cg ○ iOS : Metal Shading Language
15.
シェーダの言語 ● Cocos2d-xではどの言語を使っていますか? ○ C++
? ○ Lua ? ○ JavaScript ? ● どのbindingからも利用できます
16.
シェーダの処理の流れ 1. ノードを作成 (Sprite::create()) 2.
バーテックスシェーダ(Vertex Shader) ○ 頂点シェーダとも 3. フラグメントシェーダ(Fragment Shader) ○ ピクセルシェーダとも 4. 画面に表示 複数のシェーダで 処理
17.
シェーダを見てみる
18.
バーテックスシェーダ(Sprite) const char* ccPositionTextureColor_noMVP_vert
= STRINGIFY( attribute vec4 a_position; attribute vec2 a_texCoord; attribute vec4 a_color; n#ifdef GL_ESn varying lowp vec4 v_fragmentColor; varying mediump vec2 v_texCoord; n#elsen varying vec4 v_fragmentColor; varying vec2 v_texCoord; n#endifn void main() { gl_Position = CC_PMatrix * a_position; v_fragmentColor = a_color; v_texCoord = a_texCoord; } ); ccShader_PositionTextureColor_noMVP.vert
19.
フラグメントシェーダ(Sprite) const char* ccPositionTextureColor_noMVP_frag
= STRINGIFY( n#ifdef GL_ESn precision lowp float; n#endifn varying vec4 v_fragmentColor; varying vec2 v_texCoord; void main() { gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord); } ); ccShader_PositionTextureColor_noMVP.frag
20.
バーテックスシェーダ(解説) attribute vec4 a_position; attribute
vec2 a_texCoord; attribute vec4 a_color; varying lowp vec4 v_fragmentColor; varying mediump vec2 v_texCoord; void main() { gl_Position = CC_PMatrix * a_position; v_fragmentColor = a_color; v_texCoord = a_texCoord; } attribute Cocos2d-xからバーテックスシェーダに渡される値 vec4 a_position 頂点情報 (Cocos2d-xでbindingしている変数) vec2 a_texCoord テクスチャのマッピング情報 (Cocos2d-xでbindingしている変数) vec4 a_color 色情報 (Cocos2d-xでbindingしている変数)
21.
バーテックスシェーダ(解説) attribute vec4 a_position; attribute
vec2 a_texCoord; attribute vec4 a_color; varying lowp vec4 v_fragmentColor; varying mediump vec2 v_texCoord; void main() { gl_Position = CC_PMatrix * a_position; v_fragmentColor = a_color; v_texCoord = a_texCoord; } varying フラグメントシェーダに渡すための値 lopw / mediump 値の精度(floatとかdoubleと同じ) vec4 v_fragmentColor 色情報 vec4 v_texCoord テクスチャの情報
22.
バーテックスシェーダ(解説) attribute vec4 a_position; attribute
vec2 a_texCoord; attribute vec4 a_color; varying lowp vec4 v_fragmentColor; varying mediump vec2 v_texCoord; void main() { gl_Position = CC_PMatrix * a_position; v_fragmentColor = a_color; v_texCoord = a_texCoord; } main() 最初に呼ばれる関数 gl_Position OpenGLで処理するポジション情報 CC_PMatrix 座標情報を調整するための変数 (Cocos2d-xでbindingしている変数)
23.
フラグメントシェーダ(解説) precision lowp float; varying
vec4 v_fragmentColor; varying vec2 v_texCoord; void main() { gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord); } precision 精度の定義
24.
フラグメントシェーダ(解説) precision lowp float; varying
vec4 v_fragmentColor; varying vec2 v_texCoord; void main() { gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord); } varying フラグメントシェーダから渡される値 vec4 v_fragmentColor 色情報 vec4 v_texCoord テクスチャの情報
25.
フラグメントシェーダ(解説) precision lowp float; varying
vec4 v_fragmentColor; varying vec2 v_texCoord; void main() { gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord); } main() 最初に呼ばれる関数 gl_FragColor OpenGLで処理する色情報 CC_Texture0 テクスチャの情報(Cocos2d-xでbindingしている変数) texture2D() テクスチャから指定座標の色情報を抜き出す
26.
Cocos2d-xで定義されている変数 // uniform names const
char* GLProgram::UNIFORM_NAME_AMBIENT_COLOR = "CC_AmbientColor"; const char* GLProgram::UNIFORM_NAME_P_MATRIX = "CC_PMatrix"; const char* GLProgram::UNIFORM_NAME_MV_MATRIX = "CC_MVMatrix"; const char* GLProgram::UNIFORM_NAME_MVP_MATRIX = "CC_MVPMatrix"; const char* GLProgram::UNIFORM_NAME_NORMAL_MATRIX = "CC_NormalMatrix"; const char* GLProgram::UNIFORM_NAME_TIME = "CC_Time"; const char* GLProgram::UNIFORM_NAME_SIN_TIME = "CC_SinTime"; const char* GLProgram::UNIFORM_NAME_COS_TIME = "CC_CosTime"; const char* GLProgram::UNIFORM_NAME_RANDOM01 = "CC_Random01"; const char* GLProgram::UNIFORM_NAME_SAMPLER0 = "CC_Texture0"; const char* GLProgram::UNIFORM_NAME_SAMPLER1 = "CC_Texture1"; const char* GLProgram::UNIFORM_NAME_SAMPLER2 = "CC_Texture2"; const char* GLProgram::UNIFORM_NAME_SAMPLER3 = "CC_Texture3"; const char* GLProgram::UNIFORM_NAME_ALPHA_TEST_VALUE = "CC_alpha_value"; // Attribute names const char* GLProgram::ATTRIBUTE_NAME_COLOR = "a_color"; const char* GLProgram::ATTRIBUTE_NAME_POSITION = "a_position"; const char* GLProgram::ATTRIBUTE_NAME_TEX_COORD = "a_texCoord"; const char* GLProgram::ATTRIBUTE_NAME_TEX_COORD1 = "a_texCoord1"; const char* GLProgram::ATTRIBUTE_NAME_TEX_COORD2 = "a_texCoord2"; const char* GLProgram::ATTRIBUTE_NAME_TEX_COORD3 = "a_texCoord3"; const char* GLProgram::ATTRIBUTE_NAME_NORMAL = "a_normal"; const char* GLProgram::ATTRIBUTE_NAME_BLEND_WEIGHT = "a_blendWeight"; const char* GLProgram::ATTRIBUTE_NAME_BLEND_INDEX = "a_blendIndex";
27.
シェーダを書いてみる
28.
真っ赤にしてみる attribute vec4 a_position; attribute
vec2 a_texCoord; attribute vec4 a_color; varying lowp vec4 v_fragmentColor; varying mediump vec2 v_texCoord; void main() { gl_Position = CC_PMatrix * a_position; - v_fragmentColor = a_color; + v_fragmentColor = vec4(1.0, 0.0, 0.0, 1.0); v_texCoord = a_texCoord; } バーテックスシェーダ
29.
?確かに赤いけど、真っ赤ではない
30.
バーテックスシェーダの役割 ● 頂点を決める ○ ポリゴンの頂点をどの位置に表示するか ○
表示する色を決めるのはフラグメントシェーダ void main() { gl_Position = CC_PMatrix * a_position; - v_fragmentColor = a_color; + v_fragmentColor = vec4(1.0, 0.0, 0.0, 1.0); v_texCoord = a_texCoord; } フラグメントシェーダに色情報を渡 しているだけ
31.
次こそ、真っ赤にしてみる precision lowp float; varying
vec4 v_fragmentColor; varying vec2 v_texCoord; void main() { - gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord); + gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } 表示される色を赤色に変更 (他の色情報は破棄)
32.
真っ赤になった シェーダが違う
33.
次はどうなるでしょうか? precision lowp float; varying
vec4 v_fragmentColor; varying vec2 v_texCoord; void main() { - gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord); + gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, vec2(v_texCoord.x/2.0, v_texCoord.y); } テクスチャから抽出する座標を変更
34.
見た目が半分なった
35.
シェーダの書き方 ● とにかく試行錯誤 ○ コンパイルエラーを出してくれる ○
型には厳密 ● 感覚 ○ 少しの調整で大きく変わることもある cocos2d: ERROR: 0:21: No matching function for call to texture2D(sampler2D, float) ERROR: 0:21: '/' does not operate on 'float' and 'int'
36.
シェーダの書き方 (cont.) ● 動的コンパイル ○
アプリのビルド時ではなく、実行時にコンパイル ○ コンパイルしたデータはキャッシュすること ○ リソースではなく、文字列としてコードに埋める ■ I/O待ちが発生するためCocos2d-xはこうしている ● デバッグ難しい ○ 実行して、コンパイルエラーをチェックしている ○ WebGLを試せるWebサービスなどで動作チェック ○ http://glslsandbox.com ● 実機で確認 ○ GPUを使っているので、実機での確認必須
37.
自作シェーダの適用 // スプライトの作成 auto sprite
= Sprite::create("HelloWorld.png"); this->addChild(sprite); // シェーダの読込みと適用 auto glProgram = GLProgram::createWithFilenames("shader.vert", "shader.frag"); auto glProgramState = GLProgramState::getOrCreateWithGLProgram(glProgram); sprite->setGLProgramState(glProgramState); // uniformに値を代入 glProgramState->setUniformVec2("touchPosition", touchPosition); uniform プログラムからバーテックスシェーダやフラグメントシェーダに渡される値
38.
グレイスケール(vert) attribute vec4 a_position; attribute
vec4 a_color; attribute vec2 a_texCoord; varying lowp vec4 v_fragmentColor; varying mediump vec2 v_texCoord; void main(void) { gl_Position = CC_PMatrix * a_position; v_fragmentColor = a_color; v_texCoord = a_texCoord; }
39.
グレイスケール(frag) precision lowp float; varying
vec4 v_fragmentColor; varying vec2 v_texCoord; // Gray scale(RGB) const vec3 grayScale = vec3(0.298912, 0.586611, 0.114478); void main(void) { vec4 color = texture2D(CC_Texture0, v_texCoord); float grayScaleColor = dot(color.rgb, grayScale); gl_FragColor = vec4(vec3(grayScaleColor), color.a); }
40.
グレイスケール
41.
ブラー(vert) varying vec2 v_texCoord; varying
vec2 v_blurTexCoords[14]; uniform float u_rate; void main() { gl_Position = CC_PMatrix * a_position; v_texCoord = a_texCoord; v_blurTexCoords[ 0] = v_texCoord + vec2(-0.028 * u_rate, 0.0); v_blurTexCoords[ 1] = v_texCoord + vec2(-0.024 * u_rate, 0.0); v_blurTexCoords[ 2] = v_texCoord + vec2(-0.020 * u_rate, 0.0); v_blurTexCoords[ 3] = v_texCoord + vec2(-0.016 * u_rate, 0.0); v_blurTexCoords[ 4] = v_texCoord + vec2(-0.012 * u_rate, 0.0); v_blurTexCoords[ 5] = v_texCoord + vec2(-0.008 * u_rate, 0.0); v_blurTexCoords[ 6] = v_texCoord + vec2(-0.004 * u_rate, 0.0); v_blurTexCoords[ 7] = v_texCoord + vec2( 0.004 * u_rate, 0.0); v_blurTexCoords[ 8] = v_texCoord + vec2( 0.008 * u_rate, 0.0); v_blurTexCoords[ 9] = v_texCoord + vec2( 0.012 * u_rate, 0.0); v_blurTexCoords[10] = v_texCoord + vec2( 0.016 * u_rate, 0.0); v_blurTexCoords[11] = v_texCoord + vec2( 0.020 * u_rate, 0.0); v_blurTexCoords[12] = v_texCoord + vec2( 0.024 * u_rate, 0.0); v_blurTexCoords[13] = v_texCoord + vec2( 0.028 * u_rate, 0.0); }
42.
ブラー(frag) varying vec2 v_texCoord; varying
vec2 v_blurTexCoords[14]; void main() { gl_FragColor = vec4(0.0); gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[ 0])*0. 0044299121055113265; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[ 1])*0.00895781211794; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[ 2])*0.0215963866053; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[ 3])*0.0443683338718; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[ 4])*0.0776744219933; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[ 5])*0.115876621105; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[ 6])*0.147308056121; gl_FragColor += texture2D(CC_Texture0, v_texCoord )*0.159576912161; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[ 7])*0.147308056121; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[ 8])*0.115876621105; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[ 9])*0.0776744219933; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[10])*0.0443683338718; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[11])*0.0215963866053; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[12])*0.00895781211794; gl_FragColor += texture2D(CC_Texture0, v_blurTexCoords[13])*0. 0044299121055113265;
43.
ブラー
44.
ノイズ(vert) attribute vec4 a_position; attribute
vec4 a_color; attribute vec2 a_texCoord; #ifdef GL_ES varying lowp vec4 v_fragmentColor; varying mediump vec2 v_texCoord; #else varying vec4 v_fragmentColor; varying vec2 v_texCoord; #endif void main(void) { gl_Position = CC_PMatrix * a_position; v_fragmentColor = a_color; v_texCoord = a_texCoord; }
45.
ノイズ(frag) varying vec4 v_fragmentColor; varying
vec2 v_texCoord; uniform vec2 resolution; const float intensity = 0.05; vec3 noise(vec2 uv) { vec2 p = abs(sin(uv * 13.0 + uv.x * CC_Time[1] * sin(uv.y))); return vec3(sin (0.2 * CC_Time[1] + sin(p * 0.5) * CC_Time[1] / cos(50.0)) * 10.0,0.3+0.5 * abs(sin (CC_Time[1] * tan(5.0)))); } void main(void) { gl_FragColor.xyz = intensity * noise(gl_FragCoord.xy / sin(resolution.xy * CC_Time[1] * 0.01)) + (1. - intensity) * texture2D(CC_Texture0,v_texCoord.xy).xyz; gl_FragColor.w = 1.; }
46.
ノイズ
47.
旗(vert) attribute vec4 a_position; attribute
vec4 a_color; attribute vec2 a_texCoord; #ifdef GL_ES varying lowp vec4 v_fragmentColor; varying mediump vec2 v_texCoord; #else varying vec4 v_fragmentColor; varying vec2 v_texCoord; #endif void main(void) { gl_Position = CC_PMatrix * a_position; v_fragmentColor = a_color; v_texCoord = a_texCoord; }
48.
旗(frag) #ifdef GL_ES precision mediump
float; #endif varying vec2 v_texCoord; void main( void ) { float len = length(v_texCoord); vec2 uv = vec2(v_texCoord.x - (v_texCoord.x / len) * cos(len - CC_Time[1]) * 0.05, v_texCoord.y - (v_texCoord.y / len) * sin(len * 12.0 - CC_Time[1] * 7.0) * 0.05); gl_FragColor = texture2D(CC_Texture0, uv); }
49.
旗
50.
波(vert) attribute vec4 a_position; attribute
vec4 a_color; attribute vec2 a_texCoord; #ifdef GL_ES varying lowp vec4 v_fragmentColor; varying mediump vec2 v_texCoord; #else varying vec4 v_fragmentColor; varying vec2 v_texCoord; #endif void main(void) { gl_Position = CC_PMatrix * a_position; v_fragmentColor = a_color; v_texCoord = a_texCoord; }
51.
波(frag) #ifdef GL_ES precision highp
float; #endif uniform vec2 resolution; uniform vec2 touchPosition; varying vec2 v_texCoord; void main(void) { vec2 tc = v_texCoord; vec2 p = vec2(tc.x-touchPosition.x, tc.y-touchPosition.y); float len = length(p); vec2 uv = tc + (p / len) * cos(len * 14.0 - CC_Time[1] * 8.0) * 0.04; vec3 col = texture2D(CC_Texture0, uv).xyz; gl_FragColor = vec4(col, 1.0); }
52.
波
53.
GLES Sandboxより(vert) attribute vec4
a_position; attribute vec4 a_color; attribute vec2 a_texCoord; #ifdef GL_ES varying lowp vec4 v_fragmentColor; varying mediump vec2 v_texCoord; #else varying vec4 v_fragmentColor; varying vec2 v_texCoord; #endif void main(void) { gl_Position = CC_PMatrix * a_position; v_fragmentColor = a_color; v_texCoord = a_texCoord; }
54.
GLES Sandboxより(frag) http://glslsandbox.com/e#22390.2
55.
画像が別物に
56.
まとめ
57.
まとめ ● 次のステップに向けて ○ 今回は超基本なので、本格的なものは勉強が必要 ○
数学の知識が必要となることが多いです ● 差別化 ○ シェーダを自作すると、大きな差別化を図れる ○ コンソール出身の方が作るゲームには自作シェーダが 多いのではないでしょうか