Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

19

Share

Download to read offline

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

Download to read offline

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

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

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

    Feb. 5, 2016
  • YoshioOkumura

    Oct. 30, 2015
  • shintaroiguchi

    Feb. 7, 2013
  • SONIC3D

    Feb. 3, 2013
  • takaonakaguchi

    Jan. 22, 2013
  • sharavsambuu

    Jan. 21, 2013
  • hirokazuk

    Jan. 20, 2013
  • comoc

    Dec. 14, 2012
  • kojiro_k

    Dec. 4, 2012
  • ShogoYano

    Nov. 13, 2012
  • soesin

    Oct. 21, 2012
  • denguridenguri

    Sep. 9, 2012
  • MsashiTamayama

    Jul. 26, 2012
  • sehm

    Jul. 2, 2012
  • TakeshiWatanabe2

    May. 28, 2012
  • msasabuchi

    May. 28, 2012
  • xionchannel

    May. 28, 2012
  • sma_so

    May. 28, 2012
  • suchi

    May. 28, 2012

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

Views

Total views

16,797

On Slideshare

0

From embeds

0

Number of embeds

183

Actions

Downloads

51

Shares

0

Comments

0

Likes

19

×