shader uv滚动动画 箭头 行军线 marchline 谁有案例啊 求高手指点迷津

// 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: while }
        texture2: { value: while }
        time: { value: 0.5 }
}%
 
 
CCProgram vs %{
  precision highp float;
 
  #include <cc-global>
  #include <cc-local>
 
  in vec3 a_position;
  in vec4 a_color;
  out vec4 v_color;
 
  in vec2 a_uv0;
  out vec2 v_uv0;
 
  void main () {
    vec4 pos = vec4(a_position, 1);
 
    pos = cc_matViewProj * cc_matWorld * pos;
 
    v_uv0 = a_uv0;
    v_color = a_color;
 
    gl_Position = pos;
  }
}%
 
 
CCProgram fs %{
  precision highp float;
 
  #define TAU 6.28318530718
  #define TILING_FACTOR 1.0
  #define MAX_ITER 8
 
  in vec4 v_color;
  in vec2 v_uv0;
 
  uniform sampler2D texture;
  uniform sampler2D texture2;
  uniform TIME {
    float time;
  };
 
 
  void main () {
    vec2 offset = vec2(time,0);

    vec4 col = texture(texture,  v_uv0+offset);
    vec4 col2 = texture(texture2, v_uv0);
    gl_FragColor = col + col2;
  }
}%

const { ccclass, property } = cc._decorator;

@ccclass
export default class spritearrow extends cc.Component {

  @property
  speed = 1

  now_time = 0
  mr
  start() {
    this.now_time = 0;
    // 获取MeshRenderer组件,去找到材质对象;
    this.mr = this.getComponent(cc.Sprite);
  }

  update(dt) {

    this.now_time += dt * this.speed;

    if (this.now_time > 0.03) {
      this.now_time = 0.01
    }
    // 获取材质对象;

    let material = this.mr.getMaterial(0)

    // 通过材质来修改shader里面的变量值run_time,

    // shader里面的run_time跟着改变了;

    material.setProperty('time', this.now_time);

    // 将材质更新到MeshRenderer的材质对象上
    //cc.log(this.now_time, material.getProperty('time'))

    this.mr.setMaterial(0, material);

  }
}

我弄出来的一闪一闪 还会变色太奇怪了

marchline.zip (1003.2 KB)


1赞

这里删掉试试

谢谢 参考了下 没弄出来

我是重复让那个线出来而已

这样的吗?

首先要把图片的wrapMode设置成repeat

然后着色器这样写

vec2 uv = vec2(fract(v_uv0.x - time*5.), v_uv0.y); color *= texture2D(texture, uv);

他着色器写的没问题, 最最组重要的就是wrapMode设置成repeat
然后他就会发现,他的方向是从右到坐的。。。

我试了一下警告webgl 不支持npot纹理的wrpmode设置成repeat

MARK!

这个怎么实现的

大佬怎么实现的

wrpmode在这里设置。

顶一下 :joy:

1赞

想要图片早说啊

:+1::+1::+1::+1::+1::+1::+1::+1::+1:

审核流鼻血

你号没了。