Flash 抽色效果濾鏡

Ticore Shih — Tue, 20 Sep 2011 06:31:45 +0000

我是 Ticore，這次要分享的是用 Pixel Bender 做出來的抽色濾鏡效果
可以依據指定的色彩，調整點陣圖的色彩飽和度
色彩相差越遠的飽和度越低
效果看起來就會像是把特定色彩抽出來了一樣

直接從 RGB 數值去思考會覺得非常難做
其實只要把 RGB 轉為 HSV 色彩模式便簡單許多
拿到 Hue 值之後，便能拿來與設定主色色彩做比較
差越遠的，就把飽和度調得越低
以下便是我自製的 Partial Color Shader 原始碼：

<languageVersion : 1.0;>
kernel PartialColor
<
    namespace : "PartialColor";
    vendor : "Ticore Shih";
    version : 1;
    description : "only keep saturation of assigned color";
>
{
 
    parameter float hue
    <
        defaultValue: 0.0;
        minValue: 0.0;
        maxValue: 360.0;
    >;
 
    parameter float range
    <
        defaultValue : 40.0;
        minValue : 0.0;
        maxValue : 180.0;
    >;
    input image4 src;
    output pixel4 dst;
 
    void evaluatePixel() {
        pixel4 inputColor = sampleNearest(src, outCoord());
        float minColor, maxColor, delta;
        float h, s, v;
        float r, g, b;
        float f, p, q, t;
        int i;
 
        r = inputColor.r; g = inputColor.g; b = inputColor.b;
 
        minColor = min(min(r , g) , b);
        maxColor = max(max(r , g) , b);
        delta = maxColor - minColor;
 
        // value
        v = maxColor;
        // saturation
        if (maxColor !=0.0 ) {
            s = delta / maxColor;
        }
 
        // hue
        if (maxColor == r) {
            h = (g - b) / delta;
        } else if (maxColor == g) {
            h = 2.0 + (b - r) / delta;
        } else {
            h = 4.0 + (r - g) / delta;
        }
        h *= 60.0;
        h = mod(h + 360.0, 360.0);
 
 
        float diff = min(mod(abs(hue - h - 360.0), 360.0), mod(abs(hue - h + 360.0), 360.0));
 
        // sine
 
        s *= sin(clamp(1.0 - diff / range, 0.0, 1.0) * 90.0 * 3.14159 / 180.0);
 
        s = clamp(s, 0.0, 1.0);
 
        if (s == 0.0) {
            r = g = b = v;
        } else {
            h /= 60.0;
            int i = int(floor(h));
            f = h - float(i);
 
            p = v * ( 1.0 - s );
            q = v * ( 1.0 - s * f );
            t = v * ( 1.0 - s * ( 1.0 - f ) );
 
            if (i == 0) {
                r = v; g = t; b = p;
            } else if (i == 1) {
                r = q; g = v; b = p;
            } else if (i == 2) {
                r = p; g = v; b = t;
            } else if (i == 3) {
                r = p; g = q; b = v;
            } else if (i == 4) {
                r = t; g = p; b = v;
            } else if (i == 5) {
                r = v; g = p; b = q;
            }
        }
 
        dst = pixel4(r, g, b, inputColor.a);
    }
}

實際拿一張色彩豐富的照片來試試看
(照片為印度孟買某學校外)

照片下方特別加上了色條，比較容易看出不同 Hue 值與抽色濾鏡的效果關係

Partial Color Shader 線上範例：

Partial Color Shader 原始檔案下載

2009 Adobe Flash / Adobe Flex 重點留意關鍵字

Alvin / Aedis.Ju — Fri, 05 Jun 2009 14:24:12 +0000

抽點時間，記下筆記。把個人認為今后跟Adobe Flash / Adobe Flex 相關的，需要特別留意的關鍵字記錄一下。

以下按字母排序：

3D
有人開始開始催我給他做PV 3D，你就知道現在的Flash 3D概念已經越來越被人所應用和認識。
flashplayer 10加入了3D元素，但是它只能起到輔助的作用，如果要做成更大的豐富的應用體驗，還是需要靠其他的3D庫（away3D, PV3D, Alternativa3D, Sandy3D等等）來實現，在經歷一段時間的探索后，今后web上將會出現更多成熟的3D應用。
AR(Augmented Reality)
跟Adobe有關，那當然說的是FLARKit，與AS相結合，產生更佳的豐富虛擬體驗，它一定會成為一個時代的代名詞！
記得第一次看到FLARKit的我，第二天馬上就寫好了程式，制作出影片寄給朋友，朋友各個稱贊啊！
如果你是第一次聽說，你只要在Google里面隨便一敲，你會發現一大堆新奇的東西哦。
DD(Design-Develop)
Flash Builder / Flex4 / Gumbo Public Beta發布了，這次變化跨度相對于從Flex2到Flex3的時候大得多，而Text Layout Framework，Adobe Flash Catalyst的加入，使整個Adobe家族更加融合，Design-Develop的概念更加清晰。
我們將會創造更加具有豐富體驗的產品。
Mobile
Adobe在mobile領域遇到了阻力，這是顯而易見的，特別是在對iPhone這樣一個令人心動的平臺上。FlashLite已經滿足不了當今的需求，是繼續更新還是會有新的產品呢，或者說，還會有新的意想不到的發現呢？
Adobe將會在今年或者明年有一個很大的跨步哦，我們將拭目以待！
p2p(Peer to Peer)
不要輕易忘記flashplayer 10新增的功能，現在還沒有很流行那是因為flashplayer 10的player還沒有占有99%以上，而且目前制作種子（目前只能在Adobe官網上）是一個相對比較麻煩的事情。
PB(Pixel Bender)
呵呵，不是Prison Break啦，而是Pixel Bender in AS3，有趣的東西，已經有人為它專門開辟了專區來研究，就像3D一樣。一股Pixel Blender的熱風正在刮起。
RSL(Runtime Shared Library)
早就有的關鍵字，解決swf文件過大而引起速度加載過慢的有效辦法之一，當然這也要看flashplayer 10擴張的眼色，正是因為設計時考慮用戶的播放器并不一定是flashplayer 10，所以，目前的工程基本沒有加入這樣的功能。
想想吧，加這個東西以后，swf的文件會多少小啊～～～
不過想想在日本這種網絡高速的情況下，相對來說，這也不是很重要的啦。 XD

如果你認為重要，我卻沒有提到的，請及時留言哦。

RichMedia+ » Pixel Bender

Flash 抽色效果濾鏡

2009 Adobe Flash / Adobe Flex 重點留意關鍵字