一.先看看整體效果
????????說明:所有分屏原理操作的是片元著色器。頂點著色器不變，這里附上頂點著色器代碼苞冯，下面不在涉及頂點著色器，至于自定義頂點/片元著色器請看我以前的博客侧巨，頂點著色器如下:
????????????????attribute vec4 Position;
????????????????attributevec2TextureCoords;
????????????????varyingvec2TextureCoordsVarying;
????????????????voidmain (void) {
? ? ????????????gl_Position= Position;
? ? ????????????TextureCoordsVarying = TextureCoords;
????????????????}
二.二分屏實現(xiàn)原理
? ??? ??2.1我們先來看看二分屏片元著色器代碼:
????????????????precision highp float;--------------->定義精度舅锄，最后都寫一下
????????????????uniform sampler2D Texture;----------->紋理
????????????????varyinghighpvec2TextureCoordsVarying;---------->紋理坐標
????????????????voidmain() {
? ????????????? vec2uv = TextureCoordsVarying.xy;
? ????????????? floaty;
? ? ????????????if(uv.y >=0.0&& uv.y <=0.5) {
? ? ? ????????? ????y = uv.y +0.25;
? ? ????????????????}else{
? ? ? ? ????????????????????????y = uv.y -0.25;????????
? ? ????????????????}
? ????????????????????????????? gl_FragColor=texture2D(Texture,vec2(uv.x, y));
????????????????????}
? ??? ??所謂二分屏，就是當顯示一張圖片的時候司忱，截取紋理Y坐標下0.25-0.75的位置皇忿，為什么是0.25至0.75了，因為在我們拍攝的過程坦仍，大多圖片的核心內(nèi)容顯示在這個區(qū)域鳍烁，當然，在自定義著色器中繁扎，這個值你可以修改幔荒，但最后的效果不是很理想，你可以試一試哈锻离。我們知道紋理的坐標范圍是（0铺峭，1），流程示意圖如下：
三.三分屏實現(xiàn)原理
????????三分屏片元著色器代碼:
????????????????precision highp float;
????????????????uniform sampler2D Texture;
????????????????varyinghighpvec2TextureCoordsVarying;
????????????????voidmain() {
? ? ????????????????????????vec2uv = TextureCoordsVarying.xy;
? ????????????????????????? if(uv.y <1.0/3.0) {
? ? ? ? ????????????????????????uv.y = uv.y +1.0/3.0;
? ????????????????????????? }elseif(uv.y >2.0/3.0){
? ? ? ? ????????????????????????uv.y = uv.y -1.0/3.0;
? ? ????????????????????????}
? ????????????????????????? gl_FragColor=texture2D(Texture, uv);
????????????????????????????}
三分屏和二分屏的原理一樣汽纠，判斷的位置變成了1/3處:
四.四分屏實現(xiàn)原理
????????四分屏片元著色器代碼:
????????????????precision highp float;
????????????????uniform sampler2D Texture;
????????????????varyinghighpvec2TextureCoordsVarying;
????????????????voidmain() {
? ? ????????????????????????vec2uv = TextureCoordsVarying.xy;
? ? ????????????????if(uv.x <=0.5){
? ? ? ????????????????????? uv.x = uv.x *2.0;
? ? ????????????????????}else{
? ? ? ????????????????? uv.x = (uv.x -0.5) *2.0;
? ????????????????????? }
? ????????????? if(uv.y<=0.5) {
? ? ? ? ????????????uv.y = uv.y *2.0;
? ????????????? }else{
? ? ? ? ????????????uv.y = (uv.y -0.5) *2.0;
????????? ? }
? ? ????????????gl_FragColor=texture2D(Texture, uv);
????????????}
四分屏特點:原樣顯示圖片的大小卫键，不放大縮小，從代碼中我們可以看出虱朵，當紋理坐標（x莉炉，y）在0-0.5的時候，我們讓其乘以2碴犬，為什么絮宁？原來紋理坐標在0到0.5的時候，獲取紋理的時候服协，只能對應紋理0到0.5绍昂，使其乘以2，原本0到0.5的范圍就變成了0到1，當紋理坐標（x窘游，y）大于0.5的時候唠椭，先減去0.5，再乘以2忍饰，也使其0.5到1的范圍先變成0到0.5贪嫂，最后變成0到1，這樣艾蓝，當獲取紋理的時候力崇，無論從0到0.5的范圍，還是0.5到1的范圍赢织，都是變成獲攘裂ァ（0，1）整張圖片敌厘。究其根本原因就是改變紋理坐標獲取的紋理位置台猴。原理示意圖如下:
五。六分屏實現(xiàn)原理
????????六分屏片元著色器代碼:
? ??????????????precision highp float;
????????????????uniform sampler2D Texture;
????????????????varyinghighpvec2TextureCoordsVarying;
????????????????voidmain() {
? ? ????????????????????vec2uv = TextureCoordsVarying.xy;
? ? ????????????????????if(uv.x <=1.0/3.0){
? ? ? ? ????????????????????uv.x = uv.x +1.0/3.0;
? ????????????????????? }elseif(uv.x >=2.0/3.0){
? ? ? ? ????????????????????uv.x = uv.x -1.0/3.0;
? ????????????????????? }
? ? ????????????????????if(uv.y <=0.5){
? ? ? ? ????????????????????uv.y = uv.y +0.25;
? ????????????????????? }else{
? ? ? ? ????????????????uv.y = uv.y -0.25;
? ? ????????????????????}
? ? gl_FragColor=texture2D(Texture, uv);
}
? ??????????你看懂了2/3/4分屏原理俱两，6和9分屏原理就很簡單了饱狂，6分屏實現(xiàn)原理就是同時改變紋理坐標的值，x坐標取三分之一處宪彩，Y坐標取0.5之處休讳，主要是看你的圖拍你的樣子，原理示意圖參照2/3/4分屏
六.九分屏實現(xiàn)原理
????????九分屏片元著色器代碼:
? ??????????????precision highp float;
????????????????uniform sampler2D Texture;
????????????????varyinghighpvec2TextureCoordsVarying;
????????????????voidmain() {
? ? ????????????vec2uv = TextureCoordsVarying.xy;
? ? ? ? ? ? ? ? ?if(uv.x <1.0/3.0) {
? ? ? ? ? ? ? ? ? ? ?uv.x = uv.x *3.0;
? ????????????? }elseif(uv.x <2.0/3.0) {
? ? ? ????????????? uv.x = (uv.x -1.0/3.0) *3.0;
? ? ????????????}else{
? ? ? ????????????? uv.x = (uv.x -2.0/3.0) *3.0;
? ? ????????}
? ????????? if(uv.y <=1.0/3.0) {
? ? ? ????????????? uv.y = uv.y *3.0;
? ? ????????????????}elseif(uv.y <2.0/3.0) {
? ? ? ????????????? uv.y = (uv.y -1.0/3.0) *3.0;
? ????????????????? }else{
? ? ? ? ????????????uv.y = (uv.y -2.0/3.0) *3.0;
? ? ????????????}
? ? ????????????gl_FragColor=texture2D(Texture, uv);
}
? ??????九分屏原理和四分屏原理一樣尿孔，只是x俊柔，y分屏的地方選擇的是1/3，2/3處活合，相關流程示意圖雏婶，請參照4分屏示意圖
最后附上代碼地址:鏈接: https://pan.baidu.com/s/1bzJpt2Nq6h7DGpfx8PQYdQ 提取碼: cck8
