帶「alpha」通道的「直」版圖像

所以我正在爲即將到來的CSS着色器規範着色。我正在構建專門針對專業視頻產品的東西，並且我需要分離出alpha通道（作爲亮度，我已成功完成）以及圖像的「直接」版本，該版本沒有Alpha通道。帶「alpha」通道的「直」版圖像

例子：https://dl.dropbox.com/u/4031469/shadertest.html（僅fancy adobe webkit browser作品）

我是如此接近，只是試圖找出最後的着色器。

下面是我期望看到的一個例子。（這是從的Targa文件）

https://dl.dropbox.com/u/4031469/Randalls%20Mess.png - 填充的（我還沒有想出）

https://dl.dropbox.com/u/4031469/Randalls%20Mess%20Alpha.png - 鍵（我已經想通了，又名阿爾法）

（最後，如果你好奇：https://dl.dropbox.com/u/4031469/final.png）

我認爲這將是一個矩陣轉換，但我現在想我已經嘗試越來越多，這將是一個比矩陣轉換更復雜的東西。我難過嗎？如果是這樣，我怎麼會開始攻擊這個問題呢？

來源

2012-06-05 RandallB

我根本沒有視頻處理的經驗，所以也許我在這裏錯過了一些東西，但我不確定你的意思是「直的」圖像。您是否指的是沒有alpha調製的RGB色彩值？（非預編？） – Toji

正確的Toji！究竟。 – RandallB

SVG過濾器現在是在Chrome中實現這一功能的方式。

https://dl.dropbox.com/u/4031469/alphaCanvases.html

還早，雖然，CSS動畫只支持在加那利建設目前。

來源

2012-11-28 17:07:23 RandallB

在你的着色器中，我認爲你有一段代碼可以對紋理進行採樣，類似於以下，是嗎？

vec4 textureColor = texture2D(texture1, texCoord);

textureColor在該點包含4個值：紅，綠，藍，和Alpha通道，每個範圍從0到1。可以單獨訪問每個這些顏色的：

float red = textureColor.r; 
float alpha = textureColor.a;

或通過使用被稱爲「混寫」的技術，您可以在臺訪問它們：

vec3 colorChannels = textureColor.rgb; 
vec2 alphaAndBlue = textureColor.ab;

你擺脫這種顏色值不應premultipied，所以阿爾法不會有任何除非你想要它，否則效果。

這實際上是一個很常見的使用這個不喜歡的東西包裝的鏡面水平紋理到漫反射紋理的alpha通道：鑑於着色器的靈活性任意數量的影響可能

float specularLevel = textureColor.a; 
float lightValue = lightFactor + (specularFactor * specularLevel); // Lighting factors calculated from normals 
gl_FragColor = vec4(textureColor.rgb * lightValue, 1.0); // 1.0 gives us a constant alpha

使用和濫用色彩通道的各種組合，因此很難說出您需要的確切算法。不過，希望能夠讓您瞭解如何分別使用顏色通道。

來源

2012-06-06 01:04:45 Toji

由於某些定時攻擊潛力，gl_FragColor不受支持。我的着色器使用css_ColorMatrix。我很難找出一個可行的解決方案。 – RandallB

嗯...沒關係。那就不一樣了。可悲的是，我對CSS着色器不熟悉。我已經調整了問題標籤，希望能夠從具有正確技能的人那裏獲得關注，但是如果我在這方面發現任何問題，我會讓你知道！ – Toji

顯然，根據adobe guys之一，在CSS着色器語言中這是不可能的，因爲矩陣變換隻能夠變換現有值，而不會添加「偏置」向量。

我現在正在探索的另一種方法是使用SVG濾鏡。

來源

2012-06-27 17:07:20 RandallB

帶「alpha」通道的「直」版圖像

回答

相關問題