creator shader:从零开始 第二篇,做个动态的光影

江湖规矩,看到大佬的帖子,先回复再看

作业抄完,引擎上显示的是正常效果,浏览器运行起来就是一个纯色的。
有了解我这是出了什么问题的吗T.T
彩虹的那个作业抄着好好的。
用的是2.4.6版本。

:cow: :cow: :cow:

图片选项里 packable不能选中

了解! :7:

mark 膜拜大佬!

999999mark。

跟进,马上抄作业!

我来交作业了

neon.effect

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        colorLeft: {  value: [0.80,0.27,0.28,1.],editor: { type: "color"}}
        colorRight: { value: [0.26,0.33,0.78,1.],editor: { type: "color"}}
        color1: { value: [0.65,0.20,0.81,1.],editor: { type: "color"}}
        color2: { value: [0.68,0.71,0.29,1.],editor: { type: "color"}}
        color3: { value: [1.,0.03,0.11,1.],editor: { type: "color"}}
        alphaThreshold: { value: 0.5 }
        u_time: { value : 0.0 }
}%

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
  in vec2 a_uv0;
  out vec2 v_uv0;
  #endif

  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;

    gl_Position = pos;
  }
}%

CCProgram fs %{
  precision highp float;

  #include <alpha-test>
  #include <texture>

  in vec4 v_color;

  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;
  #endif

  
uniform Constantsl {
  vec4 colorLeft;
  vec4 colorRight;
  vec4 color1;
  vec4 color2;
  vec4 color3;
  float u_time;
};

  float drawGird(vec2 p){
    if(p.x > 0. && p.x < 0.01){
      return 1.;
    }
    if(p.x > 0.99 && p.x < 1.){
      return 1.;
    }
    if(p.y > 0. && p.y < 0.01){
      return 1.;
    }
    if(p.y > 0.99 && p.y < 1.){
      return 1.;
    }
    return 0.;
  }

  float hashOld12( vec2 p )
  {
    return fract( sin(dot(p,vec2(12.9898, 78.233))) * 43758.5453 );
  }

  float drawLayer( float scale, vec2 uv )
  {
    float co = 0.;
    vec2 uv1 = uv;
    uv1 *= scale;

    vec2 hvtmp = floor( uv1 );
    float n = hashOld12( vec2(hvtmp.y) );
    uv1.x += n;

    vec2 hv = floor( uv1 );
    vec2 fr = fract( uv1 );

    float circle = distance( fr, vec2(.5) );
    float radius = hashOld12( hv );
    float strength = radius;
    radius = radius * 0.3 + 0.1;
    float f1 = mod( floor(radius*10.), 2. );
    radius *= f1;
    //circle = step( radius, circle );
    circle = smoothstep(radius - .02 * scale,radius,circle);
    circle = 1. - circle;
    strength *= 1. / scale * 6.;
    circle *= strength;

    co += circle;
    //co += drawGird( fr ); //取消格子线
    return co;
  }

  void main () {
    //绘制格子以及圆
    // vec4 o = vec4( 0. );
    // //o.xyz = vec3( hashOld12(v_uv0) );
    // o.xyz += drawLayer( 10., v_uv0 );
    // o.a = 1.;
    // gl_FragColor = o;

    //分层绘制
    vec2 uv = vec2(v_uv0.x,v_uv0.y);
    vec3 co = vec3( 0. );
    co += mix( colorLeft, colorRight, uv.x ).xyz;

    vec4 carr[3];
    carr[0] = color1;
    carr[1] = color2;
    carr[2] = color3;

    for( int i=0; i<3; ++i ){
      float idx = float( i );
      float p1 = idx * 5. + 3.;
      vec2 uvoff = vec2( hashOld12( vec2(p1) ), hashOld12( vec2( p1 * 10.0 ) ) );
      uvoff = uvoff * u_time * .1;

      vec2 p2 = vec2( uv.x, uv.y ) + uvoff;
      float layer = drawLayer( p1, p2 );
      co += layer * carr[i].xyz;
    }

    gl_FragColor = vec4( co, 1. );
  }
}%

neon.ts

const {ccclass, property} = cc._decorator;
@ccclass
export default class neon extends cc.Sprite {

    _utime : number = 0;
    update(){
        this.getMaterial(0).setProperty( "u_time", this._utime );
        this._utime += 0.01;
    }
}

neon

1赞

8月11日至今

怎么让背景变得透明,只显示移动的点呢?

赞赞赞,能看完的人不多,自己动手敲一遍的人就更少了

删掉上面的,gl_FragCololr.a 三层的透明度总和大于0 a = 1,否则 = 0

交作业
image
一下难了好多啊,虽然照着抄出来了,还是挺迷糊的

疑问可以发一下,可能你的疑问就是大家的疑问。

image
引个流哈,开公众号了。

1赞

test 交作业了

圆圈变形了?

可以看到,前面的圆圈都是个椭圆,为啥呢,因为我的妞的 图片宽!=高。

	// 这一行放在main函数外面啊 传入图片的真实宽高,缩放off的uv
	#define iResolution vec2(647.,938.)

	.........下面是main函数里面的修改
	vec2 off = p - uv;
    off.x *= iResolution.x / iResolution.y;

在这里插入图片描述
嘿嘿嘿,圆不圆?

newTest
果然有用,大佬666

大ip项目啊 阔以阔以