Cocos Creator 最新3D shader UV动画的实现

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交流群】

推荐阅读更多精彩内容