开发日记——修改shader实现控制不规则图形的颜色信息
·
问题:一张同样的不规则图片需要切换多种不同的颜色,给定了颜色信息。
解决方法:复制一份sprite组件使用的默认shader(builtin-sprite),修改以下内容
CCProgram sprite-fs %{
precision highp float;
#include <builtin/internal/embedded-alpha>
#include <builtin/internal/alpha-test>
in vec4 color;
#if USE_TEXTURE
in vec2 uv0;
#pragma builtin(local)
layout(set = 2, binding = 12) uniform sampler2D cc_spriteTexture;
#endif
vec4 frag () {
vec4 o = vec4(1, 1, 1, 1);
#if USE_TEXTURE
o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);
#if IS_GRAY
float gray = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
o.r = o.g = o.b = gray;
#endif
#endif
o *= color;
ALPHA_TEST(o);
return o;
}
}%
修改后内容:
CCProgram sprite-fs %{
precision highp float;
#include <builtin/internal/embedded-alpha>
#include <builtin/internal/alpha-test>
in vec4 color;
#if USE_TEXTURE
in vec2 uv0;
#pragma builtin(local)
layout(set = 2, binding = 12) uniform sampler2D cc_spriteTexture;
#endif
vec4 frag () {
vec4 o = vec4(1, 1, 1, 1);
#if USE_TEXTURE
//只对当前像素的透明度设置为纹理对应像素的透明度,丢弃颜色信息
o.a *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0).a;
#if IS_GRAY
float gray = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
o.r = o.g = o.b = gray;
#endif
#endif
//使用设置的color属性的颜色信息
o *= color;
ALPHA_TEST(o);
return o;
}
}%
这样可以使图片原本透明的像素依旧透明,不透明的像素完全使用color对应的颜色,实现不规则图形精确控制颜色
更多推荐
所有评论(0)