creator shader:从零开始，做个三层的火焰动画

交作业
flame.effect

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        alphaThreshold: { value: 0.5 }
        noiseTex: { value : white }
        u_brightness : { value : [0.90,0.42,0.42,1.], editor: { type: "color" } }
        u_middle : { value : [0.14,1.,0.,1.], editor: { type: "color" } }
        u_dark : { value : [0.39,0.85,0.82,1.], editor: { type: "color" } }
}%


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>
  #include <cc-global>


  varying lowp vec4 v_color;
  
  #if USE_TEXTURE
  varying mediump vec2 v_uv0;
  uniform sampler2D texture;
  #endif

  uniform sampler2D noiseTex;
  uniform Constants1 {
    vec4 u_brightness;
    vec4 u_middle;
    vec4 u_dark;
    float u_time;
  };

  varying lowp vec4 v_wp;

  void main () {    
    vec2 uv = v_uv0;
    uv.y += cc_time.x * .6;
    vec3 color = vec3(0.);

    float n = texture2D( noiseTex, uv ).x;

    float p1 = smoothstep( 0., .7, v_uv0.y );
    float p2 = smoothstep( 0., .7, v_uv0.y - .25 );
    float p3 = smoothstep( 0., .7, v_uv0.y - .4 );

    //color = vec3(p1);

    float f1 = step( n, p1 );
    float f2 = step( n, p2 );
    float f3 = step( n, p3 );
    float r1 = f1 - f2;
    float r2 = f2 - f3;
    float r3 = f3;
    //color = vec3( r3 );
    color = (u_dark*r3 + u_middle*r2 + u_brightness*r1).rgb;

    //gl_FragColor = vec4( color, 1. );
    gl_FragColor = vec4( color, f1 );
  }
}%

找了些noise, 还是例子中的最合适

你真的不考虑调个正常点的火颜色吗

你要这么说的话,火焰颜色其实不是均匀的,单一色没法表现真实火焰颜色的.

image740×629 105 KB

稍微调了下色值

    u_brightness : { value : [0.95,0.19,0.,1.], editor: { type: "color" } }
    u_middle : { value : [0.99,0.65,0.,1.], editor: { type: "color" } }
    u_dark : { value : [0.98,0.91,0.07,1.], editor: { type: "color" } }

    u_brightness : { value : [0.88,0.29,0.16,1.], editor: { type: "color" } }
    u_middle : { value : [0.96,0.92,0.45,1.], editor: { type: "color" } }
    u_dark : { value : [1.,1.,1.,1.], editor: { type: "color" } }

牛批牛批～
需要定制噪声图的同学请戳：【插件】噪声生成器[make_noise]

持续关注大佬Shader教程中

奇了怪了，自己敲了一边发现那个火就动了下，后面复制bailufeiba同学的代码也是如此

这个cc_time 在编辑器也在变化的。你拖拽个什么东西试试，应该火焰就会一直动

这个是炫富噢。。能不能私聊分享我一份。

dforel@企鹅.com

引个流哈，回复 噪声图1号 获取噪声图zip包 下载链接。

啊。懂了少了这一步

mark!

交作业

void main() {
    vec2 uv = v_uv0;
    uv.y += u_time * .6;
    vec3 color = vec3(0.);
    // 噪声图取样
    float n = texture2D(noiseTex,uv).x;

    // 三个渐变值 分别显示到屏幕上看一下，更直观
    float p1 = smoothstep(0.,.7,v_uv0.y);
    // p2 p3 暂时没用
    float p2 = smoothstep(0.,.7,v_uv0.y - .25);
    float p3 = smoothstep(0.,.7,v_uv0.y - .4);

    float f1 = step(n,p1);
    float f2 = step(n,p2);
    float f3 = step(n,p3);

    float r1 = f1 - f2;
    float r2 = f2 - f3;
    float r3 = f3;

    vec4 u_brightness = vec4(0.88,0.29,0.16,1.);
    vec4 u_middle = vec4(0.96,0.92,0.45,1.);
    vec4 u_dark = vec4(1.,1.,1.,1.);

    color = (u_dark * r3 + u_middle * r2 + u_brightness * r1).rgb;

    gl_FragColor = vec4(color,f1);
  }

想写死，但是会报错，不写下面这个不行

uniform Constants1 {
    vec4 u_brightness;
    vec4 u_middle;
    vec4 u_dark;
    float u_time;  
  };

删除Constants1同时，删除shader开头的这四个变量相关的行 你少删了。

可以了

// 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 }

        u_time: {value: 0.0}

        noiseTex: { value: white }

}%

CCProgram vs %{

  precision mediump  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 mediump float;

  uniform sampler2D texture;

  // 下面是要添加的内容

  uniform sampler2D noiseTex;

  uniform Constants {

    float u_time;  

  };

 // 上面是要添加的内容

 

  varying mediump vec2 v_uv0;

  varying lowp vec4 v_color;

  varying lowp vec4 v_wp;

  void main() {

    vec2 uv = v_uv0;

    uv.y += u_time * .6;

    vec3 color = vec3(0.);

    // 噪声图取样

    float n = texture2D(noiseTex,uv).x;

    // 三个渐变值 分别显示到屏幕上看一下，更直观

    float p1 = smoothstep(0.,.7,v_uv0.y);

    // p2 p3 暂时没用

    float p2 = smoothstep(0.,.7,v_uv0.y - .25);

    float p3 = smoothstep(0.,.7,v_uv0.y - .4);

    float f1 = step(n,p1);

    float f2 = step(n,p2);

    float f3 = step(n,p3);

    float r1 = f1 - f2;

    float r2 = f2 - f3;

    float r3 = f3;

    vec4 u_brightness = vec4(0.88,0.29,0.16,1.);

    vec4 u_middle = vec4(0.96,0.92,0.45,1.);

    vec4 u_dark = vec4(1.,1.,1.,1.);

    color = (u_dark * r3 + u_middle * r2 + u_brightness * r1).rgb;

    gl_FragColor = vec4(color,f1);

  }

}%

void main () {
vec2 uv = v_uv0;
uv.y += cc_time.x * .7;
vec3 color = vec3(0.);

float n = texture2D(noiseTex, uv).x;

// 三个渐变层 分别显示到屏幕上看一下，更直观 
float p1 = smoothstep(0., .7, v_uv0.y);
float p2 = smoothstep(0., .7, v_uv0.y - .25);
float p3 = smoothstep(0., 0.7, v_uv0.y - .4);

// 三个渐变层 切割变成三块
float f1 = smoothstep(0., n, p1);
float f2 = smoothstep(0., n, p2);
float f3 = smoothstep(0., n, p3);

float r1 = f1 - f2;
float r2 = f2 - f3;
float r3 = f3;

color = (u_dark*r3 + u_middle*r2 + u_brightness*r1).rgb;![qwb5f-vopzb|224x246](upload://y7lpbqf4yB7KI9HgAVPuhGGOjJo.gif) 

gl_FragColor = vec4( color, f1 );

}
改良下效果感觉更好

mark~~~

很棒！楼楼哇，想问下，vscode不识别effect文件，显示的都是白色代码，能下载什么插件能够智能显示或者提示吗

所以我用emacs

好嘞 谢谢 俺去看看