带“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”通道的“直”版图像

回答

相关问题