OpenGL-贴纸方案

OpenGL-贴纸方案

普通贴纸(缩放、Z轴旋转、平移)

OpenGL环境说明

OpenGL渲染区域使用正交投影换算,正常OpenGL坐标是vertexData,这样的 Matrix.orthoM
进行换算

    //顶点坐标(原点为显示区域中心店)
    private final float[] vertexData  = {
                -1.0f, -1.0f,  //左下角
                1.0f, -1.0f,   //右下角
                -1.0f,  1.0f,  //左上角
                1.0f,  1.0f,   //右上角
    };
m_width=720;
m_height=1280
 Matrix.orthoM(matrix, 0, 0, m_width, m_height,0 , -1, 1);

    //坐标原点对应屏幕左上角
    private final float[] m_position = {
            0f, 0f,//左上角坐标
            720f,0f,///右上角坐标
            0f, 1280f, //左下角坐标
            720f, 1280f,//右下角坐标
    };

以上面的基础的渲染区域设置FBO的绘制区,进行贴纸绘制,对应的缩放、旋转、平移时候对矩阵的处理和顶点点位处理的方法说明m_position对应的是贴纸的坐标,m_materialRect对应的xy轴的坐标和宽高。


    float[] m_materialRect={0f,0f,500f,500f};//x,y,w,h
    //坐标原点对应屏幕左上角
    private final float[] m_position = {
            0f, 0f,//左上角坐标
            500f, 0f,//右上角坐标
            0f, 500f, //左下角坐标
            500f, 500f,//右下角坐标
    };

void processCommonRect() {
    if (m_locateType == Locate_Common_Rect && m_position) {
        float x = m_materialRect.origin.x * m_width;
        float y = m_materialRect.origin.y * m_height;
        Rect rect(x, y, m_materialRect.size.width, m_materialRect.size.height);
        m_matrix->identity();
        if (m_scale != 1.0f || (m_angle != 0.f && m_angle != 360.f)) {
            m_matrix->scale(m_scale);
            m_matrix->rotateZ(m_angle);
            // 纹理在屏幕上旋转,x 和 y 需要计算屏幕的比例,防止拉伸
            float screenRadio = m_height / m_width;
            float screenRadioFlip = 1.0f / screenRadio;
            float *m = (float *)m_matrix->get();
            m[0] *= screenRadio;
            m[4] *= screenRadio;
            m_matrix->scale(screenRadioFlip, 1, 1);
            if (m_offsetRect.size.width > 0 && m_offsetRect.size.height > 0) {
                float offsetX = m_offsetRect.origin.x - (0.5f - m_offsetRect.size.width / m_width * 0.5f);
                float offsetY = m_offsetRect.origin.y - (0.5f - m_offsetRect.size.height / m_height * 0.5f);
                rect.origin.x -= offsetX * m_width;
                rect.origin.y -= offsetY * m_height;
                m[12] = offsetX * 2.0f;
                m[13] = offsetY * 2.0f;
            } else {
                float centerX = (m_width - rect.size.width) * 0.5f;
                float centerY = (m_height - rect.size.height) * 0.5f;
                m[12] = (rect.origin.x - centerX) / m_width * 2.0f;
                m[13] = (rect.origin.y - centerY) / m_height * 2.0f;
                rect.origin.x = centerX;
                rect.origin.y = centerY;
            }
        }
        if(m_isCut)
        {
            if(m_originalRect.size.width != 0 && m_originalRect.size.height != 0){
                m_texcoord[0].set(0, 0);
                if(1.0f*m_materialRect.size.width/m_originalRect.size.width < 1.0)
                {
                    m_texcoord[1].set(1.0f*m_materialRect.size.width/m_originalRect.size.width, 0);
                }else{
                    m_texcoord[1].set(1.0,0);
                }
                m_texcoord[2].set(0, 1);
                if(1.0f*m_materialRect.size.width/m_originalRect.size.width < 1.0){
                    m_texcoord[3].set(1.0f*m_materialRect.size.width/m_originalRect.size.width, 1);
                }else{
                    m_texcoord[3].set(1.0, 1);
                }
            }else{
                m_texcoord[0].set(0, 0);
                m_texcoord[1].set(1, 0);
                m_texcoord[2].set(0, 1);
                m_texcoord[3].set(1, 1);
                }
            }

        m_position[0].set(rect.origin.x, rect.origin.y);
        m_position[1].set(rect.right(), rect.origin.y);
        m_position[2].set(rect.origin.x, rect.bottom());
        m_position[3].set(rect.right(), rect.bottom());
    }
}


