美文网首页 移动 前端 Python Android Java
OpenGL(五)灵魂出窍和分屏效果

OpenGL(五)灵魂出窍和分屏效果

作者: zcwfeng | 来源:发表于2020-12-13 00:29 被阅读0次

OpenGL (一)OpenGL ES 绘制基础
OpenGL (二)GLSurface 视频录制
OpenGL (三)滤镜filter 应用
OpenGL (四)贴纸和磨皮理论

扩散原理

回顾一下坐标系那张图

坐标.png

片源着色器代码


varying highp vec2 aCoord;

uniform sampler2D vTexture;
uniform lowp float mixturePercent;
uniform highp float scalePercent;

void main() {
    lowp vec4 textureColor = texture2D(vTexture, aCoord);
    //gl_FragColor  =  textureColor;
    highp vec2 textureCoordinateToUse = aCoord;
    // 纹理中心点
    highp vec2 center = vec2(0.5, 0.5);
    // 当前要上颜色的点 与中心点的偏移
    textureCoordinateToUse -= center;
    //scalePercent: 放大参数
    // 如果大于1,
    textureCoordinateToUse = textureCoordinateToUse / scalePercent;
    textureCoordinateToUse += center;
    lowp vec4 textureColor2 = texture2D(vTexture, textureCoordinateToUse);

    gl_FragColor = mix(textureColor, textureColor2, mixturePercent);
}

Java 端SoulFilter

package top.zcwfeng.opengl.filter;

import android.content.Context;
import android.opengl.GLES20;

import top.zcwfeng.opengl.R;

public
class SoulFilter extends AbstractFrameFilter{
    private int mixturePercent;
    private int scalePercent;
    public SoulFilter(Context context) {
        super(context, R.raw.base_vert,R.raw.soul_frag);
    }

    @Override
    public void initGL(Context context, int vertexShaderId, int fragmentShaderId) {
        super.initGL(context, vertexShaderId, fragmentShaderId);
        mixturePercent = GLES20.glGetUniformLocation(program, "mixturePercent");
        scalePercent = GLES20.glGetUniformLocation(program, "scalePercent");

    }

    float mix = 0.0f;// 透明度,越大越透明,但是android 里面alpha越小透明
    float scale = 0.0f;//缩放,越来越大

    @Override
    public void beforeDraw(FilterContext filterContext) {
        super.beforeDraw(filterContext);
        GLES20.glUniform1f(mixturePercent,1.0f - mix);
        GLES20.glUniform1f(scalePercent,1.0f + scale);

        mix += 0.05f;
        scale += 0.05f;
        if(mix >= 1.0f) {
            mix = 0.0f;
        }
        if(scale >= 1.0f){
            scale = 0.0f;
        }

    }
}

A-B.png

带入一个实例点

0.5,0.5 --->中心点

0.5,0.3----> 找一个A点

A 点距离中新点y的距离 -0.2

-0.2 /2 = -0.1

0.5,0.4 -----> 找到一个B点

片源着色器,执行无数次,上一个点的颜色,画到当前这个点 A----> 着色到B

和大眼类似,盒子的底部颜色取色,画到原本有桌子的地方,效果感觉像贴了一层在桌子那部分,再加上透明度,就是这个效果

分屏思路

选取原图中的中心位置(0.25-0.75)进行绘制,大于0.5,则将当前绘制点Y坐标-0.25;否则加0.25即可。

上下分屏例子:
采点的时候0.25 下面,0.75 上面都抛弃

这个比较简单,看下着色器

precision mediump float;
varying  vec2 aCoord;
uniform sampler2D vTexture;

void main() {
    float y = aCoord.y;
    if (y < 0.5){
        y += 0.25;
    } else {
        y -= 0.25;
    }

    gl_FragColor = texture2D(vTexture, vec2(aCoord.x, y));
}

相关文章

  • OpenGL(五)灵魂出窍和分屏效果

    OpenGL (一)OpenGL ES 绘制基础[https://www.jianshu.com/p/05e131...

  • 缩放滤镜

    抖动效果 灵魂出窍效果 毛刺效果

  • OpenGL ES3.0 实现灵魂出窍效果

    OpenGL ES3.0 实现灵魂出窍效果 分为两步:1使用GLSurfaceView 实现摄像头预览, 2实现具...

  • OpenGL ES的滤镜效果 -- 动效

    今天,我们用OpenGL ES分别来实现以下效果:缩放,灵魂出窍,抖动,闪白,毛刺,幻觉。 准备工作 因为涉及到动...

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

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

  • Metal每日分享,灵魂出窍滤镜效果

    本案例的目的是理解如何用Metal实现灵魂出窍滤镜,灵魂出窍效果实现原理是通过两个纹理叠加,根据时间上层纹理做缩放...

  • OpenGL ES 案例:动效滤镜

    本案例的目的是理解使用 GLSL 实现 缩放+灵魂出窍+抖动+闪白+毛刺+幻觉的动效滤镜。 准备工作的代码与分屏滤...

  • 灵魂出窍

    不知道大家是否听说过或经历过这样一些事情,在睡觉或生病(尤其是高烧)的过程中,明明没有去过某些地方或经历过...

  • 灵魂出窍

    一 “什么鬼,我死了吗?” 我看到躺在马路上的自己,一动不动,宛如一具坏掉的人偶,被撞到的头部鲜血淋漓。 “真惨呐...

  • 灵魂出窍

    灵魂出窍,悠悠幽幽悬浮在半空,静静伴随,观照这个肉身。 身材矮胖,面容猥琐,看人的目光像陈佩斯演的...

网友评论

    本文标题:OpenGL(五)灵魂出窍和分屏效果

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