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动画,的视频详细讲解,和项目工程,可以加学习讨论群,今天的分享都到这里结束了,谢谢大家。点击链接加入群聊【Unity/Cocos交流群】

推荐阅读更多精彩内容