代码解说:

        float x = m_materialRect.origin.x * m_width;
        float y = m_materialRect.origin.y * m_height;
        Rect rect(x, y, m_materialRect.size.width, m_materialRect.size.height);

m_materialRect.origin.xm_materialRect.origin.y分别是占m_width和m_height的比例,相乘就获取真实的x,y坐标值,然后保存到Rect。
m_matrix->identity();是矩阵的初始化, m_matrix->scale(m_scale);进行缩放, m_matrix->rotateZ(m_angle); 进行旋转.

            // 纹理在屏幕上旋转,x 和 y 需要计算屏幕的比例,防止拉伸
            float screenRadio = m_height / m_width;
            float screenRadioFlip = 1.0f / screenRadio;
            float *m = (float *)m_matrix->get();
            m[0] *= screenRadio;
            m[4] *= screenRadio;
            m_matrix->scale(screenRadioFlip, 1, 1);

上面的代码是对进行缩放后的再按屏幕(720,1280)比例进行再次矫正,防止拉伸,实际上的操作 m[0] *= screenRadio*screenRadioFlip; m[4] *= screenRadio*screenRadioFlip; 如果不理解可以查看缩放矩阵和Z轴旋转矩阵相乘

                float centerX = (m_width - rect.size.width) * 0.5f;
                float centerY = (m_height - rect.size.height) * 0.5f;
                m[12] = (rect.origin.x - centerX) / m_width * 2.0f;
                m[13] = (rect.origin.y - centerY) / m_height * 2.0f;
                rect.origin.x = centerX;
                rect.origin.y = centerY;
  1. float centerX = (m_width - rect.size.width) * 0.5f;:计算屏幕宽度减去矩形宽度后的一半,以此确定矩形在 x 轴上居中的位置。

  2. float centerY = (m_height - rect.size.height) * 0.5f;:计算屏幕高度减去矩形高度后的一半,以此确定矩形在 y 轴上居中的位置。

  3. m[12] = (rect.origin.x - centerX) / m_width * 2.0f;:这行代码的目的是根据矩形左上角的 x 坐标相对于屏幕中心点的偏移量来计算 x 轴的位移量。以下是具体步骤:

    • (rect.origin.x - centerX):计算矩形左上角 x 坐标和屏幕中心 x 坐标之间的偏移量。
    • / m_width:将得到的偏移量除以屏幕宽度,将其转换为比例,结果范围在 [-0.5, 0.5] 之间。
    • * 2.0f:最后乘以 2.0,将比例倍增,确保偏移量适合矩阵的变换范围。而归一化后的[-0.5, 0.5]范围不太适合用于这些变换。通过乘以2,可以使得矩阵的位移调整更加明显和精确[-0.1, 0.1]
  4. 这样计算出的结果将会被存储在矩阵 m_matrix 的第 12 个元素中,通常表示 x 轴的位移信息。

总的来说,这段代码用于根据矩形左上角与屏幕中心的偏移量,计算并设置矩阵的 x 方向位移,以便将矩形移动到屏幕的中心位置,从而实现在屏幕中心进行正确显示和定位。

Matrix4说明:

Matrix4& Matrix4::identity()
{
    m[0] = m[5] = m[10] = m[15] = 1.0f;
    m[1] = m[2] = m[3] = m[4] = m[6] = m[7] = m[8] = m[9] = m[11] = m[12] = m[13] = m[14] = 0.0f;
    return *this;
}


Matrix4& Matrix4::rotateZ(float angle)
{
    angle *= DEG2RAD;
    float c = cosf(angle);
    float s = sinf(angle);
    float m0 = m[0], m1 = m[1], m2 = m[2],  m3 = m[3],
    m4 = m[4], m5 = m[5], m6 = m[6],  m7 = m[7];
    
    m[0] = m0 * c + m4 *-s;
    m[1] = m1 * c + m5 *-s;
    m[2] = m2 * c + m6 *-s;
    m[3] = m3 * c + m7 *-s;
    m[4] = m0 * s + m4 * c;
    m[5] = m1 * s + m5 * c;
    m[6] = m2 * s + m6 * c;
    m[7] = m3 * s + m7 * c;
    
    return *this;
}


