Cocos 的3D捕鱼达人里面有鱼背上的波光(图一)，今天就給大家讲解一下，这种技术细节的实现---》UV动画。
1: 什么是uv动画?
就是将两个纹理合成以后，不断改变一个纹理的uv坐标，让这个纹理的贴图位置不断改变而形成UV动画。比如火焰，河流，都可以采用这样的技术来实现。
2: cocos creator shader 为什么要重点学习?
未来毫无疑问，微信小游戏会越来越大，越来越精美，shader开发也是未来的一个核心，因为它能定制精美的画面，和完成精美的特效。
3: cocos creator Shader要使用那个版本?
cocos creator Shader要使用2.1.x这个版本，目前使用最新的2.1.2这个版本会比较好一些。Cocos creator 2.0以下的版本都不支持 材质 + shader
4: cocos creator 材质和shader
Shader 是一种給GPU执行的代码，GPU的渲染流水线，为了方便开发人员定制效果,开放出接口給程序员编写代码来控制，这种程序叫作shader, shader开发语言，cocos采用的是GLSL编程语言。开发人员可以在下图顶点Shader和着色Shader来插入代码。
材质是一种配置文件，选择好一个Shader(算法), 并給这个Shader提供必要的参数, 材质被关联到Sprite, MeshRenderer等组件里面，当游戏引擎绘制物体的时候，先读取材质，根据材质, 給GPU配置shader和shader要的参数, 这样管道流水线就可以完成的绘制出来这个物体。
5: creator 3D Shader的模板结构详解:
%{
techniques: [
{
passes: [
{
vert: vs // 顶点shader代码模块
frag: fs // 着色shader代码模块
cullMode: none
depthTest: true
depthWrite: true
blend: true
}
]
layer: 0
}
]
properties: { // 材质上的属性变量，可以在材质属性编辑器上看到变量作可视化编辑
diffuseTexture: {
type: sampler2D
value: null
}
}
%}
%% vs { // 顶点shader
precision highp float;
attribute vec3 a_position; // 从渲染管道获取的顶点坐标
attribute mediump vec2 a_uv0; // 从渲染管道获取的纹理坐标;
attribute lowp vec4 a_color; // 从渲染管道获取的顶点颜色
uniform mat4 cc_matWorld; //引擎绘制物体时设置当前物体模型到世界的变换矩阵
uniform mat4 cc_matViewProj; // 引擎绘制物体时设置世界坐标到投影坐标系的变换
varying lowp vec4 v_color; // 顶点shader传递給着色shader的顶点颜色
varying mediump vec2 v_uv0; // 顶点shader传递給着色shader的顶点纹理坐标
void main () {
vec4 position = vec4(a_position, 1);
v_uv0 = a_uv0;
v_color = a_color;
// 将模型坐标变换到透视投影坐标，返回給渲染管道;
gl_Position = cc_matViewProj * cc_matWorld * position;
}
}
%% fs { // 着色shader
precision highp float;
uniform sampler2D diffuseTexture; // 用户指定的模型贴图
varying lowp vec4 v_color; // 顶点shader传递过来的颜色
varying mediump vec2 v_uv0; // 顶点shader传递过来的纹理坐标
void main () {
// 根据纹理坐标获取颜色
vec4 col = texture2D(diffuseTexture, v_uv0);
gl_FragColor = col; // 将着色返回給渲染管道
}
}
6: uv动画shader的实现:
%{
techniques: [
{
passes: [
{
vert: vs
frag: fs
cullMode: none
depthTest: true
depthWrite: true
blend: true
}
]
layer: 0
}
]
properties: {
diffuseTexture: {
type: sampler2D
value: null
}
// sub_tex, 存放第二个纹理
sub_tex: {
type: sampler2D
value: null
}
// 程序设置給shader当前运行时间;
run_time: {
type: number
value: 0
}
}
%}
%% vs {
precision highp float;
attribute vec3 a_position;
attribute mediump vec2 a_uv0;
attribute lowp vec4 a_color;
uniform mat4 cc_matWorld;
uniform mat4 cc_matViewProj;
varying lowp vec4 v_color;
varying mediump vec2 v_uv0;
void main () {
vec4 position = vec4(a_position, 1);
v_uv0 = a_uv0;
v_color = a_color;
gl_Position = cc_matViewProj * cc_matWorld * position;
}
}
%% fs {
precision highp float;
uniform sampler2D diffuseTexture;
uniform sampler2D sub_tex;
uniform float run_time;
varying lowp vec4 v_color;
varying mediump vec2 v_uv0;
void main () {
// 根据时间来生成坐标偏移，时间不断变化，坐标也就变化，形成了uv动画
vec2 offset = vec2(run_time, run_time);
// 第二章贴图的颜色采样
vec4 light = texture2D(sub_tex, v_uv0 + offset);
vec4 col = texture2D(diffuseTexture, v_uv0);
gl_FragColor = col + light;
}
}
6: 程序如何控制Shader代码
cc.Class({
extends: cc.Component,
properties: {
},
// LIFE-CYCLE CALLBACKS:
// onLoad () {},
start () {
this.now_time = 0;
// 获取MeshRenderer组件，去找到材质对象;
this.mr = this.getComponent(cc.MeshRenderer);
},
update (dt) {
this.now_time += dt;
// 获取材质对象;
let material = this.mr.sharedMaterials[0];
// 通过材质来修改shader里面的变量值run_time,
// shader里面的run_time跟着改变了;
material.setProperty('run_time', this.now_time);
// 将材质更新到MeshRenderer的材质对象上
this.mr.setMaterial(0, material);
},
});
UV shader动画，的视频详细讲解，和项目工程，可以加学习讨论群，今天的分享都到这里结束了，谢谢大家。需要视频课程的可以点击下面链接加群 点击链接加入群聊【cocos/unity交流群】
