glsl 着色器 - 颜色混合,正常模式(如在 Photoshop 中)

Posted

技术标签:

【中文标题】glsl 着色器 - 颜色混合,正常模式(如在 Photoshop 中)【英文标题】:glsl shader - color blend, normal mode (like in Photoshop) 【发布时间】:2015-08-28 16:06:19 【问题描述】:

我正在尝试创建混合 2 种颜色的效果(实际上是图像和颜色作为图像的叠加),就像在 Photoshop 中的“颜色叠加”和“正常混合”模式中一样

我正在使用 libgdx

这就是我目前所拥有的

attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;

uniform mat4 u_projTrans;

varying vec4 v_color;
varying vec2 v_texCoords;

void main()

   v_color = a_color;
   v_texCoords = a_texCoord0;
   gl_Position =  u_projTrans * a_position;

和片段

#ifdef GL_ES
#define LOWP lowp
precision mediump float;
#else
#define LOWP
#endif

varying LOWP vec4 v_color;
varying vec2 v_texCoords;

uniform sampler2D u_texture;

void main()

  vec4 curColor = texture2D(u_texture, v_texCoords);

  vec3 cA = curColor.rgb;//color A, background
  vec3 cB = v_color.rgb;//color B, overlay

  float aA = curColor.a;
  float aB = v_color.a;

  vec3 color = (cA * aA + cB * aB * (1 - aA)) / aA + aB * (1 - aA);
  float alpha = aA + aB * (1 - aA);
  gl_FragColor = vec4(color, alpha);

我使用 wikipedia 的颜色和 alpha 公式

当我使用这个着色器时,什么都没有发生,用这个着色器绘制的对象是透明的,不可见的

【问题讨论】:

【参考方案1】:
gl_FragColor = texture2D(u_texture, v_texCoords); 
gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(1.0), v_color.a);

这是解决方案,感谢@Tenfour04

【讨论】:

以上是关于glsl 着色器 - 颜色混合,正常模式(如在 Photoshop 中)的主要内容,如果未能解决你的问题,请参考以下文章

GLSL 1.5 无法获得颜色输入

GLSL/C++:自定义着色器的默认行为

GLSL将颜色数据从片段着色器发送到顶点着色器似乎总是等于0

glsl片段着色器颜色添加逻辑

片段着色器中设置的颜色未显示 GLSL 1.30

OpenGL/GLSL 颜色附件范围