Matrix4& Matrix4::scale(float s)
{
    return scale(s, s, s);
}

Matrix4& Matrix4::scale(float x, float y, float z)
{
    m[0] = m[0]*x;   m[1] = m[1]*x;   m[2] = m[2]*x;   m[3] = m[3]*x;
    m[4] = m[4]*y;   m[5] = m[5]*y;   m[6] = m[6]*y;   m[7] = m[7]*y;
    m[8] = m[8]*z;   m[9] = m[9]*z;   m[10]= m[10]*z;  m[11]= m[11]*z;
    return *this;
}

缩放转的矩阵等于:
在这里插入图片描述
沿Z轴旋转的矩阵等于:
在这里插入图片描述

计算重心坐标原理

已知三角形3顶点坐标A(x1,y1),B(x2,y2),C(x3,y3),求三角形ABC的面积的公式

写成一般形式如下:
设A(x1,y1),B(x2,y2),C(x3,y3)在坐标系中中顺序为三点按逆时针排列,对应的权重 ( weight1, weight2, weight3 )

weight1 + weight2 + weight3 = 1

S=1/2[(x1y2-x2y1)+(x2y3-x3y2)+(x3y1-x1y3)]

//分别计算三个点对总面积的贡献 这一步表示每个点在总面积中所占的比例。
S1 = S * weight1;
S2 = S * weight2;
S3 = S * weight3;
//计算加权平均的重心坐标 (xw, yw)
 xw = (S1 * x1 + S2 * x2 + S3 * x3) / S;
 yw = (S1 * y1 + S2 * y2 + S3 * y3) / S;

在这里插入图片描述

在重心坐标系中,三角形平面的任何一个点(x,y)都可以表示成三角形三个顶点的线性组合(系数分别是α β γ \alpha \beta \gammaαβγ,且满足这三个系数相加和为1)
在这里插入图片描述
获得三角形任意一点的重心坐标
在这里插入图片描述

人脸贴纸说明

1=weight1+weight2+weight3
p_index_1=44
weight1=-2.2564
p_index_2=38
weight2=1.6250
p_index_3=37
weight3=1.6314


void processFace2DLocate()
{
    if (m_position == nullptr) {
        Rect rect = m_materialRect;
        rect.origin.x = (m_width - rect.size.width) * 0.5f;
        rect.origin.y = (m_height - rect.size.height) * 0.5f;
        
        // 更新数据
        int count = 4;
        m_position = new Vector2[count];
        m_position[0].set(rect.origin.x, rect.origin.y);
        m_position[1].set(rect.right(), rect.origin.y);
        m_position[2].set(rect.origin.x, rect.bottom());
        m_position[3].set(rect.right(), rect.bottom());
        m_texcoord = new Vector2[count];
        m_texcoord[0].set(0, 0);
        m_texcoord[1].set(1, 0);
        m_texcoord[2].set(0, 1);
        m_texcoord[3].set(1, 1);
        m_indexCount = 6;
        m_pointIndex = new unsigned short[m_indexCount]{0, 1, 2, 2, 1, 3};
        
        m_matrix = new Matrix4;
    }
    
    m_matrix->identity();
    Vector2* point106 = m_face->getPoint106();

    float screenRadio = m_height / m_width;
    float screenRadioFlip = 1.0f / screenRadio;

    float x_dis = std::fabs(point106[32].x - point106[0].x) * screenRadioFlip;
    float y_dis = std::fabs(point106[32].y - point106[0].y);
    // 标准人脸0\32之间的距离
    float standard_face_x = 475.0f / m_width;
    float standard_face_y = 0.0f;
    float scale = std::sqrt(x_dis * x_dis + y_dis * y_dis) / std::sqrt(standard_face_x * standard_face_x + standard_face_y * standard_face_y) * screenRadio;
    
    int index1 = m_2DLocateParam.p_index_1;
    float weight1 = m_2DLocateParam.p_weight_1;
    int index2 = m_2DLocateParam.p_index_2;
    float weight2 = m_2DLocateParam.p_weight_2;
    int index3 = m_2DLocateParam.p_index_3;
    float weight3 = m_2DLocateParam.p_weight_3;
    
    float _x1 = point106[index1].x;
    float _y1 = point106[index1].y;
    float _x2 = point106[index2].x;
    float _y2 = point106[index2].y;
    float _x3 = point106[index3].x;
    float _y3 = point106[index3].y;
    
    // 总面积
    float S = 0.5 * fabs((_x1 * _y2 - _x2 * _y1) + (_x2 * _y3 - _x3 * _y2) + (_x3 * _y1 - _x1 * _y3));
    
    // s_index1
    float S1 = S * weight1;
    // s_index2
    float S2 = S * weight2;
    // s_index3
    float S3 = S * weight3;

    float xw = (S1 * _x1 + S2 * _x2 + S3 * _x3) / S;
    float yw = (S1 * _y1 + S2 * _y2 + S3 * _y3) / S;

    m_matrix->scale(scale);
    
    m_matrix->rotate(m_face->getYaw() * 1.2, 0.0, 1.0, 0.0);
    m_matrix->rotate(m_face->getPitch() * 1.2, 1.0, 0.0, 0.0);
    m_matrix->rotate(m_face->getRoll(), 0.0, 0.0, 1.0);
//    printf("m_face->getRoll() = %f, %f, %f\n", 360 + m_face->getRoll(), m_face->getPitch(), m_face->getYaw());

    // 纹理在屏幕上旋转,x 和 y 需要计算屏幕的比例,防止拉伸
    float *m = (float *)m_matrix->get();
    m[0] *= screenRadio;
    m[4] *= screenRadio;
    m_matrix->scale(screenRadioFlip, 1, 1);
    
    
    m[12] = xw * 2.f - 1.f;
    m[13] = yw * 2.f - 1.f;
}

