2

所以我正在为即将到来的 CSS 着色器规范开发一个着色器。我正在构建一些专门针对专业视频产品的东西，我需要分离出 alpha 通道（作为亮度，我已经成功完成）和没有 alpha 通道的图像的“直接”版本。

示例：https ://dl.dropbox.com/u/4031469/shadertest.html （仅适用于精美的 adobe webkit 浏览器）

我很接近，只是想弄清楚最后一个着色器。

这是我希望看到的一个例子。（这是来自 Targa 文件）

https://dl.dropbox.com/u/4031469/Randalls%20Mess.png - 填充物（我还没弄清楚）

https://dl.dropbox.com/u/4031469/Randalls%20Mess%20Alpha.png – 关键（也就是我想出的 alpha）

（决赛，如果你好奇的话：https ://dl.dropbox.com/u/4031469/final.png ）

我认为这将是一个矩阵变换，但我现在在想，我已经尝试了越来越多，它会比矩阵变换更复杂。我可悲地正确吗？如果是这样，我什至如何开始解决这个问题？

4

3 回答 3

1

在您的着色器中，我假设您有一些代码可以对类似于以下的纹理进行采样，是吗？

vec4 textureColor = texture2D(texture1, texCoord);

textureColor此时包含 4 个值：红色、绿色、蓝色和 Alpha 通道，每个通道的范围从 0 到 1。您可以分别访问这些颜色中的每一个：

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

或者通过使用称为“swizzling”的技术，您可以成组访问它们：

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

您从中获得的颜色值不应被预乘，因此除非您想要，否则 Alpha 不会产生任何影响。

实际上，使用它来执行诸如将纹理的镜面反射级别打包到漫反射纹理的 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-06T01:04:45.947 回答
0

显然，根据其中一位adobe 家伙的说法，这在 CSS 着色器语言中是不可能的，因为矩阵变换只能变换现有值，而不能添加“偏差”向量。

我现在正在探索的替代方法是使用 SVG 过滤器。

于 2012-06-27T17:07:20.637 回答
0

SVG 过滤器现在是在 Chrome 中实现这一目标的方法。

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

不过现在还为时尚早，目前只有 Canary 版本支持 CSS 动画。

于 2012-11-28T17:07:23.397 回答