css - "Straight"带 alpha channel 的图像版本

标签 css opengl-es shader

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

示例: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 – 关键(也就是我想出的 alpha)

(最后的,如果你好奇的话:https://dl.dropbox.com/u/4031469/final.png)

我认为它会是一个矩阵变换,但现在我想我已经尝试了越来越多,它会比矩阵变换更复杂。可悲的是,我是正确的吗?如果是这样,我将如何着手解决这个问题?

最佳答案

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

vec4 textureColor = texture2D(texture1, texCoord);

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

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

或者通过使用一种称为“调配”的技术,您可以成组访问它们:

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

你从中得到的颜色值不应该被预乘,所以 alpha 不会有任何影响,除非你想要它。

实际上,使用它来执行诸如将纹理的镜面反射级别打包到漫反射纹理的 alpha channel 之类的操作非常常见:

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

鉴于着色器的灵 active ,使用和滥用各种颜色 channel 组合的任何数量的效果都是可能的,因此很难说出您需要的确切算法。不过,希望这能让您了解如何分别使用颜色 channel 。

关于css - "Straight"带 alpha channel 的图像版本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10906582/

相关文章:

html - Mac Safari HTML 中的神秘 X 符号

java - 如何使用适用于 Android 的 OpenGL 2.0 绘制 UV 球体并对其进行纹理处理

c++ - 为什么 eglMakeCurrent 因 EGL_BAD_ALLOC 而失败?

OpenGL 着色器和常量

XNA .Fbx 纹理

c++ - 发送 3 字节数据到 OpenGL GLSL

html - 如何在到期日更改字体颜色?

css - 无法识别的 HTML 元素的默认设置

html - 设置父项高度相对于子项高度。

java - OpenGL ES 2.0 和 OpenGL ES 3.0 的单一代码