标签: alphablending

我有许多RGBA像素,每个像素都有一个alpha分量.

所以我有一个像素列表:(p0 p1 p2 p3 p4 ... pn)其中p_0_是前像素,p_n_是最远的(在后面).

最后(或任何)像素不一定是不透明的,因此得到的混合像素也可以某种方式透明.我从列表的开头到结尾混合,反之亦然(是的,它是光线追踪).因此,如果任何时刻的结果变得不透明,我可以用足够正确的结果停止.我将以这种方式应用混合算法:((((p0 @ p1)@ p2)@ p3)...)

任何人都可以建议我正确的混合配方不仅适用于R,G和B,还适用于A组分吗？

UPD:我想知道如何确定混合颜色的确定过程可以有很多公式吗？它是某种近似吗？对我来说,这看起来很疯狂:公式并没有那么不同,我们真正获得了效率或优化.任何人都可以澄清这个吗？

我正在使用alpha通道绘制一些纹理,但是当它们显示时,它看起来像alpha通道只是二进制.因此像素是透明的或不透明的,尽管在纹理文件本身中像素是半透明的.混合设置如下:

gl.glEnable(GL10.GL_BLEND);
gl.glBlendFunc(GL10.GL_ONE, GL10.GL_ONE_MINUS_SRC_ALPHA);

这个问题有解决方法吗？

以上显示了它应该如何,以下显示它是如何:

我在alpha混合上发现了5349574673页,但我仍然无法获得所需的结果.我正在尝试使用opengl正确显示gif/png文件(使用透明度/半透明度).

这是我的初始化位:

glEnable(GL_TEXTURE_2D);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA); //I've seen this on most tutorials
glDisable(GL_DEPTH_TEST); //it's a 2D game
//...loading matrices and so on

我确定图像有透明度,并且正确加载.
glBlendFunc(GL_ONE,GL_ONE); 但我无法判断它是否在alpha通道上做任何事情,因为它会渲染为黑色=>混合工作
glColor4f(1f,1f,1f,0.3f); 工作得很好,我可以画出透明的东西

PS我正在使用这个例子http://lwjgl.org/wiki/index.php?title=Space_Invaders_Example_Game进行学习

编辑 我使用了用GIMP和其他纹理加载器编码的其他纹理,它现在工作正常.

所以我有一个动画,我用javascript和HTML5编码(没有库,没有插件,没有任何东西,我希望它保持这种方式).动画使用物理(基本上是一堆附着在质量上的不寻常弹簧)来模拟一种简单的液体.程序的这一部分的输出是对象的网格(2d阵列),每个对象具有az值.这很好用.将数据绘制到HTML5 Canvas时出现问题.

这就是它的样子.相信我,动画时更好.

对于每个数据点,程序绘制一个圆圈,其颜色由z值确定.然而,仅仅绘制这些点,网格图案非常明显,很难看到它代表的流体.为了解决这个问题,我使圆圈更大,更透明,使它们相互重叠,混合颜色,形成简单的卷积模糊.结果既快又美,但对于一个小缺陷:

当圆圈按顺序绘制时,它们的颜色值不会平均堆叠,因此后面绘制的圆圈会遮挡先前绘制的圆圈.在数学上,渲染器正在重复加权平均值的圆的颜色值.这适用于两个圆圈,每个圆圈的值为0.5*alpha_n,但对于三个圆圈,渲染器采用最新圆圈的平均值与其他两个圆圈的平均值,给最新圆圈的值为0.5*alpha_n,但较早的圆圈每个值为0.25*alpha_n.随着越来越多的圈子重叠,这个过程将继续进行,从而对较新的圈子和较旧的圈子产生偏见.相反,我想要的是三个或更多个圆圈中的每个圆圈都得到0.33*alpha_n的值,这样早期的圆圈就不会被遮挡.

这是阿尔法混合的图像.请注意,后面的蓝色圆圈模糊了之前绘制的红色和绿色圆圈:

这就是问题在行动中的样子.注意肿块左侧的不同外观.

为了解决这个问题,我尝试了各种方法:

• 使用不同的画布"混合模式"."乘法"(如上图所示)完成了这一伎俩,但却造成了不幸的色彩扭曲.
• 集体绘制电话.我没有将每个圆圈作为一个单独的画布路径,而是试图将它们拼凑成一个.不幸的是,这与单独的填充颜色不相容,而且,路径根本没有与自身融合,创造出哑光,单调的轮廓.
• 隔行扫描绘图顺序.我没有按照0到n的顺序绘制圆圈,而是尝试首先绘制平均值,然后绘制赔率.这只是部分地解决了这个问题,并且创造了一个难看的分层模式,其中赔率似乎漂浮在平均值之上.
• 使用putImageData构建我自己的混合模式.我尝试使用javascript创建一个手动像素着色器以满足我的需求,但是,正如预期的那样,它太慢了.

在这一点上,我有点卡住了.我正在寻找创造性的方法来解决或绕过这个问题,我欢迎你的想法.我不是很有兴趣被告知这是不可能的,因为我可以为自己解决这个问题.您如何从这些数据点中优雅地绘制流体？

我有一个TSpeedButton,并且有一个TImageList包含各种字形.其中一个有一个alpha通道,当它被绘制到UI的某些部分时看起来非常好......但是当在a上绘制该字形时TSpeedButton,它不会使alpha通道生效.

