OpenGL-贴纸方案

2024-03-13 20:04
文章标签 方案 opengl 贴纸

本文主要是介绍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=1280Matrix.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.x和m_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 = 1S=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.6314void 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_index1float S1 = S * weight1;// s_index2float S2 = S * weight2;// s_index3float 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;

这篇关于OpenGL-贴纸方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/806045。

相关文章

Java进行文件格式校验的方案详解

Java进行文件格式校验的方案详解

《Java进行文件格式校验的方案详解》这篇文章主要为大家详细介绍了Java中进行文件格式校验的相关方案,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、背景异常现象原因排查用户的无心之过二、解决方案Magandroidic Number判断主流检测库对比Tika的使用区分zip
阅读更多...
IDEA中Git版本回退的两种实现方案

IDEA中Git版本回退的两种实现方案

《IDEA中Git版本回退的两种实现方案》作为开发者,代码版本回退是日常高频操作,IntelliJIDEA集成了强大的Git工具链,但面对reset和revert两种核心回退方案,许多开发者仍存在选择... 目录一、版本回退前置知识二、Reset方案：整体改写历史1、IDEA图形化操作（推荐）1.1、查看提
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Java使用多线程处理未知任务数的方案介绍

Java使用多线程处理未知任务数的方案介绍

《Java使用多线程处理未知任务数的方案介绍》这篇文章主要为大家详细介绍了Java如何使用多线程实现处理未知任务数,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 知道任务个数，你可以定义好线程数规则，生成线程数去跑代码说明：1.虚拟线程池：使用 Executors.newVir
阅读更多...
MySQL中闪回功能的方案讨论及实现

MySQL中闪回功能的方案讨论及实现

《MySQL中闪回功能的方案讨论及实现》Oracle有一个闪回（flashback）功能,能够用户恢复误操作的数据,这篇文章主要来和大家讨论一下MySQL中支持闪回功能的方案,有需要的可以了解下... 目录1、 闪回的目标2、 无米无炊一3、 无米无炊二4、 演示5、小结oracle有一个闪回（flashb
阅读更多...
Android App安装列表获取方法(实践方案)

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式
阅读更多...
Java嵌套for循环优化方案分享

Java嵌套for循环优化方案分享

《Java嵌套for循环优化方案分享》介绍了Java中嵌套for循环的优化方法,包括减少循环次数、合并循环、使用更高效的数据结构、并行处理、预处理和缓存、算法优化、尽量减少对象创建以及本地变量优化,通... 目录Java 嵌套 for 循环优化方案1. 减少循环次数2. 合并循环3. 使用更高效的数据结构4
阅读更多...
Vue中动态权限到按钮的完整实现方案详解

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表（routes）1.2 修改角色与路由权限表（role_routes）二、后端接口设计
阅读更多...
Redis 多规则限流和防重复提交方案实现小结

Redis 多规则限流和防重复提交方案实现小结

《Redis多规则限流和防重复提交方案实现小结》本文主要介绍了Redis多规则限流和防重复提交方案实现小结,包括使用String结构和Zset结构来记录用户IP的访问次数,具有一定的参考价值,感兴趣... 目录一：使用 String 结构记录固定时间段内某用户 IP 访问某接口的次数二：使用 Zset 进行
阅读更多...
解读Redis秒杀优化方案(阻塞队列+基于Stream流的消息队列)

解读Redis秒杀优化方案(阻塞队列+基于Stream流的消息队列)

《解读Redis秒杀优化方案(阻塞队列+基于Stream流的消息队列)》该文章介绍了使用Redis的阻塞队列和Stream流的消息队列来优化秒杀系统的方案,通过将秒杀流程拆分为两条流水线,使用Redi... 目录Redis秒杀优化方案(阻塞队列+Stream流的消息队列)什么是消息队列？消费者组的工作方式每
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2