OpenGL系列之十二：Shader燃烧动画

目录

相关文章

OpenGL系列之一：OpenGL第一个程序
OpenGL系列之二：绘制三角形
OpenGL系列之三：三角形顶点增加颜色
OpenGL系列之四：绘制四边形
OpenGL系列之五：绘制点和线
OpenGL系列之六：绘制立方体
OpenGL系列之七：纹理贴图
OpenGL系列之八：立方体纹理贴图
OpenGL系列之九：glsl着色器语言
OpenGL系列之十：VAO、VBO、EBO的应用
OpenGL系列之十一：Shader图片转场切换动画

实现效果

代码实现

这里我们以上一个文章（OpenGL系列之十一：Shader图片转场切换动画）的代码为基础，然后我们从https://www.shadertoy.com/上面下载片元着色器代码，里面有很多的效果案例，这里我选的是https://www.shadertoy.com/view/ltV3RG这个效果，进入后，旁边会有源码：

里面的in vec2 fragCoord实际上就是我们OpenGL系列之十一：Shader图片转场切换动画中的in vec2 o_uv


里面的out vec2 fragCoord也对应我们OpenGL系列之十一：Shader图片转场切换动画中的out vec4 fragColor，里面的iTime对应我们的uValue


修改后的片元着色器源码如下：

#version 300 es
precision mediump float;

uniform sampler2D utexture0;
uniform sampler2D utexture1;
uniform float uValue;
in vec2 o_uv;
out vec4  fragColor;

vec3 TextureSource(vec2 uv)
{
    return texture(utexture1, uv).rgb;;
}

vec3 TextureTarget(vec2 uv)
{
    return texture(utexture0, uv).rrr;
}


float Hash( vec2 p)
{
    vec3 p2 = vec3(p.xy,1.0);
    return fract(sin(dot(p2,vec3(37.1,61.7, 12.4)))*3758.5453123);
}

float noise(in vec2 p)
{
    vec2 i = floor(p);
    vec2 f = fract(p);
    f *= f * (3.0-2.0*f);

    return mix(mix(Hash(i + vec2(0.,0.)), Hash(i + vec2(1.,0.)),f.x),
               mix(Hash(i + vec2(0.,1.)), Hash(i + vec2(1.,1.)),f.x),
               f.y);
}

float fbm(vec2 p)
{
    float v = 0.0;
    v += noise(p*1.)*.5;
    v += noise(p*2.)*.25;
    v += noise(p*4.)*.125;
    return v;
}

void main()
{
    vec2 uv = o_uv;

    vec3 src = TextureSource(uv);

    vec3 tgt = TextureTarget(uv);

    vec3 col = src;

    uv.x -= 1.5;

    float ctime = mod(uValue*.5,2.5);

    // burn
    float d = uv.x+uv.y*0.5 + 0.5*fbm(uv*15.1) + ctime*1.3;
    if (d >0.35) col = clamp(col-(d-0.35)*10.,0.0,1.0);
    if (d >0.47) {
        if (d < 0.5 ) col += (d-0.4)*33.0*0.5*(0.0+noise(100.*uv+vec2(-ctime*2.,0.)))*vec3(1.5,0.5,0.0);
        else col += tgt; }

    fragColor.rgb = col;
}

案例源码

https://gitee.com/itfitness/opengl-shader-burning