1:材质和shader
Shader 是一种給GPU执行的代码，GPU的渲染流水线，为了方便开发人员定制效果,开放出接口給程序员编写代码来控制，这种程序叫作shader, shader开发语言，cocos采用的是GLSL编程语言。开发人员可以在下图顶点Shader和着色Shader来插入代码。
材质是一种配置文件，选择好一个Shader(算法), 并給这个Shader提供必要的参数,当游戏引擎绘制物体的时候，先读取材质，根据材质, 給GPU配置shader和shader要的参数, 这样管道流水线就可以完成的绘制出来这个物体。
2: 准备工作
准备一个子弹头模型(子弹列车^_^)
准备一个加速特效的火焰与透明渐变的贴图:
3: 实现的效果:
4: 上代码, 直接就可以使用:
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] }
mainTexture: { value: grey }
maskTexture: { value: grey }
run_time: { value: 0 }
speed: { value: 5 }
- name: transparent
passes:
- vert: unlit-vs:vert
frag: unlit-fs:frag
blendState:
targets:
- blend: true
blendSrc: src_alpha
blendDst: one
blendSrcAlpha: src_alpha
blendDstAlpha: one
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;
out vec2 v_uv1;
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;
vec4 tiing = vec4(1, 1, 0, 0);
v_uv1 = a_texCoord * tiing.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;
in vec2 v_uv1;
uniform sampler2D mainTexture;
uniform sampler2D maskTexture;
#endif
uniform uv_anim {
float run_time;
float speed;
};
#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);
vec4 mask = texture(maskTexture, v_uv1);
vec2 uv0 = v_uv;
#if USE_TEXTURE
uv0.y += (speed * run_time);
o *= texture(mainTexture, uv0);
#endif
#if USE_COLOR
o *= color;
#endif
#if USE_VERTEX_COLOR
o *= v_color;
#endif
o.a *= (mask.a);
return CCFragOutput(o);
}
}%
氮气加速特效详细的视频详细讲解，和项目工程，，今天的分享都到这里结束了，谢谢大家。
