簡単!opengl es 2.0フラグメントシェーダー
DESCRIPTION
第2回iPhone Dev勉強会で発表しました。iPhone, iPadでのOpenGL ES2.0のフラグメントシェーダーについての説明です。TRANSCRIPT
株式会社アイビス 神谷栄治
簡単!OpenGL ES 2.0フラグメントシェーダー
12年5月25日金曜日
自己紹介•株式会社アイビス (社員70名ほど)
• iPhone, iPad, Android, タブレット, Webシステムの受託開発など
•代表取締役社長 神谷栄治
•ハンドル:かみやん
• Twitter: @kamiyan
•自称、ハッカー社長 前回も言ってみたけど( ´Д`)y━・~~
12年5月25日金曜日
アプリの紹介
• ibisMail for iPad
•こちらも国内有料総合1位獲得。
• ibisPaint(アイビスペイント)
•こちらも国内有料総合1位獲得。
• ibisMail for iPhone(アイビスメール)
•世界初のメールアプリ。国内有料総合1位獲得。
3冠!!12年5月25日金曜日
前回iPhoneDev勉強会の反省
変態!変態!
ありがとうございます( ´Д`)y━・~~
皆様の声
12年5月25日金曜日
反省をふまえて•IBGLKit
• ibisPaintのWindow Tool KitはフルC++なので、別途OpenGLライブラリをObjective-Cで作りました。
•Fragment Shader Base•サンプルアプリとしてFragment Shader Baseというアプリを作りました。
夜中コツコツ作るのは楽しい( ´Д`)y━・~~
12年5月25日金曜日
•超高速! iPad(3rd Gen)なら4コア!
• GPUコアは年々増えていく(PCでは1000コア)
• CPUで200ms~400msかかる処理も1ms~2msでできる
• ibisPaintでは iPad (3rd Gen)、2048x1536(3.14Mpixels)で、レイヤー6枚で60fps!!
OpenGL ESのメリット(1)
12年5月25日金曜日
• Core GraphicsやCore Imageよりも低レベルライブラリ
• InstagramやiPhotoもES2.0を使っている
• AndroidやWindows、PS Suite、WebGLなど他のプラットフォームにも移植しやすい
OpenGL ESのメリット(2)
12年5月25日金曜日
•第1回iPhoneDev勉強会の私の発表では「難しい~」と言う声が聞かれた。
•反省をふまえ、説明はやめてみんなにフラグメントシェーダーを書いてもらおう!
• iPhoneアプリ上でシェーダー言語でコードを書いて、コンパイルして、リンクして、実行できれば誰でも体験できるよね?
Fragment Shader Baseとは
僕もベットの中でもコード書けるし( ´Д`)y━・~~12年5月25日金曜日
Fragment Shader Baseデモ中•ライブコーディング中~
• Instagramのようなカメラフィルタアプリをイメージ
• iPhone, iPad両対応 ユニバーサルアプリ
•ソースは、 http://bit.ly/JYgGTH
• ( http://kamiyan.la.coocan.jp/iPhone/FragmentShaderBase001.zip )
12年5月25日金曜日
ライブコーディング(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日金曜日
ライブコーディング(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日金曜日
ライブコーディング(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日金曜日
ライブコーディング(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日金曜日
ライブコーディング(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日金曜日
まとめ(1)
• Fragment Shader BaseアプリがあればiPhoneだけでコーディングができる!
• Fragment Shader Baseアプリで、自由度の高さと高速さが分かる。
•シェーダ言語のビルドと実行がスピーディに出来る。
• varying変数、uniform変数、gl_FragColor変数、vec2型、vec4型、texture2D(), sin(), cos(), min(), mix(), dot()など
12年5月25日金曜日
まとめ(2)
• ibisPaintは60fpsで動いている。60fpsを死守せよ!
•プログラミングの醍醐味は高速化!たまんねぇ~
( ´Д`)y━・~~
• ibisPaint Xは無料でiPhone / iPadのユニバーサルアプリ
ダウンロードしてね~ ( ´Д`)y━・~~
あとでShideShareに上げておきます。
ご清聴ありがとございました。12年5月25日金曜日