2021.04.07
272
こんにちは、フロントエンドエンジニアのくりちゃんです。
今月は業務の間にWebGLをちょこちょこ勉強していました。今月勉強したことをゆるくまとめてみたいと思います。
最近LIGで制作されたエムトラスト様コーポレートサイト。FVのパーティクルがかっこいいですよね。
- エムトラスト様コーポレートサイト
- https://www.m-trust.co.jp/
真似してみたいなと思い、コードをいろいろのぞいてました。
Canvas 2DのgetImageData()を使って位置と色情報を求めているみたい？
そしてそれをシェーダーに流し込むと。。やってみます。
See the Pen
Image Pixel Filter #01 by Hisami Kurita (@hisamikurita)
on CodePen.
三角形になっちゃいましたね。パーティクルはThree.Pointsを使うと良いみたいです。
See the Pen
Image Pixel Filter #02 by Hisami Kurita (@hisamikurita)
on CodePen.
良い感じですね。次は画像を複数使ってみたいと思います。どうやら色情報を足して、切り替えてるみたいです。なるほど……。
（編集注：以下のcodepen上の画像はUnsplashから3枚使用しています。なぜかゾンビ画像なので、苦手な方はグロ注意です）
See the Pen
Image Pixel Filter #06 by Hisami Kurita (@hisamikurita)
on CodePen.
満足したので、Slackで共有してみました。
そしたら、同じチームのけんてぃさんからこんなアドバイスをいただきました。
うっ……求めるレベルが高いですね。これでは満足できないです。
先輩のコードを真似しつつ、クオリティを上げてみました。
See the Pen
Image Pixel Filter #05 by Hisami Kurita (@hisamikurita)
on CodePen.
ブルームエフェクトとノイズを加えてみたらけっこう良い感じになりました。とりあえず満足です。
「他山の石以て玉を攻むべし」
師匠からこんな言葉を言われました。どんどん真似して自分の「型」を身につけよう……と。
師匠……！！
まだまだ他のコードを参考に実装することが多いですが、いつか自分だけの表現を表せたら良いなと思いました。
終わり。