WebGLで画像を描画する(いろんなエフェクトをかけてみる
前回の続きですが、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つで、色んな見せ方ができるので面白い。。
登録:
コメントの投稿
(
Atom
)
0 件のコメント :
コメントを投稿