「2Dでのグレア処理」の編集履歴（バックアップ）一覧はこちら
「2Dでのグレア処理」(2006/09/26 (火) 15:36:35) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
*2Dでのグレア処理
**参考
-[[元ネタ>http://d.hatena.ne.jp/o_mega/20060922/1158951079]]
-[[DirectXゲームグラフィックスプログラミング>http://www.amazon.co.jp/DirectX0b20fc0e00b00e90d50a30c30af0b90d70ed0b00e90df0f30b0-Ver-2-0-N2Factory/dp/4797329807]]
**グレア処理とは？
グレアとは「ぎらぎらする光」で、
リアルタイムに物体の明るい部分を取り出して、それを、ぴかー、と強調する処理のことです。
もともと3Dの技術ですが、それを擬似的に2Dで実装してしまおう、
というのがこのページの狙いです。
**グレア処理の手順
手順としてはこんな感じ。
+明るい部分（輝度）を抽出
+抽出した輝度を、ぼかしとか十字型のグレアにそれっぽく変形
+物体にグレアをレンダリング
**2Dでのグレア処理の手順
***輝度の抽出
3Dだとスペキュラー（強い光）をMAXにして抽出するらしいのですが、
2Dだとそんなことはできないので、白塗り画像を減算合成して取り出します。
例えば、こんな物体があったとして、
&ref(ball.png)
この白塗り画像を減算合成してやると、
&ref(filter.png)
こんな感じで抽出できます。
&ref(bright01.png)
***グレアに変形
今回は簡単なぼかしで。
先ほど抽出した輝度を、ランダムな座標に加算合成してやります。
&ref(bright02.png)
***レンダリング
もとのボール画像と、グレアを加算合成してやれば、
ほら！ぴかー、という感じに！
&ref(bright03.png)
左が元の画像、右がグレア処理したもの。
（、、まあ、元画像がいまいちなので、あんまりかっこよくないですが（´Д｀；
**HSPでのソース
#const BALL_SIZE 64 // ボール画像のサイズ
// ボール画像バッファ
buffer 2
picload "ball.bmp"
// 輝度フィルタ用バッファ（HSPはデフォルトで白塗り）
buffer 3, BALL_SIZE, BALL_SIZE
// 輝度フィルタ書き出し用バッファ
buffer 4, BALL_SIZE, BALL_SIZE
gcopy 2, 0, 0, BALL_SIZE, BALL_SIZE
gmode 6, BALL_SIZE, BALL_SIZE, 238 // 白塗り画像を減算合成して、
gcopy 3, 0, 0, BALL_SIZE, BALL_SIZE // 輝度抽出
gmode 5, BALL_SIZE, BALL_SIZE, 64
// ぼかし
repeat 20
x = rnd(10)-5
y = rnd(10)-5
pos x, y
gcopy 4, 0, 0, BALL_SIZE, BALL_SIZE
loop
gsel 0
i = 0
repeat
redraw 0
color 0, 0, 0
boxf 0, 0, 640, 480
// 元画像（比較のために）
pos 32, 128
gmode 2
gcopy 2, 0, 0, BALL_SIZE, BALL_SIZE
// グレアする画像
pos 128, 128
gmode 2
gcopy 2, 0, 0, BALL_SIZE, BALL_SIZE
i += 2
if i > 255 {
i -= 255
}
gmode 5, BALL_SIZE, BALL_SIZE, abs(-128+i) // グレア加算合成
gcopy 4, 0, 0, BALL_SIZE, BALL_SIZE
redraw 1
wait 1
loop
**課題
-元画像がいまいちだときれいなグレアになってくれない
-グレア変形で、何度もイメージ転送するのが重い
**感想
-2Dでも、加算・減算合成ができれば、グレア処理ができるぞ。ｼｭｺﾞｰ
*2Dでのグレア処理
**参考
-[[元ネタ>http://d.hatena.ne.jp/o_mega/20060922/1158951079]]
-[[DirectXゲームグラフィックスプログラミング>http://www.amazon.co.jp/DirectX0b20fc0e00b00e90d50a30c30af0b90d70ed0b00e90df0f30b0-Ver-2-0-N2Factory/dp/4797329807]]
**グレア処理とは？
グレアとは「ぎらぎらする光」で、
リアルタイムに物体の明るい部分を取り出して、それを、ぴかー、と強調する処理のことです。
もともと3Dの技術ですが、それを擬似的に2Dで実装してしまおう、
というのがこのページの狙いです。
**グレア処理の手順
手順としてはこんな感じ。
+明るい部分（輝度）を抽出
+抽出した輝度を、ぼかしとか十字型のグレアにそれっぽく変形
+物体にグレアをレンダリング
**2Dでのグレア処理の手順
***輝度の抽出
3Dだとスペキュラー（強い光）をMAXにして抽出するらしいのですが、
2Dだとそんなことはできないので、白塗り画像を減算合成して取り出します。
例えば、こんな物体があったとして、
&ref(ball.png)
この白塗り画像を減算合成してやると、
&ref(filter.png)
こんな感じで抽出できます。
&ref(bright01.png)
***グレアに変形
今回は簡単なぼかしで。
先ほど抽出した輝度を、ランダムな座標に加算合成してやります。
&ref(bright02.png)
***レンダリング
もとのボール画像と、グレアを加算合成してやれば、
ほら！ぴかー、という感じに！
&ref(bright03.png)
左が元の画像、右がグレア処理したもの。
（、、まあ、元画像がいまいちなので、あんまりかっこよくないですが（´Д｀；
**HSPでのソース
#const BALL_SIZE 64 // ボール画像のサイズ
// ボール画像バッファ
buffer 2
picload "ball.bmp"
// 輝度フィルタ用バッファ（HSPはデフォルトで白塗り）
buffer 3, BALL_SIZE, BALL_SIZE
// 輝度フィルタ書き出し用バッファ
buffer 4, BALL_SIZE, BALL_SIZE
gcopy 2, 0, 0, BALL_SIZE, BALL_SIZE
gmode 6, BALL_SIZE, BALL_SIZE, 238 // 白塗り画像を減算合成して、
gcopy 3, 0, 0, BALL_SIZE, BALL_SIZE // 輝度抽出
gmode 5, BALL_SIZE, BALL_SIZE, 64
// ぼかし
repeat 20
x = rnd(10)-5
y = rnd(10)-5
pos x, y
gcopy 4, 0, 0, BALL_SIZE, BALL_SIZE
loop
gsel 0
i = 0
repeat
redraw 0
color 0, 0, 0
boxf 0, 0, 640, 480
// 元画像（比較のために）
pos 32, 128
gmode 2
gcopy 2, 0, 0, BALL_SIZE, BALL_SIZE
// グレアする画像
pos 128, 128
gmode 2
gcopy 2, 0, 0, BALL_SIZE, BALL_SIZE
i += 2
if i > 255 {
i -= 255
}
gmode 5, BALL_SIZE, BALL_SIZE, abs(-128+i) // グレア加算合成
gcopy 4, 0, 0, BALL_SIZE, BALL_SIZE
redraw 1
wait 1
loop
**課題
-元画像がいまいちだときれいなグレアになってくれない
-グレア変形で、何度もイメージ転送するのが重い
**感想
-2Dでも、加算・減算合成ができれば、グレア処理ができるぞ。ｼｭｺﾞｰ
-輝度を抽出するには、「黒塗りの画像←加算合成」しても同じことだということに気がつきました。
表示オプション
横に並べて表示：
変化行の前後のみ表示：
