Question

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

示例：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）

我认为它是一个矩阵变换，但我现在想的是我已经尝试了越来越多，它会比矩阵变换更复杂。我不好意思吗？如果是这样，我怎么会开始攻击这个问题？

Answer 1

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

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;

你得到的颜色值不应该是预先计算的，所以除非你想要它，否则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

鉴于着色器的灵活性，使用和滥用各种颜色通道组合的任何数量的效果都是可能的，因此很难说出您需要的确切算法。希望这能让您了解如何单独使用颜色通道。

Answer 2

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

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

Answer 3

SVG过滤器现在可以在Chrome中实现这一目标。

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

现在还很早，目前只在Canary版本中支持CSS动画。

具有Alpha通道的图像的“直”版本

3 个答案: