原理比较简单,有三:
1.将Shader里的时间转换成正小数,可以通过abs(sin(x))得到。。
2.拿三颜色中的某一个颜色值来跟时间小数做比较,如果小于时间小数,则直接丢弃。
3.再以小差值,给熔解的边框换成某一种颜色。
CCEffect %{
techniques:
- name: opaque
passes:
- vert: unlit-vs:vert
frag: unlit-fs:frag
properties: &props
color: { value: [1, 1, 1, 1], inspector: { type: color, displayName : "溶解颜色" } }
Magnification: { value: 0.5, inspector: { displayName : "倍率" } }
tilingOffset: { value: [1, 1, 0, 0] }
mainTexture: { value: grey }
- name: transparent
passes:
- vert: unlit-vs:vert
frag: unlit-fs:frag
blendState:
targets:
- blend: true
blendSrc: src_alpha
blendDst: one_minus_src_alpha
blendSrcAlpha: src_alpha
blendDstAlpha: one_minus_src_alpha
properties: *props
}%
CCProgram unlit-vs %{
precision mediump float;
#include <cc-global>
#include <cc-local-batch>
#include <input>
#if USE_VERTEX_COLOR
in vec4 a_color;
out vec4 v_color;
#endif
#if USE_TEXTURE
in vec2 a_texCoord;
out vec2 v_uv;
uniform TexCoords {
vec4 tilingOffset;
};
#endif
highp vec4 vert () {
vec4 position;
CCVertInput(position);
highp mat4 matWorld;
CCGetWorldMatrix(matWorld);
highp vec4 pos = cc_matProj * (cc_matView * matWorld) * position;
#if USE_TEXTURE
v_uv = a_texCoord;
#if FLIP_UV
v_uv.y = 1.0 - v_uv.y;
#endif
v_uv = v_uv * tilingOffset.xy + tilingOffset.zw;
#endif
#if USE_VERTEX_COLOR
v_color = a_color;
#endif
return pos;
}
}%
CCProgram unlit-fs %{
precision mediump float;
#include <output>
#if USE_TEXTURE
in vec2 v_uv;
uniform sampler2D mainTexture;
#endif
uniform Constant {
vec4 color;
float Magnification;
};
#if USE_VERTEX_COLOR
in vec4 v_color;
#endif
vec4 frag () {
vec4 o = vec4(1, 1, 1, 1);
#if USE_TEXTURE
o *= texture(mainTexture, v_uv);
#endif
#if USE_VERTEX_COLOR
o *= v_color;
#endif
float time = abs(sin(cc_time.x * Magnification));
float height = o.g;
if(height < time) {
discard;
}
if(height < time + 0.04) {
o.xyz = color.xyz;
}
return CCFragOutput(o);
}
}%
看了下,代码没变形,就没重新传了。