第２回iPhone Dev勉強会で発表しました。iPhone, iPadでのOpenGL ES2.0のフラグメントシェーダーについての説明です。

1. 簡単!OpenGL ES 2.0
フラグメントシェーダー
株式会社アイビス 神谷栄治
12年5月25日金曜日

2. 自己紹介
• 株式会社アイビス (社員70名ほど)
• iPhone, iPad, Android, タブレット, Webシステムの受託開発など
• 代表取締役社長 神谷栄治
• ハンドル：かみやん
• Twitter： @kamiyan
• 自称、ハッカー社長 前回も言って
みたけど( ´Д`)y━･~~
12年5月25日金曜日

3. アプリの紹介
• ibisMail for iPhone（アイビスメール）
• 世界初のメールアプリ。国内有料総合１位獲
得。
• ibisMail for iPad
• こちらも国内有料総合１位獲得。
• ibisPaint（アイビスペイント）
• こちらも国内有料総合１位獲得。
3冠!!
12年5月25日金曜日

4. 前回iPhoneDev勉強会の反省
皆様の声
変態！変態！
ありがとうございます( ´Д`)y━･~~
12年5月25日金曜日

5. 反省をふまえて
•IBGLKit
• ibisPaintのWindow Tool
KitはフルC++なので、別途
OpenGLライブラリをObjective-Cで作りました。
•Fragment Shader Base
• サンプルアプリとしてFragment Shader Baseというアプ
リを作りました。
夜中コツコツ作るのは楽しい( ´Д`)y━･~~
12年5月25日金曜日

6. OpenGL ESのメリット(1)
• 超高速！ iPad(3rd Gen)なら4コア！
• GPUコアは年々増えていく（PCでは1000コア）
• CPUで200ms∼400msかかる処理も1ms∼2msでできる
• ibisPaintでは iPad (3rd Gen)、2048x1536(3.14Mpixels)で、
レイヤー6枚で60fps！！
12年5月25日金曜日

7. OpenGL ESのメリット(2)
• Core GraphicsやCore Imageよりも低レベルライブラリ
• InstagramやiPhotoもES2.0を使っている
• AndroidやWindows、PS Suite、WebGLなど他のプラット
フォームにも移植しやすい
12年5月25日金曜日

8. Fragment Shader Baseとは
• 第１回iPhoneDev勉強会の私の発表では「難しい∼」と
言う声が聞かれた。
• 反省をふまえ、説明はやめてみんなにフラグメント
シェーダーを書いてもらおう！
• iPhoneアプリ上でシェーダー言語でコードを書いて、コ
ンパイルして、リンクして、実行できれば誰でも体験
できるよね？
僕もベットの中でもコード書けるし( ´Д`)y━･~~
12年5月25日金曜日

