素人のアンドロイドアプリ開発日記

opengl es2を勉強する。その4 shaderを使って、モノクロにする

2015.07.07

qiitaにおいて、一連のOpenGL ES2.0の知見をまとめましたので、もしよかったらそちらもご覧ください

AndroidでOpenGL ES2.0入門

 

 

今回はshaderをちょっと使ってみます。

前回までで、画像の表示ができましたが、shaderを使う事で色の変更が高速で実装できるので、一部では、ビデオ撮影とかに使う事で高速で処理ができたりします。

色を利用していたshaderは

public final String fragmentShaderCode =
        "precision mediump float;" +
                "varying vec2 v_texCoord;" +
                "uniform sampler2D s_texture;" +
                "void main() {" +
                "  gl_FragColor = texture2D( s_texture, v_texCoord );" +
                "}";

って今まで書いていましたが、ここを

public final String fragmentShaderCode =
        "precision mediump float;" +
                "varying vec2 v_texCoord;" +
                "uniform sampler2D s_texture;" +
                "void main() {" +
                "  gl_FragColor = texture2D( s_texture, v_texCoord );" +
                "float avg = 0.2126 * gl_FragColor.r + 0.7152 * gl_FragColor.g + 0.0722 * gl_FragColor.b;"+
                "  gl_FragColor = vec4( avg,avg,avg,1.0 );" +
                "}";

ってすると、モノクロにできます。

もともとは、texture2Dっていうので、色データとかを格納していた部分を、rgbの値を平均化して、再設定しています。gl_FragColorで色を扱っていたんだな。なんて、自分で作ってた部分でありながら実感しますね。

同じカテゴリの記事を紹介します

OpenGL ES2.0を使ってアプリを作りました。opengl es2を勉強する。その10 表示用にクラスを作る。opengl es2を勉強する。その9 shaderにマトリックスを用いるopengl es2を勉強する。その8 画像の明るさを変更するopengl es2を勉強する。その7 画像をぼかすopengl es2を勉強する。その6 画像のopacityを適用opengl es2を勉強する。その5 画像のアルファチャンネルopengl es2を勉強する。その3 画像を複数描くopengl es2を勉強する。その2 画像を描くopengl es2を勉強する。その1 三角形を書いて動かす。

カテゴリー:OpenGL es2

公開中のアプリ、是非ダウンロードしてみてください

2chまとめのたね

RSSを利用してさまざまなブログの情報をキュレーションしてくれるアプリ

インストールする

ひらがな戦記

OPENGL ES2 を利用したカルタのソーシャルゲーム

インストールする