专栏首页进击的多媒体开发Hi 小姐姐,这是你要的瘦身大长腿效果?

Hi 小姐姐,这是你要的瘦身大长腿效果?

首先这可能是一个送命题,小姐姐需要瘦身大长腿效果吗?恩,小姐姐都是自带瘦身大长腿的,有没有?

OpenGL ES 实现瘦身大长腿效果

瘦身大长腿

实现原理

OpenGL ES 实现瘦身和大长腿效果比较方便,使用纹理映射技术借助于 OpenGL 的图像双线性插值算法可以轻易实现图像的伸缩效果

回顾下前面讲的,什么是纹理?在 OpenGL 中,纹理实际上是一个可以被采样的复杂数据集合,是 GPU 使用的图像数据结构,纹理分为 2D 纹理、 立方图纹理和 3D 纹理。

2D 纹理是 OpenGLES 中最常用和最常见的纹理形式,是一个图像数据的二维数组。纹理中的一个单独数据元素称为纹素或纹理像素。

什么是纹理映射?纹理映射就是通过为图元的顶点坐标指定恰当的纹理坐标,通过纹理坐标在纹理图中选定特定的纹理区域,最后通过纹理坐标与顶点的映射关系,将选定的纹理区域映射到指定图元上。

纹理坐标系

渲染坐标系

纹理映射也称为纹理贴图,简单地说就是将纹理坐标(纹理坐标系)所指定的纹理区域,映射到顶点坐标(渲染坐标系或OpenGLES 坐标系)对应的区域。

OpenGL 拉伸的原理我们搞清楚了,还有一个问题需要解决:由于不同手机屏幕的分辨率一般不同,这就导致图片被渲染到屏幕上之后,得到结果图的分辨率不符合我们的预期。

这里我们需要用到 OpenGL 离屏渲染技术离屏渲染顾名思义,可以让渲染操作不用再渲染到屏幕上,而是渲染到一块离屏缓存中。

然后可以使用 glReadPixels 或者 HardwareBuffer 将渲染后的图像数据读出来,从而实现在后台利用 GPU 完成对图像的处理,避免了直接将结果图渲染到屏幕上导致的分辨率问题。

效果实现

实现瘦身大长腿效果使用到的着色器脚本,主要就是实现一个常规的纹理采样。

const char vShaderStr[] =
        "#version 300 es                            \n"
        "layout(location = 0) in vec4 a_position;   \n"
        "layout(location = 1) in vec2 a_texCoord;   \n"
        "out vec2 v_texCoord;                       \n"
        "uniform mat4 u_MVPMatrix;                  \n"
        "void main()                                \n"
        "{                                          \n"
        "   gl_Position = u_MVPMatrix * a_position; \n"
        "   v_texCoord = a_texCoord;                \n"
        "}                                          \n";

const char fShaderStr[] =
        "#version 300 es                            \n"
        "precision mediump float;                   \n"
        "in vec2 v_texCoord;                        \n"
        "layout(location = 0) out vec4 outColor;    \n"
        "uniform sampler2D s_TextureMap;            \n"
        "void main()                                \n"
        "{                                          \n"
        "    outColor = texture(s_TextureMap, v_texCoord);\n"
        "}";

瘦身效果实现

瘦身效果

瘦身效果实现是将指定的身体区域映射到一个宽度相对减小的区域,而指定身体区域之外的部分保持原来的比例,这样渲染出来图像的身体区域进行了压缩(瘦身)。类似,想实现变胖(有人要变胖吗?)的效果,便是将指定的身体区域映射到一个宽度相对增大的区域。

瘦身原理图

如图所示,为实现瘦身我们使用了 8 个顶点 V0~V7 ,8 个顶点将图像分割成了 6 个三角面片,其中 V2、V3、V4、V5 四个顶点所围成的区域表示要发生形变的区域,箭头方向表示形变的方式是压缩,各个顶点坐标的 x 分量需要偏移 m_dt (根据压缩方向确定正负偏移)。

实现瘦身效果的着色器程序使用的顶点坐标和纹理坐标:

