2021-08-19

准备工作

smoothstep

smoothstep没闹明白的点开先看下
本来想写一下的，没找到画图软件，上面链接挺好的，省事了。

直接改一个片元着色器main函数出来

void main() {
    vec2 uv = v_uv0;

    vec3 color = vec3(0.);


    // 三个渐变值 分别显示到屏幕上看一下，更直观
    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);

    gl_FragColor = vec4(color,1.);
  }
 

color = vec3(p1);

color = vec3(p2);

color = vec3(p3);

三个渐变值线放下。

噪声图

不局限于这一个噪声图，手里有别的噪声图的可以换上试试

先把需要传入的参数都定义一下。

 // 下面是要添加的内容
      properties:
        texture: {  value: white }
        u_time: {value: 0.0}
        noiseTex: { value: white }
        u_brightness: {value: [1,1,1,1], editor: { type: "color"}}
        u_middle: {value: [1,1,1,1], editor: { type: "color"}}
        u_dark: {value: [1,1,1,1], editor: { type: "color"}}

 // 上面是要添加的内容
........

CCProgram fs %{
precision mediump float;

uniform sampler2D texture;

 // 下面是要添加的内容
uniform sampler2D noiseTex;
uniform Constants1 {
  vec4 u_brightness;
  vec4 u_middle;
  vec4 u_dark;
  float u_time;  
};

 // 上面是要添加的内容
 
varying mediump vec2 v_uv0;
varying lowp vec4 v_color;
varying lowp vec4 v_wp;

准备工作结束了，上正餐

讲一下火焰造型原理

！就是用渐变值和噪声图比大小，写一下看看效果

这里全靠想象力，拿噪声图和渐变图对比，比大小需要想象一下出来的效果了。。

    // 三个渐变值 分别显示到屏幕上看一下，更直观
    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);

    // step 返回值 0或1 所以非黑即白，
    float f1 = step(n,p1);
    color = vec3(f1);

    gl_FragColor = vec4(color,1.);

float f1 = step(n,p2);

float f1 = step(n,p3);

把上面三层火分别上色，其实就是最终效果了。

直接叠加颜色会叠加，处理一下，把真正的层做出来

    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(r1);

第一层 color = vec3(r1);

第二层 color = vec3(r2);

第三层 color = vec3(r3);

上色

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

去背景

用f1做透明通道值就好了。

    color = (u_dark * r3 + u_middle * r2 + u_brightness * r1).rgb;
    
    gl_FragColor = vec4(color,f1);

动起来

//包含头文件来使用cc_time
#include <cc-global>

void main() {
    vec2 uv = v_uv0;
    // 让uv的y动起来
    uv.y += cc_time.x * .6;

原帖地址 需要梯子，而且是unity的语法

https://www.febucci.com/2019/05/fire-shader/
但是原帖配色是值得参考的。。