<< i監視装置 ver2.0 をリリース | main | Play framework 2.0のWebアプリ動作環境 >>

キラキラシールカメラのキラキラ実装方法

 キラキラシールカメラでは、マスク作成(ペイント)画面とシール画面にOpenGLを使っています。特にシール画面は、OpenGL ES2.0のフラグメントシェーダが無いと実現できていません。

プリズム部分のテクスチャは次の2枚です。1枚目がメインで、2枚目が色のルックアップテーブルの役割になります。
  

で、フラグメントシェーダはこんな感じです。
// texture0:テクスチャ1
// texture1:テクスチャ2
// rotate:回転値(0.0〜1.0)
void main() {
    vec4 tex0 = texture2D(texture0, v_texCoord);
    float y = tex0[0] + rotate;
    if (y > 1.0) {
        y -= 1.0;
    }
    gl_FragColor = texture2D(texture1, vec2(rotate, y));
}

端末の傾きに合わせて"rotate"を変えると、プリズムシールのようにキラキラした表現になります。実際の画面では少しずつ"rotate"を変えながら16枚描画しています。ホログラム画像も大体同じような考え方で実装しています。

今までES1.1を使っていたせいかシェーダという言葉に拒否反応があったのですが、触ってみると意外に簡単でUnityを触っているのと同じような面白さがありました。

コメント
コメントする









この記事のトラックバックURL
トラックバック
calendar
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< September 2018 >>
selected entries
categories
archives
recent comment
others
mobile
qrcode