m_matrix 进行旋转变换,根据人脸的偏航角(yaw)、俯仰角(pitch)和横摆角(roll)来调整姿态。让我给您解释一下:

  1. m_matrix->rotate(m_face->getYaw() * 1.2, 0.0, 1.0, 0.0);

    • 这行代码根据人脸的偏航角(yaw)来进行绕 Y 轴旋转。
    • m_face->getYaw() 是获取人脸的偏航角度,乘以1.2用于增加旋转幅度。
    • 参数 (0.0, 1.0, 0.0) 表示围绕 Y 轴旋转。
  2. m_matrix->rotate(m_face->getPitch() * 1.2, 1.0, 0.0, 0.0);

    • 这行代码根据人脸的俯仰角(pitch)来进行绕 X 轴旋转。
    • m_face->getPitch() 是获取人脸的俯仰角度,乘以1.2用于增加旋转幅度。
    • 参数 (1.0, 0.0, 0.0) 表示围绕 X 轴旋转。
  3. m_matrix->rotate(m_face->getRoll(), 0.0, 0.0, 1.0);

    • 这行代码根据人脸的横摆角(roll)来进行绕 Z 轴旋转。
    • m_face->getRoll() 是获取人脸的横摆角度。
    • 参数 (0.0, 0.0, 1.0) 表示围绕 Z 轴旋转。

在这里插入图片描述

point106[32]和point106[0]分别是左右两边脸部两个点,下面代码为了计算脸部对屏幕上的缩放比例,std::sqrt(x_dis * x_dis + y_dis * y_dis) 计算了特征点索引为 0 和 32 之间的欧几里德距离。同时,std::sqrt(standard_face_x * standard_face_x + standard_face_y * standard_face_y) 则计算了标准人脸上 x 和 y 方向的长度与屏幕尺寸的比例之间的欧几里德距离。

 float x_dis = std::fabs(point106[32].x - point106[0].x) * screenRadioFlip;
    float y_dis = std::fabs(point106[32].y - point106[0].y);
    // 标准人脸0\32之间的距离
    float standard_face_x = 475.0f / m_width;
    float standard_face_y = 0.0f;
    float scale = std::sqrt(x_dis * x_dis + y_dis * y_dis) / std::sqrt(standard_face_x * standard_face_x + standard_face_y * standard_face_y) * screenRadio;

重心坐标值(xw,yw)在[0, 1]范围转化为[-1, 1] 范围,这个顶点坐标标准

   m[12] = xw * 2.f - 1.f;
   m[13] = yw * 2.f - 1.f;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

baoyu45585

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值