10
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ShaderGraphで色収差フィルターを実装【Unity、ShaderGraph、色収差、RGB Shift】

Last updated at Posted at 2024-09-25

■ 概要

本記事ではUnityのShaderGraphを使った
「色収差(RGBシフト)フィルターの実装」
を紹介します。

■ 環境

Unityバージョン:Unity2022.3.44f1
プロジェクトテンプレート:Universal 3D

今回はShaderGraphの機能が標準で搭載されている「URP」レンダリングパイプラインのプロジェクトで実装しています。

※ビルトインのレンダリングパイプラインでも、パッケージを後からインストールしてShaderGraphを使用することができます。
その手順はこちらの記事が参考になります。

■ 実装

色収差を適用した画像:
output_2.png

元画像:
sample_1.png

ShaderGraphファイル:
スクリーンショット 2024-09-25 145745.png
Tiling And Offset」ノードを使用して、色収差(色のズレ)を表現するためのUV座標を複数生成します。そしてそれらのUV座標を指定してテクスチャーからRGBの色要素を個別にサンプリングし、最後に合成します。

■ 色収差とは

カメラレンズを通った光が1点に集まらないことで生じる歪みやボケのことを 「収差」 と言い、また光を構成する三原色(赤系、緑系、青系)はそれぞれ波長や屈折率が異なるので、そのために生じる収差のことを 「色収差」 と言います。(「RGBシフト」って呼ばれることもあります)

特に光学的に精度の低いレンズや広角レンズでの撮影においてこの色収差は生じやすく、その他にも強い光源がある場合や、逆光、被写体やカメラ自体のブレ、といった状況でもよく見られます。

IMG_2690.JPG

例えばこの写真はライブハウスで撮影したものなのですが、まったく加工なしで自然に色収差が生じた写真になっています。赤系、青系、緑系の色(光)がズレて結像されていることが確認できると思います。

■ 応用

上記の実装では、分かりやすくするためにかなり大きめに色のズレを表現したのですが、「Tiling And Offset」ノードのパラメーターを調整すればもっとナチュラルに表現することも可能です。

実装後:
output_1.png

元画像:
sample_1.png

ShaderGraphファイル:

このパラメーターを動的に変更すれば、色収差をアニメーションで実装することもできそう。

■ 最後に

色収差の写真ってカッコよくて好きなので、実装していて楽しかったし他にもまだ工夫の余地がありそうだなぁという感想です。

最後までご覧いただき、ありがとうございました。

10
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?