美文网首页
分屏滤镜

分屏滤镜

作者: E术家 | 来源:发表于2020-08-11 15:51 被阅读0次

vertShader

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

fragShader

2分屏

precision highp float;
uniform sampler2D Texture;
varying highp vec2 TextureCoordsVarying;

void main() {
    vec2 uv = TextureCoordsVarying.xy;
    float y;
//    if (uv.y >= 0.0 && uv.y <= 0.5) {
//        uv.y = uv.y + 0.25;
//    } else {
//        uv.y = uv.y - 0.25;
//    }
//     gl_FragColor = texture2D(Texture, uv);

    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));
}

3分屏

precision highp float;
uniform sampler2D Texture;
varying highp vec2 TextureCoordsVarying;

void main() {
    vec2 uv = TextureCoordsVarying.xy;
    if (uv.y < 1.0/3.0) {
        uv.y = uv.y + 1.0/3.0;
    } else if (uv.y > 2.0/3.0){
        uv.y = uv.y - 1.0/3.0;
    }
    gl_FragColor = texture2D(Texture, uv);
}

4分屏

precision highp float;
uniform sampler2D Texture;
varying highp vec2 TextureCoordsVarying;

void main() {
    vec2 uv = 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);
}

6分屏

precision highp float;
uniform sampler2D Texture;
varying highp vec2 TextureCoordsVarying;

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

9分屏

precision highp float;
uniform sampler2D Texture;
varying highp vec2 TextureCoordsVarying;

void main() {
    vec2 uv = TextureCoordsVarying.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(Texture, uv);
}

相关文章

  • 08-OpenGL ES 分屏滤镜

    分屏滤镜分析 分屏滤镜 - 分2屏 分屏滤镜 - 分4屏 案例-分屏滤镜导图 源码链接 https://githu...

  • OpenGL ES之滤镜处理(2)_灰度滤镜与马赛克滤镜

    上文 OpenGL ES之滤镜处理(1)_分屏滤镜 - 简书讲述了分屏滤镜的处理,本文介绍灰度滤镜与马赛克滤镜的处...

  • OpenGL ES(九)-自定义滤镜(分屏滤镜)

    分屏滤镜(2) 顶点着色器源码: 片元着色器源码: 分屏滤镜(3) 顶点着色器不变片元着色器源码: 分屏滤镜(4)...

  • OpenGL ES案例-实现分屏滤镜

    分屏滤镜在现在的短视频中十分常见,今天我们就使用OpenGL ES来实现分屏滤镜的效果。 一、实现结果 二、分屏原...

  • 分屏滤镜

    vertShader fragShader 2分屏 3分屏 4分屏 6分屏 9分屏

  • 如何优雅地实现一个分屏滤镜

    本文通过编写一个通用的片段着色器,实现了抖音中的各种分屏滤镜。另外,还讲解了延时动态分屏滤镜的实现。 一、静态分屏...

  • 滤镜

    1.分屏 分屏的实现思路就是调整顶点坐标与纹理坐标的映射关系 2.灰色滤镜 灰色滤镜有5种实现方案,都是取比例颜色...

  • OpenGL 分屏滤镜

    1

  • 0016--滤镜:分屏滤镜

    [toc] 前言 通过自定义着色器实现分屏滤镜功能. 准备工作 导入相关头文件 FilterBar为一个选择Bar...

  • OpenGL ES滤镜:分屏滤镜

    9分屏效果如下所示: 滤镜初始化 1. 初始化上下文并设置为当前上下文 2. 开辟顶点数组内存空间 3. 初始化4...

网友评论

      本文标题:分屏滤镜

      本文链接:https://www.haomeiwen.com/subject/jmlydktx.html