簡単！OpenGL ES 2.0フラグメントシェーダー

株式会社アイビス 神谷栄治

簡単!OpenGL ES 2.0フラグメントシェーダー

12年5月25日金曜日

自己紹介•株式会社アイビス (社員70名ほど)

• iPhone, iPad, Android, タブレット, Webシステムの受託開発など

•代表取締役社長 神谷栄治

•ハンドル：かみやん

• Twitter： 　　 @kamiyan

•自称、ハッカー社長 前回も言ってみたけど( ´Д`)y━･~~

12年5月25日金曜日

アプリの紹介

• ibisMail for iPad

•こちらも国内有料総合１位獲得。

• ibisPaint（アイビスペイント）

•こちらも国内有料総合１位獲得。

• ibisMail for iPhone（アイビスメール）

•世界初のメールアプリ。国内有料総合１位獲得。

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日金曜日

•第１回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日金曜日