先来看看效果
CCEffect %{
techniques:
- name: opaque
passes:
- vert: unlit-vs:vert
frag: unlit-fs:frag
properties: &props
color: { value: [1, 1, 1, 1], inspector: { type: color } }
tilingOffset: { value: [1, 1, 0, 0] }
sineAmpl: { value: [0.5, 0.5, 0.5, 0.5] }
sineFreq: { value: [10, 10, 10, 10] }
multiplier: { value: 2.0 }
mainTexture: { value: grey }
deltailTexture: { 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 vec4 v_uv;
uniform TexCoords {
vec4 tilingOffset;
vec4 sineAmpl;
vec4 sineFreq;
float multiplier;
};
#endif
highp vec4 vert () {
vec4 position;
CCVertInput(position);
highp mat4 matWorld;
CCGetWorldMatrix(matWorld);
highp vec4 pos = cc_matProj * (cc_matView * matWorld) * position;
#if USE_VERTEX_COLOR
v_color = a_color;
#endif
#if USE_TEXTURE
v_uv.xy = a_texCoord;
v_uv.zw = a_texCoord;
#if FLIP_UV
v_uv.y = 1.0 - v_uv.y;
v_uv.w = 1.0 - v_uv.w;
#endif
v_uv.xy += fract(tilingOffset.xy * cc_time.x);
v_uv.zw += fract(tilingOffset.zw * cc_time.x);
v_uv.x += sin(cc_time.x * sineFreq.x) * sineAmpl.x;
v_uv.y += sin(cc_time.x * sineFreq.y) * sineAmpl.y;
v_uv.z += sin(cc_time.x * sineFreq.z) * sineAmpl.z;
v_uv.w += sin(cc_time.x * sineFreq.w) * sineAmpl.w;
v_color *= multiplier;
#endif
return pos;
}
}%
CCProgram unlit-fs %{
precision mediump float;
#include <output>
#if USE_TEXTURE
in vec4 v_uv;
uniform sampler2D mainTexture;
uniform sampler2D deltailTexture;
#endif
#if USE_COLOR
uniform Constant {
vec4 color;
};
#endif
#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.xy) * texture(deltailTexture, v_uv.zw);
#endif
#if USE_COLOR
o *= color;
#endif
#if USE_VERTEX_COLOR
o *= v_color;
#endif
return CCFragOutput(o);
}
}%
烟雾效果.zip (213.1 KB)
原理：跟ShadowGun的天空盒shader一样，用两张图片的移动做成这个效果。不同的地方在于，用于blend跟正弦函数做了移动变换。
使用办法：
- 在项目资源里创建一个Effect文件，然后把上面的的shader代码全放进去
- 再创建一个Material文件，然后选中Material文件，在右边属性栏处，Effect选择第1步创建的Effect
- 再把贴图拉进MainTexture里面。其它参数可以自行修改试试，会出现不同的效果。
- 最后再把这个材质拉到你的对象材质上。