/** 8 points horizontal mode*/
GLfloat vFboVertices[] = {
        -1.0f, 1.0f, 0.0f,
        -1.0f, -1.0f, 0.0f,
        (x1 - m_dt) / (1 + m_dt), -1.0f, 0.0f,
        (x1 - m_dt) / (1 + m_dt), 1.0f, 0.0f,
        (x2 + m_dt) / (1 + m_dt), 1.0f, 0.0f,
        (x2 + m_dt) / (1 + m_dt), -1.0f, 0.0f,
        1.0f, -1.0f, 0.0f,
        1.0f, 1.0f, 0.0f,
};
//fbo 纹理坐标
GLfloat vFboTexCoors[] = {
        0.0f, 0.0f,
        0.0f, 1.0f,
        m_DeformationRect.left, 1.0f,
        m_DeformationRect.left, 0.0f,
        m_DeformationRect.right, 0.0f,
        m_DeformationRect.right, 1.0f,
        1.0f, 1.0f,
        1.0f, 0.0f,
};

其中 m_dt 表示控制形变程度的形变因子,m_DeformationRect 表示一个归一化的区域选择框。我们可以在 UI 上调节进度条来控制改变形变程度,滑动选择框来制定形变的区域。

大长腿效果实现

大长腿效果

大长腿效果的实现可以类比瘦身,将指定的腿部区域映射到一个高度相对增大的区域,而指定腿部区域之外的部分保持原来的比例,这样渲染出来图像的腿部区域进行了拉伸(大长腿)

类似,想实现小短腿(如果有人用到的话)的效果,便是将指定的身体区域映射到一个高度相对减小的区域(实现压缩)。

大长腿效果实现原理

如图所示,为实现大长腿效果我们同样使用了 8 个顶点 V0~V7 其中 V1、V4、V7、V2 四个顶点所围成的区域表示要发生形变的区域,箭头方向表示形变的方式是拉伸,各个顶点坐标的 y 分量需要偏移 m_dt (根据拉伸方向确定正负偏移)。

实现瘦身效果的着色器程序使用的顶点坐标和纹理坐标:

/** 8 points vertical mode*/
GLfloat vFboVertices[] = {
        -1.0f, 1.0f, 0.0f,
        -1.0f, (y1 + m_dt) / (1 + m_dt), 0.0f,
        1.0f, (y1 + m_dt) / (1 + m_dt), 0.0f,
        1.0f, 1.0f, 0.0f,
        -1.0f, (y2 - m_dt) / (1 + m_dt), 0.0f,
        -1.0f, -1.0f, 0.0f,
        1.0f, -1.0f, 0.0f,
        1.0f, (y2 - m_dt) / (1 + m_dt), 0.0f,
};
//fbo 纹理坐标
GLfloat vFboTexCoors[] = {
        0.0f, 0.0f,
        0.0f, m_DeformationRect.top,
        1.0f, m_DeformationRect.top,
        1.0f, 0.0f,
        0.0f, m_DeformationRect.bottom,
        0.0f, 1.0f,
        1.0f, 1.0f,
        1.0f, m_DeformationRect.bottom,
};

不同的是,大长腿效果的实现是竖直方向上的拉伸,而瘦身的实现是水平方向上的拉伸。

另外还需注意的是,我们对图片进行拉伸或者缩放之后,结果图的实际尺寸会发生改变,所以每次调整形变后,都需要为离屏渲染的帧缓冲区对象 FBO 绑定对应新尺寸的纹理作为颜色附着。

//由于图像尺寸改变,删除旧纹理
if (m_FboTextureId) {
    glDeleteTextures(1, &m_FboTextureId);
}
//生成新纹理
glGenTextures(1, &m_FboTextureId);
glBindTexture(GL_TEXTURE_2D, m_FboTextureId);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glBindTexture(GL_TEXTURE_2D, GL_NONE);

glBindFramebuffer(GL_FRAMEBUFFER, m_FboId);
glBindTexture(GL_TEXTURE_2D, m_FboTextureId);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, m_FboTextureId,
                       0);