查看相关代码TButtonGlyph.DrawButtonGlyph,它将被传递true给Transparent参数,但Transparent在if FThemesEnabled代码路径中根本没有考虑; 它只在else部分引用.由于此程序启用了主题,这是否意味着无法将alpha混合图像绘制为TSpeedButton？

有什么方法可以解决这个问题吗？

编辑:更仔细地看一下,它似乎需要考虑透明度......有点儿.完全透明的像素根本不会被绘制,这是正确的行为.但是边缘周围的抗锯齿(部分透明)被绘制为完全不透明.

考虑以下小SVG显示两个相邻的三角形:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1">
   <polygon points="10,0  60,0  35,50" style="fill:#cc4444;"/>
   <polygon points="35,50 85,50 60,0" style="fill:#cc3333;"/>
</svg>

这在我的浏览器中呈现如下

注意多边形之间的白线.虽然我理解使用混合是原因,但是当您尝试渲染例如此处所示的数学表面时,此行为非常烦人.

SVG中解决这些差距的正确解决方案是什么？一种方法是将多边形设置为stroke具有相同颜色的小多边形,但这看起来更像是对我的破解,并且在具有大量多边形的图形中,它显着增加了文件大小.

我想使用 glClear 和 glClearColor 用包括 alpha 透明度的颜色填充帧缓冲区。然而，当绑定到渲染到屏幕的纹理时，帧缓冲区总是渲染为不透明的。

我希望渲染到帧缓冲区的所有内容都保持其透明度。我只是想改变背景。

请参阅以下代码：

def create_texture(surface):
surface.texture = glGenTextures(1)
glMatrixMode(GL_MODELVIEW)
glLoadIdentity() #Loads model matrix
glBindTexture(GL_TEXTURE_2D, surface.texture) #Binds the current 2D texture to the texture to be drawn
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR) #Required to be set for maping the pixel data
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR) #Similar as above
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, surface.surface_size[0], surface.surface_size[1], 0, GL_RGBA,GL_UNSIGNED_BYTE, surface.data) #Put surface pixel data into texture
if surface.data == None:
    setup_framebuffer(surface)
    c = [float(sc)/255.0 for sc in surface.colour] #Divide colours by 255 …

这是一个关于Processing.org的问题。

我通过在每个帧的视图上绘制一个半透明的白色矩形来淡出以前绘制的对象。

然而，它们似乎永远不会褪色到完全白色。褪色在一些明显的非白色灰色阴影处有一个固定点。尝试淡入黑色时也会发生同样的事情。

这是 alpha 混合如何在处理中工作的标准功能吗？有没有一种相对简单的方法来实现完全白色的背景（给定足够的步骤）？

我想象得到的颜色将是混合颜色的线性组合，这意味着限制应该是白色。也许非白色固定点是四舍五入的人工制品？

说明问题的示例代码：

void setup() {
  size(300,300);
  background(0);
  noStroke();
  frameRate(15);
}

void draw() {
  fill(255,10);
  rect(0,0,width,height);
  fill(255);
  rect(0,0,50,50); // for comparison to white
}

编辑：添加了java标签，希望得到更多关注

我正在使用 SDL 2.0 开发 2D 游戏，但我的照明系统出现问题。我想用雾填充屏幕并在玩家周围创建一个透明圆圈（左下）。我知道如何使用 SDL_BLENDMODE_MOD（右下）制作一个带有彩色灯光的暗室，但我无法制作雾气。我尝试使用我能想到的 SDL_SetRenderDrawBlendMode() 和 SDL_SetTextureBlendMode() 的每种组合在屏幕上分层多个纹理。

我已经搜查，在计算器上像发现解决这个，但他们使用SDL表面和预先制作的光图像。我将动态更改输入图像（右上角）的形状和大小，因此我需要更灵活的东西。

解决方案 1：我使用黑色圆圈和海军背景，而不是白色圆圈和黑色背景。然后我使用屏幕混合来混合它并得到我的雾（我已经在图像编辑器中测试过这个以获得左下角的图像）。不幸的是，SDL 没有 SDL_BLENDMODE_SCREEN。

解决方案2：创建一个半透明的雾层并在其中打一个全透明的孔。不幸的是，我不知道如何用透明孔覆盖纹理。我尝试将我的绘图模式设置为 SDL_BLENDMODE_NONE 并绘制一个完全透明的圆圈，但它只能创建完全不透明的圆圈。文档说我可以替换目标 alpha 但这似乎不起作用......

我正在使用 regl 渲染圆圈，并且有三个目标：

1. 画布应该是透明的，在其后面显示 HTML 内容。
2. 圆应该平滑地抗锯齿。
3. 重叠的圆圈应该看起来合理（混合颜色，没有角落显示）

到目前为止，我有这个：故障代码和演示。

更新：演示链接现在反映了有效的、已接受的答案。下面的代码不变。

索引.js

const regl = require('regl');
const glsl = require('glslify');
const vertexShader = glsl.file('../shaders/vertex.glsl');
const fragmentShader = glsl.file('../shaders/fragment.glsl');

// Create webgl context and clear.
const canvasEl = document.querySelector('canvas');
const app = regl({
  canvas: canvasEl,
  extensions: ['OES_standard_derivatives']
});
app.clear({color: [0, 0, 0, 0], depth: 1});

// Generate random points and colors.
const attributes = {position: [], color: []};
for (let i = 0; i < 100; i++) { …