祝福语
大家新年好！
新的一年，祝大家，身体健康，一夜暴富。
比心效果图
灵感来源
之前偶然刷抖音，看到有抖音博主在朋友圈靠截图和移动朋友圈九张图的位置，完成了一个比心的图。中间是他的女票吧，然后周边是他自己的比心图，外围是粉色背景。真的是创意满满。我也想给我的女票整一个，但是我觉得这么整就很费劲，不如敲两行代码来的实在。刚开始的时候想的是用照片做的，就是中间是对象，外围是自己比心的图。然后我就想到了用web的css来做，这么做确实没毛病，也最省事。不过我想我还是把周围换成视频好一点，然后做个app给她吧。
思路
因为不可能使用多个视频播放器，那就用opengl做吧，把相机的纹理贴在爱心的位置，中间位置贴对象的照片的纹理。
我之前恰好搞过多分屏的fragment shader.而我只需要稍作修改就可写出这样的效果。
多分屏
#define N 4.0
vec2 tri(vec2 x){
return mod(x,1.0/N)*N;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fragCoord/iResolution.xy;
fragColor= texture(iChannel0,tri(uv));
}
多分屏在线的演示地址:www.shadertoy.com/view/7sscDX
原理见:juejin.cn/post/705923…
一点点修改
81宫格图
将N改为9.0，便得到了81宫格图
爱心数组
根据抖音的效果图，我把粉色区域用0表示，相机区域用1表示，对象的视频/照片区域用2表示
则可以得到这样的一个数组：
000 000 000
001 101 100
011 111 110
111 222 111
111 222 111
011 222 110
001 111 100
000 111 000
000 010 000
根据坐标位置计算显示哪部分
坐标范围[0,1],从左到右递增，从下到上递增。每一个都是1/N，坐标* N转为整数。就是从左到右【或者从下到上】第几个宫格。对应数组的位置。
fragment shader
/*
000 000 000
001 101 100
011 111 110
111 222 111
111 222 111
011 222 110
001 111 100
000 111 000
000 010 000
*/
#define N 9
#define CN N/3
#define PINK vec3(0.945,0.62,0.761)
int picMap[N*N] =int[](
0,0,0,0,0,0,0,0,0,
0,0,1,1,0,1,1,0,0,
0,1,1,1,1,1,1,1,0,
1,1,1,2,2,2,1,1,1,
1,1,1,2,2,2,1,1,1,
0,1,1,2,2,2,1,1,0,
0,0,1,1,1,1,1,0,0,
0,0,0,1,1,1,0,0,0,
0,0,0,0,1,0,0,0,0);
/*
it will devide image to N*N parts.
*/
vec2 tri(vec2 x,float devide){
return mod(x,1.0/devide)*devide;
}
/*
make picture more brightly
*/
vec4 whitening(vec4 inputColor,float fractor){
return log(inputColor*(fractor-1.0)+1.0)/log(fractor);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fragCoord/iResolution.xy;
int xindex = int(uv.x*float(N));
int yindex = (N-1) - int(uv.y*float(N));
int value = picMap[yindex*N+xindex];
fragColor = mix(whitening(texture(iChannel0,tri(uv,float(N))),4.0),vec4(PINK,1.0),smoothstep(float(value),0.8,1.0));
fragColor = mix(whitening(texture(iChannel1,tri(uv,float(N))),5.0),fragColor,step(float(value),1.0));
}
