【GLSL】YUV色空間とHSV色空間

GLSLに限らず画像処理やエフェクトを書いていると、RGB座標系だけで考えていると限界があります。

別の色空間に変換して処理することで出来ることが増えたり、処理が楽になったりします。特に色合いと色の強度を分離できると多くの場面で役立ちます。

普段よく使うYUV色空間とHSV色空間をGLSLでも使ってみます。

YUV

YUVYCbCrYPbPr )は輝度Yと、青・赤の色差によって表現する色空間で動画などで多く用いられます。

映像規格ITU-R BT.709に基づいて変換してみます。

単純な行列を使った線形変換です。

行列の掛け算が逆じゃない?って思った方は以前の投稿を参照してください。

この変換では輝度を少し増やして、色相を固定しています。

余談ですが、この変換の輝度YをそのままRGBに適応すると同規格のグレースケール変換になります。

HSV

HSVは色相(Hue)と彩度(Saturation)、明度(Value)で表す色空間です。

色相環はペイントソフト等でもよく使いますね。

非線形変換で多少複雑な計算になります。

色環を[0~2π]0を赤として円錐モデルで変換します。

hsv->rgbの変換が特にめんどくさいですね。

RGBがすべて同じ場合の処理は無視(赤として処理)してます。

 

また余談ですが彩度がSaturationなのにどうしても違和感があります。photometricな世界だと飽和のほうで使われるので。

 

HSVでは特に明るさに関わらない色そのものに対して処理できます。

照明の当たり方の異なる同じ物体に対して彩度、明度を固定する(色相のみの情報にする)とこうなります。

R=G=Bの情報が落ちてますが、明るさに関わらず処理できることがわかります。

【GLSL TIPS】行列の宣言と計算の注意点

GLSLではさほど使う機会のない行列ですが画像処理で使うこともあります。

この行列について根本的な部分の勘違いと、勘違いに気づかない原因について覚書きしておきます。間違いに気づけないのは本当に厄介。

ついでに行列について1からおさらい。

前回float比較について色々言ってますが結局==比較します。問題ないし楽だから。

続きを読む 【GLSL TIPS】行列の宣言と計算の注意点

【GLSL TIPS】円周率の定義とfloat精度

GLSLで円周率の定義方法と用いるfloatの精度についての覚書きです。

別に知らなくても問題ないので大抵は気にしなくていいやつです。

続きを読む 【GLSL TIPS】円周率の定義とfloat精度

【React】Nextでace.jsを使ってエディタ表示する

gl-reactを使ってGLSLでリアルタイムな画像処理がしたい。

ace.jsという有名なコードエディタがあるので使いたいですが、Reactでそのまま使うとなると難しそう。

バージョンは最新ではないもののReactコンポーネント化したreact-aceというものがあったので、その使い方とnext.jsで使う時の注意を覚書き。

続きを読む 【React】Nextでace.jsを使ってエディタ表示する

GLSLで画像のぼかし、モザイク

ぼかし処理の中でも何気によく使われるモザイクを作ってみます。

先の2つと比較すると見えちゃいけないものの処理なんかに使うやつです。

GLSLぼかしシリーズ

続きを読む GLSLで画像のぼかし、モザイク

GLSLで画像のぼかしやノイズ

前回のぼかし・平滑化と似た処理になりますが、ノイズをなくすのではなく逆に追加して認識しにくくするのが目的です。

今回はノイズ追加、乱反射、RGB分離を行います。

続きを読む GLSLで画像のぼかしやノイズ

GLSLで画像のぼかしや平滑化

GLSLで画像処理をする中でぼかした画像を使いくなった。

何を使ってどうしようかなと少し考えたので整理しつつ書いておきます。

続きを読む GLSLで画像のぼかしや平滑化

画像1枚から奥行を推定して立体的に見せる手法を使ってみる

複数枚の画像から形状を計算する方法は多くありますが、1枚の画像から推定する手法も結構あります。面白そうなのを見かけたので少し試してみます。

3D Photography using Context-aware Layered Depth Inpainting

 

細かいことは必要になったときに論文でも読むとして、実際にどんな感じで推定されるのか使ってみます。

続きを読む 画像1枚から奥行を推定して立体的に見せる手法を使ってみる

GLSLでお絵描き【極座標系と周期関数】

gl-reactを使ってGLSLでお絵描きをしてみます。

以下と同じようなGLSLの練習メモです。

続きを読む GLSLでお絵描き【極座標系と周期関数】

新アプリ「カレイドカメラ」をリリース

新アプリ「カレイドカメラ」をリリースしました。

前作「カレイドツクール」のカメラ版ですね。

カレイドスコープ(万華鏡)の写真を撮るアプリです。

続きを読む 新アプリ「カレイドカメラ」をリリース