目录
相关文章
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;
}
