关键词：
一、为什么要了解UVMap
在我的博客 【我的Android进阶之旅】在Android中使用MediaPipe库在实时视频源上实现人脸网格Face Mesh的绘制
里面有简单介绍：最终要实现 增强人脸Augmented Faces 的话，里面有个重要步骤是使用UV贴图来绘制面部图案。
1.1 实现 增强人脸Augmented Faces 的架构
程序的架构如图所示，过程描述如下：
- 首先我们需要调取
Camera，获得相机画面 - 然后通过
MediaPipe加载人脸识别模型，并生成Face Mesh - 根据
Face Mesh生成三角网格，并进行UV贴图，绘制面部图案 - 通过
人脸特征点计算出Matrix，和面部动作识别 加载3D模型，并对其应用Matrix，使其出现在正确的位置- 控制模型做出眨眼、张嘴等面部动作
二、UVMap
2.1 简单提了一下UV Map
在上一篇博客 【我的Android进阶之旅】在Android中使用MediaPipe库在实时视频源上实现人脸网格Face Mesh的绘制里面简单介绍了一下 UV Map，如下所示：
UV是二维纹理坐标，U代表水平方向，V代表垂直方向。
UV Map用来描述三维物体表面与图像纹理(Texture) 的映射关系，有了UV Map，我们就可以将二维的图像纹理粘贴到三维的物体表面。
关于UVMap的更多资料可以参考下面的视频
但是还不够深入，所以想在这篇文章重新介绍一下UVMap。
2.2 UVmap基本概念
UV是二维纹理坐标，U代表水平方向，V代表垂直方向。它定义了图片上每个点的位置的信息。这些点与3D模型是相互联系的, 以决定表面纹理贴图的位置。
UV就是将图像上每一个点精确对应到模型物体的表面. 在点与点之间的间隙位置由软件进行图像光滑插值处理。这就是所谓的UV贴图。
UV Map用来描述三维物体表面与图像纹理(Texture) 的映射关系，有了UV Map，我们就可以将二维的图像纹理粘贴到三维的物体表面。
简单的来说，就是将三维物体上的点映射到二维空间上。
我们可以将三维物体上的任意一个点都映射到一个2维平面之上，举一个简单例子，地球仪：
倘若拥有从3维World space到2维Texture space的一个映射关系，那么只需要将每个点的颜色信息即漫反射系数存储在2维的Texture之上，每次利用光照模型进行计算的时候根据映射关系就能查到这个点的漫反射系数是多少，所有点计算完之后，结果就像最左边的screen space之中，整个Texture被贴在了模型之上。
有了Texture，有了映射关系，对渲染结果会有一个非常大提升，因为很多fancy的效果都可以通过texture的设计得到(当然这属于美术的活儿了，咱们用就行了)。可以看这样一个有点丑的例子。
可以看到在利用texture渲染之后，这个独眼怪物丑的更有特点了。
我们平时经常接触的三维模型，不管他是多复杂，都是由很多个面(即Mesh)来组成。
但是在模型不只是用来看外形，还需要在模型上制作贴图，让模型看起来更生动。
但是模型本身是三维的，图片却只能作为二维的方式存储，UVMap其实只是三维转换到二维的一种解决办法。
例如：左侧就是切割好的三维模型，右侧则是把切好的部件以二维的方式平铺开的样子。
如果还没理解，这里有个更生动的gif可以参考。
这个3D模型
展开之后的UV贴图
2.3 UVmap中UV坐标的理解
UV坐标为纹理坐标，在纹理空间中，任意一个二维坐标都在【0，1】内。
纹理坐标的U和V的最大值均为1，每张纹理图Texture map的（u，v）坐标均可存储在三维Mesh的各个顶点信息中，这个存储操作即为两者之间的映射关系。
在UV坐标系（或者UVW坐标系）中，显示器水平方向是U（大小0-1），显示器竖直方向是V（大小0-1），（W的方向垂直于显示器表面） 纹理的映射是将纹理图贴到多边形表面的过程。
映射就是通过（u，v）坐标去查找对应的颜色值，例如下图：
上面的图是一个很简单的示意图，其中（0,0）点和（1,1）点可能根据引擎或者其他的规定，位置会有变化，但是大体来说基本上都是这样的。如果你的UV是（0.1, 0.1)取得颜色值就是绿色，如果你的UV是 (0.2, 0.8)取得颜色值就是粉色，如果你的UV是（0.7, 0.2)取得颜色值就是蓝色，如果你的UV是（0.9,0.9) 取得颜色值就是黄色。
2.4 UVmap的设计原则
一般来说，最合理的UV分布取决于纹理类型、模型构造、模型在画面中的比例、渲染尺寸等，但有一些基本的原则要注意：
- 贴图不能拉伸，尽量保持横平竖直
- 尽量减少UV的接缝
- 解封应该放在隐蔽处
- 尽量充分地使用贴图空间
- 有良好的识别性
2.5 介绍UVMap的视频
- Intro to Blender UV Mapping
- UV Maps Explained
- Introduction to UV Mapping - Learn the Complete Basics
- Blender Texturing tutorial - Blender Texture Mapping tutorial (Blender UV mapping simplified)
- Blender 2.90 How to create a UV map for texture
- 更多视频可在YouTube搜索
三、 Mesh的基本概念
Mesh用于描述物体的形状。使用三角面来存储。
储存的信息：
- 顶点。每个三角形的三个顶点。
- 边。每个三角形的边。
- 面。每个三角形为一个面。
四、扩展阅读
参考网站
- https://blog.csdn.net/heyuchang666/article/details/52626998
- https://zhuanlan.zhihu.com/p/144332091
- https://www.zhihu.com/question/31064727/answer/214501874
- https://blog.csdn.net/qq340635610/article/details/78568764
- https://blog.csdn.net/qq_31828933/article/details/54376078
我的opengl学习进阶之旅opengl的坐标系的学习笔记
在学习OpenGL的时候，肯定是要学习坐标变化的，但是实际上我学的不扎实，很多时候感觉很懵逼，今天重新学习一下OpenGL的坐标系，收集下网上的资料整理下这篇笔记。一、OpenGL坐标变化OpenGL最终将图形渲染到的设备屏幕本质上... 查看详情
我的opengl学习进阶之旅关于3d模型知识之：什么是obj文件和mtl文件(代码片段)
文章目录一、学习3D模型的背景二、3D模型效果展示三、好奇3D模型文件是啥内容？3.1打开.obj文件3.2打开.obj文件3.3在外部使用查看3D模型的软件打开.obj文件3.3.1通过3D查看器软件打开3.3.2通过Blender软件打开四、正式介绍.obj文件和.m... 查看详情
我的渲染技术进阶之旅opengles使用表面剔除和深度测试解决渲染3d模型的时候，出现背面黑点的问题
文章目录一、效果对比1.1出问题的效果1.2修复后正常的效果二、什么是隐藏面消除（Hiddensurfaceelimination）问题？三、隐藏面消除问题的解决方案3.1油画算法（过时且浪费性能-重复渲染）3.2正背⾯剔除(FaceCulling)3.2.1背景：3.2.2问题... 查看详情
我的渲染技术进阶之旅opengles使用表面剔除和深度测试解决渲染3d模型的时候，出现背面黑点的问题
文章目录一、效果对比1.1出问题的效果1.2修复后正常的效果二、什么是隐藏面消除（Hiddensurfaceelimination）问题？三、隐藏面消除问题的解决方案3.1油画算法（过时且浪费性能-重复渲染）3.2正背⾯剔除(FaceCulling)3.2.1背景：3.2.2问题... 查看详情
我的opengl学习进阶之旅学习opengles3.0的实战awsomedemo（下）之图片转场和轮播特效专场
前面两篇文章【我的OpenGL学习进阶之旅】学习OpenGLES3.0的实战AwsomeDemo（上）【我的OpenGL学习进阶之旅】学习OpenGLES3.0的实战AwsomeDemo（中）介绍了一下项目和部分案例效果展示，这篇接着介绍其他的案例效果展... 查看详情
我的opengl学习进阶之旅学习opengles3.0的实战awsomedemo（下）之图片转场和轮播特效专场
前面两篇文章【我的OpenGL学习进阶之旅】学习OpenGLES3.0的实战AwsomeDemo（上）【我的OpenGL学习进阶之旅】学习OpenGLES3.0的实战AwsomeDemo（中）介绍了一下项目和部分案例效果展示，这篇接着介绍其他的案例效果展... 查看详情
我的opengl学习进阶之旅egl简介(代码片段)
一、EGL简介1.1OpenGLES命令需要渲染上下文和绘制表面OpenGLES命令需要渲染上下文和绘制表面。渲染上下文存储相关的OpenGLES状态。绘制表面是用于绘制图元的表面，它指定渲染所需的缓冲区类型，例如颜色缓冲区、深度缓... 查看详情
我的opengl学习进阶之旅opengles3.0新功能
...们来概述一下OpenGLES3.0中新增的主要功能。原文：【我的OpenGL学习进阶之旅】OpenGLES3.0新功能https://ouya 查看详情
我的渲染技术进阶之旅glfw库简单介绍(代码片段)
文章目录一、为啥去了解glfw?二、glfw相关资料三、glfw简单示例1.引入GLFW头文件2.初始化和终止GLFW3.设置错误回调4.创建窗口和上下文5.使OpenGL上下文成为当前上下文6.检查窗口关闭标志7.接收输入事件8.使用OpenGL渲染9.读取定时器10.... 查看详情
我的opengl学习进阶之旅assimp库支持哪些3d模型格式？(代码片段)
一、LearnOpenGL中介绍Assimp在通过LearnOpenGL学习OpenGL知识的时候，有介绍如何通过Assimp来加载3D模型，并了解了Mesh网格的概念。AssimpMesh网格3D模型在https://learnopengl-cn.github.io/03%20Model%20Loading/01%20Assimp/中有介绍使用Assimp库来加... 查看详情
我的opengl学习进阶之旅opengles3.0新功能
...们来概述一下OpenGLES3.0中新增的主要功能。原文：【我的OpenGL学习进阶之旅】OpenGLES3.0新功能https://ouyangpeng.blog.csdn.net/article/details/1212293801.1纹理OpenGLES3.0引入了许多和纹理相关的新功能：sRGB纹理和帧缓冲区允许应用程序执... 查看详情
我的渲染技术进阶之旅glm使用手册glm0.9.9manual(代码片段)
...图形软件的仅头文件C++数学库。在我之前的博客【我的OpenGL学习进阶之旅】OpenGLES开发如何引入GLM（OpenGLMathematics）库？有介绍如何引入GLM库。但是有时候得查一下GLM库的用法，就得去查看【GLM 查看详情
我的opengl学习进阶之旅学习opengles3.0的实战awsomedemo（中）
上一篇文章【我的OpenGL学习进阶之旅】学习OpenGLES3.0的实战AwsomeDemo（上）介绍了一下项目和部分案例效果展示，这篇接着介绍其他的案例效果展示。三篇完整版链接：【我的OpenGL学习进阶之旅】学习OpenGLES3.0的实... 查看详情
我的opengl学习进阶之旅学习opengles3.0的实战awsomedemo（上）
...了一个Demo工程，记录学习。三篇完整版链接：【我的OpenGL学习进阶之旅】学习OpenGLES3.0的实战AwsomeDemo（上）【我的OpenGL学习进阶之旅】学习OpenGLES3.0的实战AwsomeDemo（中）【我的OpenGL学习进 查看详情
我的opengl学习进阶之旅opengles对android平台的支持情况(代码片段)
一、OpenGLES对Android平台的支持情况在android的官方文档OpenGLES中有介绍，如下所示：Android可通过开放图形库(OpenGL®)（特别是OpenGLESAPI）来支持高性能2D和3D图形。OpenGL是一种跨平台的图形API，用于为3D图形处理硬... 查看详情
我的opengl学习进阶之旅关于opengl实现相机/图片滤镜的功能项目
一、背景最近得自己使用OpenGL来实现一些相机/图片滤镜特效，当然，得学一学各位OpenGL前辈是怎么做的。就去网上搜索了一些关于OpenGL实现滤镜特效的项目，以供学习和参考，下面我们就列一下收集到的项目。二、参考链接首... 查看详情
我的opengl学习进阶之旅关于opengl实现相机/图片滤镜的功能项目
一、背景最近得自己使用OpenGL来实现一些相机/图片滤镜特效，当然，得学一学各位OpenGL前辈是怎么做的。就去网上搜索了一些关于OpenGL实现滤镜特效的项目，以供学习和参考，下面我们就列一下收集到的项目。二、参考链接首... 查看详情
我的渲染技术进阶之旅让我们一起来了解一下什么是gltf？为什么gltf是3d世界的jpeg？
文章目录一、为什么我要了解glTF?1.1Filament渲染`glTF2.0`格式的3D模型1.1Blender、Maya或Tinkercad等3D建模软件导入和导出`glTF2.0`格式的3D模型1.1.1导入tiger.glb文件1.1.2导入glb文件二、收集到的glTF资料三、glTF大致讲一下3.1GLTF3.1.1什么是GLTF... 查看详情