Skip to content

iPhoneでシェーダーをプログラムするっ!:ShaderEdit

慶応義塾大学大学院メディアデザイン研究科の近藤誠です。

今日はiPhoneでグラフィックプログラミングを勉強する方法を紹介したいと思います。

みなさんはiPhoneが大好きだと思います。何を隠そう、私も大好きです。

iPhone 3Gを購入したときの筆者(右)

この大好きなiPhoneで日常生活の30%くらいはなんとかできるのですが、いかんせん僕の日常生活の70%を占めるプログラミングにはiPhoneは全く使えないのが実に残念なところです。

実はiPhone4に搭載されているOpenGL ES2.0には、最新のプログラマブルシェーダーが使えるようになっています。

このシェーダーのコードは、実はランタイムでコンパイルするのです。

ということは、テキストエリアを実装して、それをOpenGL ES2.0に渡せば、勝手にコンパイルしてくれて、画面にリアルタイムに更新できる世界最小のモバイルシェーダープログラミング環境が構築できるというわけです。

このプログラム、私のポリシーに乗っ取って「ShaderEdit」という大変シンプルかつわかりやすい名前にしてみました。

使い方は簡単。

起動すると、カメラの画像が表示されます。

フォルダアイコンをタップすると、シェーダー編集画面になります。

フラグメントシェーダーのBGRAの順番を変えると・・・・

色合いが変わります。

みなさん、シェーダーのプログラミングってやったことありますか?

これ、普通のプログラムと違って、1ピクセルごとにけっこう複雑な計算ができるので、遊んでるとケッコーハマるんです。

私はもともとiアプリからプログラミングに入門したのですが、あの頃から考えると想像を絶するほどの処理能力が使えます。

さらに、タッチした座標や加速度センサーの値もシェーダーに渡すようにしているので、たとえば万華鏡のような効果をタッチや加速度を影響させることもできます。

さらに、一つ前のフレームのピクセル値と現在のフレームのピクセル値を比較すること、セルオートマトンを表現することができます。

暇つぶしにプチプチやってるだけでけっこう楽しめます。

試しにライフゲームを実装してみました。

前フレームのピクセル情報をもとに計算できるので、写真をソースとしたライフゲームが簡単に作れます。

これが入力画像だとすると、以下のようになります。

シェーダーのソースコードは以下


precision highp float;
precision highp int;
varying vec2 tex;

uniform sampler2D src;
uniform sampler2D fb;

uniform vec2 size;
uniform vec2 point;
uniform vec3 gravity;

void main(){
    vec2 t=tex.xy;
    int a= int(texture2D(fb,vec2(t.x+size.x,t.y)).r+0.5);
    a+= int(texture2D(fb,vec2(t.x+size.x,t.y+size.y)).r+0.5);
    a+=int(texture2D(fb,vec2(t.x,t.y+size.y)).r+0.5);
    a+=int(texture2D(fb,vec2(t.x-size.x,t.y+size.y)).r+0.5);
    a+=int(texture2D(fb,vec2(t.x-size.x,t.y)).r+0.5);
    a+=int(texture2D(fb,vec2(t.x-size.x,t.y-size.y)).r+0.5);
    a+=int(texture2D(fb,vec2(t.x,t.y-size.y)).r+0.5);
    a+=int(texture2D(fb,vec2(t.x+size.x,t.y-size.y)).r+0.5);

    int b=int(texture2D(fb,t).r+0.5);
    gl_FragColor=vec4(float(int(a==3)+int(a==2)*b));
}
文・近藤誠(慶應大学大学院)
このエントリーをはてなブックマークに追加
はてなブックマーク - iPhoneでシェーダーをプログラムするっ!:ShaderEdit
Post to Google Buzz
Share on GREE

No related posts.

Comments Closed