cocosCreator材质effect丝带飘飞效果GLSL语法

使用GLSL可以制作出很多漂亮有趣的材质效果

首先要理解，GLSL管道是消耗的gpu，我们的材质文件处理的是每一个像素点的逻辑。如果图片是10px*10px像素，那么图像渲染的时候，会同时执行10*10=100个材质渲染。（具体基础知识都在百度里）

效果图

所以，我们在做效果的时候，思路要放在每一个像素的处理上，比如，把图像上的一个颜色像素从（x1,y1）移动到（x2,y2）的位置，实际上接下来就是在（x1,y1）的位置上渲染（x2,y2）的内容。而非css或者js里面的translate和moveTo()这么简单。

具体实现思路：（首先创建material和effect）并且绑定在元素上

图片的属性，习惯性的去掉packable的勾选

为了方便对比，我放了两个素材

我们要让丝带动起来，必不可少的需要一个时间变量cc_time

打开之前新建并且绑定好关系的sidai.effect文件，在顶点输入（vs）代码里面定义时间变量，并输出出去：

定义v_time将时间cc_time变量赋值给他，并且输出（out）出去。

在片段输出（fs）代码中，接收（in）顶点输出的时间变量，时间是动起来的最基本的因素了。

解决了动起来的问题，我们下面要根据管道渲染的思路，来考虑每一个像素点的渲染来实现位移。

如果丝带想要飘起来，首先我们需要一个把他变成弯曲形状的力，我们要将像素按照这个坐标来移动，将原本在（x,0）的像素，分别在x的时候，改变y的值，使其当前的y有正有负

代码里面的v_uv0只是当前像素的位置和。我们需要的是整个图像的所有像素位置（为的就是在x1和y1上渲染x2和y2的像素信息，v_uv0只是当前x1y1的）。只能从外面传入进来了。

传入纹理尺寸：

接收图像宽高：（fs）

使用texture方法来获取到图像的像素颜色信息（使得我在x1y1可以获得到图像的x2y2的信息），添加一个sin函数，就会变形了。
x轴不变，y轴发生形变

因为sin函数的结果永远会落在±1.0，所以振幅的大小只是倍数的问题了。

由于图像坐标系是0.0到1.0所以，sin（v_uv0）永远没办法超过1，所以，v_uv0要*10或者更多，这决定了曲线的（频率）。

现在的图像是静态的，为了使其动起来，我们会在x不变的情况上加入y高低的变化，所以依然，还是在sin里面（为了确保有规律的往复运动），加入v_time:

这里一定要是加减v_time，而不要乘除

我们来看一下加减和乘除的区别

乘除v_time

加减v_time

基本成形，但是存在一个问题，一般丝带的一头是固定好的。

这个5.0就是振幅的变化，当前情况永远是在0*5到1*5的振幅运动，

我们希望在x=0的振幅几乎为0，在x=1的时候振幅最大，所以我们需要一个增长函数，正好v_uv的x轴变化给我们提供了0-1的一个数值。

所以最终公式为：

o *= texture(texture, v_uv0.xy+ vec2(0.0,sin(v_uv0.x*10.0-(v_time.x*3.0))*(v_uv0.x*8.0)/textureSize.y));

效果呈现：

源码整理：cocos版本2.4.3，参数自行调整

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  

CCEffect %{

  techniques:

  - passes:

    - vert: vs

      frag: fs

      blendState:

        targets:

        - blend: true

      rasterizerState:

        cullMode: none

      properties:

        texture: { value: white }

        alphaThreshold: { value: 0.5 }

        # 纹理尺寸

        textureSize: { 

          value: [100.0, 100.0],

          editor: {

            tooltip: "纹理尺寸px（宽 x 高）"

          }

        }

}%

CCProgram vs %{

  precision highp float;

  #include 

  #include 

  in vec3 a_position;

  in vec4 a_color;

  out vec4 v_color;

  #if USE_TEXTURE

  in vec2 a_uv0;

  out vec2 v_uv0;

  #endif

  out vec4 v_time;

  void main () {

    vec4 pos = vec4(a_position, 1);

    #if CC_USE_MODEL

    pos = cc_matViewProj * cc_matWorld * pos;

    #else

    pos = cc_matViewProj * pos;

    #endif

    #if USE_TEXTURE

    v_uv0 = a_uv0;

    #endif

    v_color = a_color;

    v_time = cc_time;

    gl_Position = pos;

  }

}%

CCProgram fs %{

  precision highp float;

  #include 

  #include 

  in vec4 v_color;

  #if USE_TEXTURE

  in vec2 v_uv0;

  uniform sampler2D texture;

  #endif

  in vec4 v_time;

  // 接收外部变量

  uniform GaussianBlur {

    // 纹理尺寸（宽 x 高）（px）

    vec2 textureSize;

  };

  void main () {

    vec4 o = vec4(1, 1, 1, 1);

    ALPHA_TEST(o);

    o *= texture(texture, v_uv0.xy+ vec2(0.0,sin(v_uv0.x*10.0-(v_time.x*3.0))*(v_uv0.x*8.0)/textureSize.y));

    gl_FragColor = o;

  }

}%