この記事は、「グラフィックス全般 Advent Calendar 2024」の 13日目の記事です。
はじめに
この記事では、2024年に自分がシェーダーを使ってみた試作を振り返ってみます。
ちょっとした試作をたくさんやったので、いくつかピックアップして振り返ることにします。
シェーダーを使った試作
基本的に、自分がシェーダーを使うシーンは描画ライブラリの p5.js と組み合わせることが多いです。
そして、だいたい以下の記事などにも書いている createFilterShader() を使うことが多いです。
●p5.js でのシェーダーを使った描画に WebGL 2.0（GLSL ES 3.0）を使う 〜その3：JavaScript側から時間の情報を渡す、createFilterShader() を併用〜 - Qiita
https://qiita.com/youtoy/items/f3a84a71d1f4fc8f2259
createFilterShader() は、シンプルにフラグメントシェーダーだけ使いたいという場合に使うと、バーテックスシェーダーを用意することなく、カスタムシェーダーを扱えます。
試作したもののいくつかをピックアップ
それでは、2024年に試作したものをいくつかピックアップして、ざっくりと振り返っていきます。
某ゲーム機の見た目っぽいフィルター
最初は、自分世代だと懐かしい、某ゲーム機の見た目っぽい映像になるフィルターです。
実際の見た目は、以下をご覧ください。処理としては、色の階調と色数を減らすようなものになります。
当初はシンプルに、カメラ映像に対するフィルターを作っていました。
そんな中、以下のようなコメントをもらって、その後から枠をつけたりしました。
そして、最初に紹介した動画のものになりました。
雨粒がついて曇るというフィルター
次は、雨粒がついて曇るという見た目になるフィルターです。
雨粒のような見た目をシェーダーで作る部分は、Web で見かけた他の方が作られたものです。
自分はそれに対して、以下を足したりなどしました。
- カメラ映像の上に重ねて表示
- 雨粒の量などをパラメータで変化させられるようにし、それを動的に変化させた
- カメラ映像にブラーをかける（雨粒が窓ガラスについて、その窓ガラスが曇ったみたいな感じっぽくしたかった）
透明人間っぽいエフェクト
次は透明人間っぽいエフェクトです。
ポストで書いているとおり、シェーダー側のコードは 10行程度です。
その短さで、見ていただいた方からのウケが良い見た目を作れました。
基本的には、ディストーションの処理で作っています。
意図せずできた煙っぽいもの？
こちらは炎のゆらめきの見た目を作っていた際、あれこれ処理やパラメータをいじっていたら偶然できたものです。
謎の煙みたいな見た目ができたのですが、結果的に面白いので良いかなと思ったものでした。
炎の広がり方を変える等
こちらは中心から外へと拡がっていくような炎っぽいものを作ってみたものです。
色の変化が起こるようにもしてみました。
また炎っぽいものを使ったものとして、以下のように手から炎を出すみたいな見た目になるものも試作したりしました。
ノイズ画像を使ったシーン切り替えのエフェクト
こちらはノイズ画像を使った場面切り替わり用エフェクト、といった感じのものです。
仕組みとしては、グレースケールのノイズ画像を用意し、そのノイズ画像の個々のピクセルの値を「黒い画像とカメラ画像との切り替わり」に使っている形です。
おわりに
他にも打ち上げ花火のようなものや、グローエフェクトをかけたオブジェクトなど、試作したものがあったりもするのですが今回は分量の都合で省略しました。
シェーダーを使ったコンテンツは、また引き続き作っていければと思います。