cocos creator | 使用纹理实现扫光效果- 流光shader

cocos creator 专栏收录该内容
28 篇文章 3 订阅

​01

效果预览

02

实现原理

uv 坐标:

纹理的百分比坐标

在 creator 中,uv 坐标的原点在左上角,u轴向右,v轴向下,范围是 0-1

使用纹理坐标获取纹理颜色叫做采样(Sampling)

根据时间控制流光纹理的 uv 坐标,获取其 rgba,然后与目标纹理 uv 坐标的 rgba 叠加,实现流动的效果

03

实现步骤

1创建材质

在资源管理器面板合适的目录右键:

新建 Effect:

//扫光-纹理CCEffect %{  techniques:  - passes:    - vert: vs      frag: fs      blendState:        targets:        - blend: true      rasterizerState:        cullMode: none      properties:        texture: { value: white }        u_fluxayTexture: { value: white }        u_time: { value: 0 }}%// Vertex Shader(顶点着色器) // 将顶点从模型空间坐标系统转化到屏幕空间坐标系统// 顶点着色器分为输入和输出两部分// 负责的功能是把输入的数据进行矩阵变换位置,计算光照公式生成逐顶点颜⾊,⽣成/变换纹理坐标// 并且把位置和纹理坐标这样的参数发送到片段着色器CCProgram vs %{  precision highp float;  #include <cc-global>  #include <cc-local>  // 输入的顶点坐标  in vec3 a_position;  // 输入的顶点颜色  in vec4 a_color;  // 输出的顶点颜色  out vec4 v_color;  #if USE_TEXTURE    // 输入的纹理坐标    // UV坐标:原点在左上角,u轴是向右,v轴是向下,范围是0-1    in vec2 a_uv0;    // 输出的纹理坐标    out vec2 v_uv0;  #endif  void main () {    mat4 mvp;        #if CC_USE_MODEL      mvp = cc_matViewProj * cc_matWorld;    #else      mvp = cc_matViewProj;    #endif    v_uv0 = a_uv0;    v_color = a_color;    gl_Position = mvp * vec4(a_position, 1);  }}%// Fragment Shader(片段着色器)// 片元着色器的作用是处理由光栅化阶段生成的每个片元,最终计算出每个像素的最终颜色(RGBA)CCProgram fs %{  precision highp float;  #include <alpha-test>  #include <texture>    in vec4 v_color;  in vec2 v_uv0;  uniform sampler2D texture;  uniform sampler2D u_fluxayTexture;  //流光纹理  // 自定义属性  // 所有非 sampler 的 uniform 都必须以 UBO 形式声明  // UBO 成员声明类型和顺序有严格的校验机制,以排除 GL 标准下隐式布局对齐带来的内存消耗  uniform ARGS {    float u_time;  };  void main () {    vec4 o = vec4(1, 1, 1, 1);    #if USE_TEXTURE      // texture.inc 核心函数      // o = texture2D(texture, v_uv0);      // texture: 纹理,v_uv0: 纹理坐标,通过 GLSL 的内建函数 texture2D 来获取纹理上对应UV坐标的颜色(RGBA)      o = texture2D(texture, v_uv0);    #endif    // 纹理颜色和顶点颜色(节点颜色)叠加得到最终颜色    o *= v_color;    // alpha-test.inc 核心函数    // if (color.a < alphaThreshold) discard;    // discard:退出片段着色器,不执行后面的片段着色操作,片段也不会写入帧缓冲区    ALPHA_TEST(o);    // 在底图不透明的地方叠加流光纹理的颜色    if(o.a >= 1.0) {          // 根据时间控制流光纹理的UV      vec2 fluxayUV = vec2(v_uv0.x, v_uv0.y);      fluxayUV.x -= u_time - 1.0;      // 获取流光纹理上UV的颜色      vec4 fluxay = texture2D(u_fluxayTexture, fluxayUV);      // 叠加颜色      gl_FragColor = o + fluxay;    } else {      gl_FragColor = o;    }  }}%

新建 Material,在其 属性检查器 的 Effect 下拉框中选择刚刚创建 Effect 选项,然后在纹理的位置拖入流光纹理,点击应用

然后将该材质拖入到 sprite 组件的材质位置

2编写脚本组件

接下来需要编写脚本组件,将时间传递给 effect

const { ccclass, property } = cc._decorator;@ccclassexport default class FluxayTexture extends cc.Component {    private _speed: number = 1;    private _time: number = 0;    private _material: cc.MaterialVariant;    onLoad() {        // 获取材质        this._material = this.node.getComponent(cc.Sprite).getMaterial(0);    }    update(dt) {        if (this._time > 2) {            this._time = 0;        }        this._material.setProperty("u_time", this._time);        this._time += dt * this._speed;    }}

获取源码请在公众号回复:

扫光

更多教程

请扫码关注

  • 0
    点赞
  • 4
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值