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