連休中、WebGLに再チャレンジしてみた

スピッカートでは、ありがたいことに学習支援制度が整っていて、
業務に関連する外部スクールや講座の受講を会社がサポートしてくれます。
私は、その制度を利用して、WebGLスクールを受講していました。
当時は入社して間もない頃で、いろんなことを学びたい！WebGLやってみたい！と勢いよくスクールに参加したはいいものの、目の前の業務に精一杯で、課題の提出などが追いつかないまま、気がついたらかなりの時間が経っていました。

しかし！！！！
WebGLスクール講師であるdoxasさんがおっしゃっていました。

自分が「楽しめる」ペースで「継続する」ことが大切

前置きが長くなってしまいましたが、そんな言葉をもう一度心において、
今回はひとまず、作ってみたいと思うものを形にすることを目標に取り組んでみました。

作ったもの①：スクロールで画像にノイズがかかるエフェクト

まだいろいろ問題を抱えていますが、まずはじめにせっかくならスピッカートのデザインに合いそうなものをやりたい！と思い、アナログっぽく画像にノイズをかけるところから始めました。
シンプルにとは言ったものの、特にスクール後半で扱っていたシェーダー部分の理解が浅く、
画像1枚にノイズをかけるだけでも時間がかかってしまいましたが、
「1つのcanvasに1つの画像」→「1つのcanvasに複数画像」→「スクロールに連動してノイズをかける」
という感じで、1つできたら次、次と少しずつ欲が出てきて、気づいたらいろいろ試していました。
参考サイトをなぞりつつで、正直まだまだざっくりとした理解ですが、コードを書きながら「この言葉、知ってるぞ！」とスクールでの記憶が蘇ったり、思ったように表現できた瞬間はとても楽しかったです。

参考サイト①
https://tympanus.net/codrops/2024/07/18/how-to-create-distortion-and-grain-effects-on-scroll-with-shaders-in-three-js/

参考サイト②
https://webgl-scroll-sync.lusion.co/

作ったもの②：ハーフトーンのグラデーション

2つ目は、動くグラデーション背景にハーフトーンを重ねたエフェクトです。
このグラデーションのベースは、Misaki Nakanoさんの記事 を参考にしました。
こちらもほぼなぞっての実装ですが、4色からなるグラデーションができるよう調整してみたり、ハーフトーンをChatGPTに相談しながら作ってみました。シェーダー関数についての理解も少し深まったように思います。こちらはいろいろとパラメータをいじれるようにして、初心者の第一テンションあがりポイントを存分に楽しみました。それっぽく仕上がったのではないかなと思います！

再チャレンジして感じたこと

• WebGLに取り組むことへの抵抗感が減った！
• 理解できていない部分がありながらでも、形になると楽しい！
• シェーダーの知らなかった関数を知ることができた！
• WebGLスクール受講当時より、講義内容の解像度があがった！

・・・と、もう一度チャレンジしてみてよかったことだらけでした。
また、WebGLスクールでのThree.jsの基本的な使い方や、ネイティブのWebGLの講義もあったおかげで、シェーダーにどう値を渡すのか、頂点シェーダーとフラグメントシェーダーの役割の違いなど、当時しっかり基礎を学ぶことができ、一人でも折れずに再チャレンジすることができました。
受講当時は新しい言葉ばかりで目が回ってしまっていましたが、こうやって手を動かしてみることで、基礎をとても丁寧に解説してくださっていたんだなぁと実感、、
今後はもっとしっかり理解して作れるようになるために、もう一度WebGLスクールの内容を復習して理解を深めたいと思います！

そして今回をきっかけに「楽しみながら続ける」を大切に少しずつ実践を積んで、実際に仕事で使用することを目標にコツコツがんばっていきたいと思います！