//判断是水平拉伸还是竖直拉伸,然后按照新图像的尺寸初始化纹理
if (m_bIsVerticalMode) {
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, m_RenderImg.width,
                 static_cast<GLsizei>(m_RenderImg.height * (1 + m_dt)), 0, GL_RGBA,
                 GL_UNSIGNED_BYTE, nullptr);
} else {
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA,
                 static_cast<GLsizei>(m_RenderImg.width * (1 + m_dt)),
                 m_RenderImg.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, nullptr);
}
if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE) {
    LOGCATE("MyGLRender::InitBuffers glCheckFramebufferStatus status != GL_FRAMEBUFFER_COMPLETE");
}
glBindTexture(GL_TEXTURE_2D, GL_NONE);
glBindFramebuffer(GL_FRAMEBUFFER, GL_NONE);

离屏渲染时,由于图像尺寸发生改变,这个也需要对视口进行调整:

//判断是水平拉伸还是竖直拉伸,设置视口大小
if (m_bIsVerticalMode) {
    glViewport(0, 0, static_cast<GLsizei>(m_RenderImg.width),
               static_cast<GLsizei>(m_RenderImg.height * (1 + m_dt)));
} else {
    glViewport(0, 0, static_cast<GLsizei>(m_RenderImg.width * (1 + m_dt)),
               static_cast<GLsizei>(m_RenderImg.height));
}

与 AI 算法结合

AI 算法检测的人体

我们现在是手动指定形变区域实现瘦身和大长腿效果,但是如果与身体关键点检测算法一起使用,我们便可以省去手动操作这一步。

拿到身体的关键点(算法检测结果)便可以计算出人体及各个部位的区域,按照类似的原理我们还可以实现瘦腰、瘦腿、丰胸等效果,我们后续将与 AI 算法结合来开发更加丰富的功能。

本文分享自微信公众号 - 音视频开发进阶(glumes_blog)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • GLSL加载纹理颠倒的六种解决方案

    链接:https://www.jianshu.com/p/23d7dd24d6f6

    glumes
  • 在 iOS 上用 Shader 实现 图片 转 字符画 效果~~

    那天在朋友圈问了一下如何通过 OpenGL Shader 实现同样效果,没想到引来了大神的关注。

    glumes
  • Android 热修复 AndFix 原理,看这篇就够了

    之前写过一篇热修复的文章,那时候刚开始接触,照猫画虎画的还算比较成功。但是那种修复需要重新启动APP,也就是在JAVA层实现的热修复。我们知道目...

    glumes
  • Ubuntu 16.04 安装OpenGL

    最近忙于paper,就没有写博客;然后开始和华为合作一个项目,学习如何使用openGL 转自:https://blog.csdn.net/huangkangy...

    用户1148523
  • 001计算机图形学vs2015配置openGL及第一个opengl程序

    OpenGL中的gl库是核心库,glu是实用库,glut是实用工具库; gl是核心,glu是对gl的部分封装,glut是OpenGL的跨平台工具库,gl中包含...

    上善若水.夏
  • ACM-ICPC 2018 沈阳赛区网络预赛 D. Made In Heaven(k短路)

           题意是输入n和m表示n个点m条边,然后输入起始点和终止点和第k短路和一个限制条件T,然后输入m条边。问能不能在T时间内从起始点到达终止点。

    Ch_Zaqdt
  • POJ 2449 Remmarguts' Date(k短路模板)

           题意是n个点,m条边,然后输入m条边,最后输入起始点和终止点和第k短路。

    Ch_Zaqdt
  • 一种发音模式:使用变形金刚合奏的多语种字形音素转换(CS CL)

    字形到音素(G2P)的转换对于语音识别和合成都具有重要意义。与其他语音和语言处理任务类似,在只有小规模训练数据的情况下,学习G2P模型是一项挑战。本文描述了一种...

    用户7454091
  • 背景填充式条形图、柱图

    今天跟大家分享背景填充式条形图、柱图的制作技巧! ▽▼▽ 本例要介绍的填充式图表与之前推送的一篇温度计风格图表的制作方式有点儿类似,不过制作方法上有些不同,在这...

    数据小磨坊
  • PyOpenGL 彩色多边形

    一直想在PyQt中找一个能显示有限元2D云图的部件,可惜QLinearGradient类只能使颜色在两个点之间插值变化,3个或以上点时则无能为力。还好我们可以使...

    用户6021899

扫码关注云+社区

领取腾讯云代金券