9. Fragment Shader Baseデモ中
• ライブコーディング中∼
• Instagramのようなカメラフィルタアプリをイメージ
• iPhone, iPad両対応 ユニバーサルアプリ
• ソースは、 http://bit.ly/JYgGTH
• ( http://kamiyan.la.coocan.jp/iPhone/FragmentShaderBase001.zip )
12年5月25日金曜日

10. ライブコーディング(1)
//赤
gl_FragColor = vec4(1,0,0,1);
//フェードインアウト黒
gl_FragColor = vec4(0,0,0,u_alpha);
//色相
gl_FragColor = u_color;
//テクスチャ座標x
float v = v_texCoord.x;
gl_FragColor = vec4(v,v,v,1);
//テクスチャ座標y
float v = v_texCoord.y;
gl_FragColor = vec4(v,v,v,1);
//テクスチャ座標を足す
float v = (v_texCoord.x + v_texCoord.y) / 2.0;
gl_FragColor = vec4(v,v,v,1);
12年5月25日金曜日

11. ライブコーディング(2)
//テクスチャ座標を足す（オーバーフロー）
float v = v_texCoord.x + v_texCoord.y;
gl_FragColor = vec4(v,v,v,1);
//テクスチャ座標でsin()
float v = sin(v_texCoord.x * 3.14);
gl_FragColor = vec4(v,v,v,1);
//テクスチャ座標xyで乗算（ぼんやり）
float v = sin(v_texCoord.x * 3.14) * sin(v_texCoord.y * 3.14);
gl_FragColor = vec4(v,v,v,1);
//テクスチャ座標yの高周波数
float v2 = sin(v_texCoord.y * 314.0)*0.2+0.8;
gl_FragColor = vec4(v2,v2,v2,1);
//テクスチャの表示
gl_FragColor =texture2D(u_texture, v_texCoord);
//テクスチャの繰り返し
gl_FragColor =texture2D(u_texture, v_texCoord * 2.0);
12年5月25日金曜日

12. ライブコーディング(3)
//テクスチャの位相ずらし
gl_FragColor =texture2D(u_texture, v_texCoord + vec2(0.5,0.5));
//テクスチャのフェードインアウト
gl_FragColor =texture2D(u_texture, v_texCoord) * u_alpha;
//テクスチャに色を乗算
gl_FragColor =texture2D(u_texture, v_texCoord) * u_color;
//ぼんやり乗算
float v = sin(v_texCoord.x * 3.14) * sin(v_texCoord.y * 3.14);
gl_FragColor =texture2D(u_texture, v_texCoord) * v;
//ぼんやり乗算（強め）
float v = sin(v_texCoord.x * 3.14) * sin(v_texCoord.y * 3.14) * 2.0;
gl_FragColor =texture2D(u_texture, v_texCoord) * v;
//ぼんやり乗算（リミッタ）
float v = min(sin(v_texCoord.x * 3.14) * sin(v_texCoord.y * 3.14) * 5.0, 1.0);
gl_FragColor =texture2D(u_texture, v_texCoord) * v;
12年5月25日金曜日

13. ライブコーディング(4)
//ぼんやり乗算（縁黒）
float v = min(sin(v_texCoord.x * 3.14) * sin(v_texCoord.y * 3.14) * 5.0, 1.0);
vec4 col = vec4(v,v,v,1);
gl_FragColor =texture2D(u_texture, v_texCoord) * col;
//ぼんやり＋横縞
float v1 = min(sin(v_texCoord.x * 3.14) * sin(v_texCoord.y * 3.14) * 5.0, 1.0);
float v2 = sin(v_texCoord.y * 314.0) * 0.2 +0.8;
float v =v1*v2;
vec4 col = vec4(v,v,v,1);
gl_FragColor =texture2D(u_texture, v_texCoord) * col;
//グレースケール
vec4 col = texture2D(u_texture, v_texCoord);
float v = dot(col,vec4(0.3,0.6,0.1,0));
gl_FragColor =vec4(v,v,v,1);
//セピア
vec4 col = texture2D(u_texture, v_texCoord);
float v = dot(col,vec4(0.3,0.6,0.1,0);
gl_FragColor =vec4(v,v*0.87,v*0.75,1);
12年5月25日金曜日

14. ライブコーディング(5)
//カラー＋グレースケール
float v1 = sin(v_texCoord.x * 3.14) * sin(v_texCoord.y * 3.14);
vec4 col = texture2D(u_texture, v_texCoord);
float v = dot(col,vec4(0.3,0.6,0.1,0));
vec4 gray =vec4(v,v,v,1);
gl_FragColor = mix(gray, col, v1);
//カラー＋グレースケール（アニメーション）
float v1 = sin(v_texCoord.x * 3.14) * sin(v_texCoord.y * 3.14);
vec4 col = texture2D(u_texture, v_texCoord);
float v = dot(col,vec4(0.3,0.6,0.1,0));
vec4 gray =vec4(v,v,v,1);
gl_FragColor = mix(gray, col, u_alpha) * vec4(v1,v1,v1,1) ;
12年5月25日金曜日

15. まとめ(1)
• Fragment Shader BaseアプリがあればiPhoneだけでコー
ディングができる！
• Fragment Shader Baseアプリで、自由度の高さと高速さ
が分かる。
• シェーダ言語のビルドと実行がスピーディに出来る。
• varying変数、uniform変数、gl_FragColor変数、vec2型、
vec4型、texture2D(), sin(), cos(), min(), mix(), dot()など
12年5月25日金曜日

16. まとめ(2)
• ibisPaintは60fpsで動いている。60fpsを死守せよ！
• プログラミングの醍醐味は高速化！たまんねぇ∼
( ´Д`)y━･~~
• ibisPaint Xは無料でiPhone / iPadのユニバーサルアプリ
ダウンロードしてね∼ ( ´Д`)y━･~~
あとでShideShareに上げておきます。
ご清聴ありがとございました。
12年5月25日金曜日