OpenGL系列之十九：OpenGL人脸贴纸

作者: itfitness | 来源:发表于2023-01-06 16:46 被阅读0次

OpenGL系列之十九：OpenGL人脸贴纸
OpenGL系列之十七：实现人脸贴纸
一、了解 OpenGL ES
OpenGL/OpenGL ES入门：纹理初探 - 常用API解
OpenGL/OpenGL ES入门：纹理应用 - 纹理坐标及
四、 OpenGL ES GLSL图片倒置的翻转解决方案（6种）
六、OpenGL 渲染技巧：深度测试、多边形偏移、混合
案例05：球的自转
OpenGL ES入门：滤镜篇 - 分屏滤镜
OpenGL ES 案例03：CoreAnimation绘制立方

参考文章

https://blog.csdn.net/YuQing_Cat/article/details/84070361

效果展示

代码实现

这里我们以OpenGL系列之十七：实现人脸贴纸，这篇文章的代码为基础（这篇文章是使用OpenCV实现的贴纸），OpenGL实现贴纸有个好处就是可以直接使用背景透明的图片，不用像OpenCV那样还得弄一个背景，然后通过掩膜实现透明，然后在OpenGL中实现贴纸也比较简单，直接开启混合模式渲染即可关键代码如下：

/**
 * 绘制
 */
void CCRenderTZ::paintGL(float x,float y,float rotate)
{
    //开启混合模式：将多张图片进行混合（贴图）
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

    //这一步是算出贴纸渲染的位置
    glViewport(x - width / 2,(textureHeight - y) - height / 2,width,height);
//    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    drawShaderAnim(rotate);

    //关闭混合模式
    glDisable(GL_BLEND);
    //恢复窗口大小
    glViewport(0,0,textureWidth,textureHeight);
}

由于需要随着人脸旋转来调整贴纸的角度，因此在这里也需要传入人脸的倾斜角度，这里用的算法与OpenGL系列之十七：实现人脸贴纸这篇文章一样，然后贴纸旋转也是使用glm实现的，代码如下：

void CCRenderTZ::drawShaderAnim(float rotate) {

    u_value += 0.015f;

    glm::mat4x4  objectMat;
    glm::mat4x4  objectTransMat = glm::translate(glm::mat4(1.0f), glm::vec3(0.0f, 0.0f, -1));
    //贴纸旋转
    glm::mat4x4  objectRotMat = glm::rotate(glm::mat4(1.0f),glm::radians(rotate),glm::vec3(0.0f, 0.0f, 10.0) );
    glm::mat4x4  objectScaleMat = glm::scale(glm::mat4(1.0f),glm::vec3(0.6f, 0.6f, 0.0) );

    glm::mat4 projMat = glm::perspective(glm::radians(60.0f), 1.0f, 0.0f, 1000.0f);

    objectMat = projMat * objectTransMat * objectRotMat * objectScaleMat;

    ccOpenGlShader.Bind();

    ccOpenGlShader.SetUniformValue("u_mat",objectMat);
    //设置变化的值
    ccOpenGlShader.SetUniformValue("uValue",u_value);

    ccVAO.Bind();

    glActiveTexture(GL_TEXTURE1);
    //给变量utexture0设置值
    glBindTexture(GL_TEXTURE_2D,textureId);
    ccOpenGlShader.SetUniformValue("utexture0",textureId);

    glDrawElements(GL_TRIANGLE_STRIP,6,GL_UNSIGNED_SHORT,(void *)0);

    glBindTexture(GL_TEXTURE_2D, 0);
    ccOpenGlShader.Release();
    ccVAO.Release();
}

使用的时候也是直接传入鼻子的定位点和旋转角度即可

//贴图旋转
    int angle = get_angle(u_LeftEyeCenterPos.x,u_LeftEyeCenterPos.y,u_RightEyeCenterPos.x,u_RightEyeCenterPos.y);

    //当右眼的y坐标大于左眼的y坐标的时候，反着转
    if(u_RightEyeCenterPos.y > u_LeftEyeCenterPos.y){
        angle = - angle;
    }
    ccRenderTz->paintGL(noiseCenterPos.x,noiseCenterPos.y,angle);