二分屏效果

截屏2020-08-10 09.41.09.png

分析
由二分屏效果图所示，二分屏截取的是纹理坐标中y轴0.25到0.75之间的图像，将中间的图像截取两份，拼接在一张图片中。

截屏2020-08-10 09.40.21.png

在自定义glsl中，绘制一张图片需要将顶点坐标、纹理坐标、纹理传递到着色器中，顶点坐标会生成我们需要的图元，纹理坐标与顶点坐标生成映射关系（类似于手机贴膜）。
在片元着色器中，使用sampler2D将纹理传入片元着色器中。texture2D可以获取纹理坐标对应的纹素，因此可以修改传入的纹理坐标，
片元着色器代码

precision highp float; 
varying lowp vec2 varyTextCoord;  //纹理坐标
uniform sampler2D colorMap;    //纹理

void main()
{
    vec2 uv = varyTextCoord.xy;

    if (uv.y <= 0.5) {
      //当纹理坐标y值小于0.5时，y坐标加上0.25，此时纹理坐标y值的取值范围在0.25-0.75之间。
        uv.y = uv.y + 0.25 ;
    }else {
    //当纹理坐标y值大于0.5时，y坐标减去0.25，此时纹理坐标y值的取值范围也在0.25-0.75之间。
        uv.y = uv.y -0.25 ;
    }
   //由于处理后的纹理坐标y值在0.25-0.75之间，texture2D获取的是图片在纹理坐标y值0.25-0.75之间的纹素。
    gl_FragColor = texture2D(colorMap, uv);
}

四分屏

截屏2020-08-10 10.38.28.png

四分屏是将整个图片缩小，然后将四张图片以四宫格的形式填满。
因此texture2D获取纹理的时候需要对纹理坐标获取纹素的时候进行放大。
片元着色器代码

precision highp float; 
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main()
{
    vec2 uv = varyTextCoord.xy;

    if(uv.x < 0.5){
        uv.x = uv.x * 2.0;
    }else {
        uv.x = uv.x * 2.0 -1.0;
    }

    if(uv.y < 0.5){
        uv.y = uv.y * 2.0;
    }else {
            uv.y = uv.y * 2.0 - 1.0;
    }
    gl_FragColor = texture2D(colorMap, uv);
}

具体的iOS客户端代码参考
https://www.jianshu.com/p/203a0126711e