Cocos 的3D捕魚(yú)達(dá)人里面有魚(yú)背上的波光(圖一)座韵，今天就給大家講解一下，這種技術(shù)細(xì)節(jié)的實(shí)現(xiàn)---》UV動(dòng)畫(huà)。
1: 什么是uv動(dòng)畫(huà)?
??就是將兩個(gè)紋理合成以后，不斷改變一個(gè)紋理的uv坐標(biāo)憔涉，讓這個(gè)紋理的貼圖位置不斷改變而形成UV動(dòng)畫(huà)。比如火焰析苫，河流，都可以采用這樣的技術(shù)來(lái)實(shí)現(xiàn)穿扳。
2: cocos creator shader 為什么要重點(diǎn)學(xué)習(xí)?
??未來(lái)毫無(wú)疑問(wèn)衩侥，微信小游戲會(huì)越來(lái)越大，越來(lái)越精美矛物，shader開(kāi)發(fā)也是未來(lái)的一個(gè)核心茫死，因?yàn)樗芏ㄖ凭赖漠?huà)面，和完成精美的特效履羞。
3: cocos creator Shader要使用那個(gè)版本?
??cocos creator Shader要使用2.1.x這個(gè)版本峦萎，目前使用最新的2.1.2這個(gè)版本會(huì)比較好一些。Cocos creator 2.0以下的版本都不支持材質(zhì)+?shader
4: cocos creator 材質(zhì)和shader
??Shader 是一種給GPU執(zhí)行的代碼忆首，GPU的渲染流水線爱榔，為了方便開(kāi)發(fā)人員定制效果,開(kāi)放出接口給程序員編寫(xiě)代碼來(lái)控制，這種程序叫作shader, shader開(kāi)發(fā)語(yǔ)言糙及，cocos采用的是GLSL編程語(yǔ)言详幽。開(kāi)發(fā)人員可以在下圖頂點(diǎn)Shader和著色Shader來(lái)入代碼。
材質(zhì)是一種配置文件浸锨，選擇好一個(gè)Shader(算法), 并給這個(gè)Shader提供必要的參數(shù),?材質(zhì)被關(guān)聯(lián)到Sprite, MeshRenderer等組件里面唇聘，當(dāng)游戲引擎繪制物體的時(shí)候，先讀取材質(zhì)柱搜，根據(jù)材質(zhì),?給GPU配置shader和shader要的參數(shù),?這樣管道流水線就可以完成的繪制出來(lái)這個(gè)物體迟郎。
5: creator 3D Shader的模板結(jié)構(gòu)詳解:
??%{
??techniques: [
????{
??????passes: [
????????{
??????????vert: vs ?// 頂點(diǎn)shader代碼模塊
??????????frag: fs ?// 著色shader代碼模塊
??????????cullMode: none
??????????depthTest: true
??????????depthWrite: true
??????????blend: true
????????}
??????]
??????layer: 0
????}
??]
??properties: { // 材質(zhì)上的屬性變量，可以在材質(zhì)屬性編輯器上看到變量作可視化編輯
????diffuseTexture: {
??????type: sampler2D
??????value: null
????}
??}
%}
%% vs { // 頂點(diǎn)shader
precision highp float;
attribute vec3 a_position; // 從渲染管道獲取的頂點(diǎn)坐標(biāo)
attribute mediump vec2 a_uv0; // 從渲染管道獲取的紋理坐標(biāo);
attribute lowp vec4 a_color; // 從渲染管道獲取的頂點(diǎn)顏色
uniform mat4 cc_matWorld; ?//引擎繪制物體時(shí)設(shè)置當(dāng)前物體模型到世界的變換矩陣
uniform mat4 cc_matViewProj; // 引擎繪制物體時(shí)設(shè)置世界坐標(biāo)到投影坐標(biāo)系的變換
varying lowp vec4 v_color; // 頂點(diǎn)shader傳遞給著色shader的頂點(diǎn)顏色
varying mediump vec2 v_uv0; // 頂點(diǎn)shader傳遞給著色shader的頂點(diǎn)紋理坐標(biāo)
void main () {
??vec4 position = vec4(a_position, 1);
??v_uv0 = a_uv0;
??v_color = a_color;
??// 將模型坐標(biāo)變換到透視投影坐標(biāo)聪蘸，返回給渲染管道;
??gl_Position = cc_matViewProj * cc_matWorld * position;
}
}
%% fs { // 著色shader
precision highp float;
uniform sampler2D diffuseTexture; // 用戶(hù)指定的模型貼圖
varying lowp vec4 v_color; // 頂點(diǎn)shader傳遞過(guò)來(lái)的顏色
varying mediump vec2 v_uv0; // 頂點(diǎn)shader傳遞過(guò)來(lái)的紋理坐標(biāo)
void main () {
??// 根據(jù)紋理坐標(biāo)獲取顏色
??vec4 col = texture2D(diffuseTexture, v_uv0);
??gl_FragColor = col; // 將著色返回給渲染管道
}
}
6: uv動(dòng)畫(huà)shader的實(shí)現(xiàn):
?%{
??techniques: [
????{
??????passes: [
????????{
??????????vert: vs ?
??????????frag: fs
??????????cullMode: none
??????????depthTest: true
??????????depthWrite: true
??????????blend: true
????????}
??????]
??????layer: 0
????}
??]
??properties: {
????diffuseTexture: {
??????type: sampler2D
??????value: null
????}
//?sub_tex, 存放第二個(gè)紋理
sub_tex: {
??type: sampler2D
??????value: null
}
// 程序設(shè)置給shader當(dāng)前運(yùn)行時(shí)間;
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 () {
??// 根據(jù)時(shí)間來(lái)生成坐標(biāo)偏移宪肖，時(shí)間不斷變化表制，坐標(biāo)也就變化，形成了uv動(dòng)畫(huà)
??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組件匈庭，去找到材質(zhì)對(duì)象;
????????this.mr = this.getComponent(cc.MeshRenderer);
????},
????update (dt) {
????????this.now_time += dt;
????????// 獲取材質(zhì)對(duì)象;
????????let material = this.mr.sharedMaterials[0];
????????// 通過(guò)材質(zhì)來(lái)修改shader里面的變量值run_time,
????????// shader里面的run_time跟著改變了;
????????material.setProperty('run_time', this.now_time);
????????// 將材質(zhì)更新到MeshRenderer的材質(zhì)對(duì)象上
????????this.mr.setMaterial(0, material);
????},
});
UV shader動(dòng)畫(huà)夫凸，的視頻詳細(xì)講解，和項(xiàng)目工程阱持，可以加學(xué)習(xí)討論群夭拌，今天的分享都到這里結(jié)束了，謝謝大家衷咽。點(diǎn)擊鏈接加入群聊【Unity/Cocos交流群】
