OpenGLES 九宫格显示图片

310 阅读1分钟

需求

使用OpenGLES通过修改片元着色器实现一个图片九宫格显示。

方案

实现一张图片的显示效果参考Swift+OpenGLES 展示图片,在此基础上完成分屏显示。其他代码无需修改,只需要修改片元着色器采样坐标间接实现纹理的缩小即可完成显示效果。

片元着色器修改

片元着色器代码如下:

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

void main() {
    vec2 uv = varyTextCoord.xy;
    if (uv.x <= 1.0/3.0) {
        uv.x = uv.x * 3.0;
    } else if (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;
    } else if (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(colorMap, uv);
}

完成效果对比