WebGLで画像を描画する(いろんなエフェクトをかけてみる

1 件のコメント
前回の続きですが、
gl.drawElementsとgl.drawArraysを使って画像を描画してエフェクトをかけちゃいます。
今回のサンプル画像も東京ドロンパです。

gl.drawElementsで色んなエフェクトをかける

下記サイトを参考にさせていただきました。
GLSLはこちらに記載しあるもので、時間経過と共にパラメータを更新し再描画している感じです。
http://ics-web.jp/lab/archives/5535

※ サンプルのために描画した下記サイトは、Google Chromeで閲覧下さい。
(Web Componentsやら使ってしまったので閲覧できる環境に制限が。。

・うずを巻く
http://experiment.itinao.net/webgl/blog/01_uzu_texture.html

・モザイク状態から徐々に鮮明になっていく
http://experiment.itinao.net/webgl/blog/02_mosaic_texture.html

・クレヨンで描いたようにボヤケている
http://experiment.itinao.net/webgl/blog/03_crayon_texture.html

・画像の色味が反転する
http://experiment.itinao.net/webgl/blog/04_reverse-color_texture.html

・画像の色が白黒になる
http://experiment.itinao.net/webgl/blog/05_sepia_texture.html

gl.drawArraysでエフェクトをつけてみる

下記を参考にさせていただきました。
こちらはスライドショーになってますが、下記のサンプルでは演出部分だけ抽出してみました。
肝は、canvasのcontext.getImageDataで色の情報を取得するとこです。

・画像がバラバラになったり、くっついたりする

以上です。
画像1つで、色んな見せ方ができるので面白い。。

1 件のコメント :