RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

シェーダーに入門して画像をかっこよく切り替える

three.jsで表現の幅を広げるにはシェーダーは避けて通れなさそうなので、入門してみました。

とりあえず以下の記事を読んでみました。年数的には古い記事ですが、大きく変わっていないとは思うので、そのまま参考にしました。

qiita.com

qiita.com

あとはこちらの連載の最初を読んでみました。これから全部読んでみようと思います。

qiita.com

シェーダーを描く時に出てくるGLSLというのは言語でOpenGL Shading Language の略です。頂点シェーダーと .vert 、ピクセルシェーダー .frag で書きます。

作ったもの

参考記事の2つ目をみながら、マウスオーバーすると画像がかっこよく切り替わるものを作りました。

See the Pen three.js hover image effect by misumi (@mismith0227) on CodePen.

まだ完全に理解してないので、詳しい解説はできませんが、一つ一つ紐解いていくと大まかな仕組みは理解することができました。これから自分が作りたいイメージに作り替えられるようにもっと理解を深めていきます。