iOS图像处理----探索图片解压缩到渲染的全过程以及屏幕卡顿

这篇具有很好参考价值的文章主要介绍了iOS图像处理----探索图片解压缩到渲染的全过程以及屏幕卡顿。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一:图像成像过程

①、将需要显示的图像,由CPU和GPU通过总线连接起来,在CPU中输出的位图经总线在合适的时机上传给GPU ,GPU拿到位图做相应位图的图层渲染、纹理合成。
②、将渲染后的结果,存储到帧缓存区,帧缓存区中存储的格式是位图。
③、由视屏控制器根据Vsync(垂直同步信号)在指定时间之前去提取对应帧缓冲区当中的屏幕内容,交由显示器,从左上角逐行扫描进行显示。
如图所示:

iOS图像处理----探索图片解压缩到渲染的全过程以及屏幕卡顿,图像处理,图像成像,图片解压,图片渲染,屏幕卡顿,图片纹理映射

二:图片纹理映射 

iOS图像处理----探索图片解压缩到渲染的全过程以及屏幕卡顿,图像处理,图像成像,图片解压,图片渲染,屏幕卡顿,图片纹理映射

我们在获取到图片的纹理数据后,要将纹理显示到屏幕上,先要做两件事:

①、将图片的纹理坐标通过 attribute方式,经顶点着色器桥接给片元着色器

②、将图片纹理数据通过Uniform传递给片元着色器,由片元着色器进行图片颜色的填充

在图片进行纹理颜色填充时,需要按照坐标进行一一对应,纹理坐标默认左下角为(0,0),右上角为(0,1)。

纹理的坐标与图形的坐标一一对应,最终会将图片正确的显示出来。如果纹理坐标映射的不正确则可能出现图片翻转、倒置等情况,甚至图片信息错乱。

 三:图片解压

在解释图片解压之前我们先了解几个概念:

①、位图:

又叫像素图或栅格图,它记录了图片每一个像素的颜色、深度、透明度等信息。这一系列像素按照一定的规则排列起来,就形成了我们看到的图片。位图的优点是能够完整记录图片信息,无论图片怎样拉伸都不会失真,缺点是图片文件太大,因此一般将位图压缩为jpg、png等格式。

②、有损压缩:

不会完全真实的记录图片信息,会根据人眼观察世界的特性,忽略掉部分会被人眼忽略的颜色信息,代之以邻近的颜色。因此图片虽然大部分可以还原,但某些情况下还是会失真,常见的有损压缩格式有JPG等。

③、无损压缩:

无损压缩会完整记录图片颜色信息,但是相同颜色的区域,会被压缩记录,因此无损压缩也可以比较完整的还原图片。不过由于能够保存的颜色值有限,所以依然有可能会出现失真,常见的格式有PNG等。

④、解压流程 

在我们的开发过程中,我们使用比较多的都是 JPG 或者 PNG 等格式图片,但是在图片真正显示之前,都会被先解压成位图,再重新渲染到屏幕上。所以图片解压的流程是:

1、解压JPG/PNG图片,获取图片信息
2、根据获取到的图片信息重新绘制位图,即纹理数据
3、将纹理数据载入,传入到片元着色器,经过渲染后显示

⑤、解压方法(Core Graphic) 

UImage *image = [UImage imageNamed:@"fly"];
CGImageRef cgImageRef = [image CGImage]; // 将UImage转换为CGImageRef

// 获取图片宽高
GLuint width = (GLuint)CGImageGetWidth(cgImageRef);
GLuint height = (GLuint)CGImageGetHeight(cgImageRef);

//获取图片的rect
CGRect rect = CGRectMake(0, 0, width, height);

//获取图片的颜色空间
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

// 为图片开辟一片内存区域
// 一个像素点的颜色值包含 RGBA 各8位,共4个字节
void *imageData = malloc(width * height * 4);

// 创建上下文
/**
CGBitmapContextCreate(void * __nullable data,
    size_t width, size_t height, size_t bitsPerComponent, size_t bytesPerRow,
    CGColorSpaceRef cg_nullable space, uint32_t bitmapInfo)

data:如果不为 NULL ,那么它应该指向一块大小至少为 bytesPerRow * height 字节的内存;如果为 NULL ,那么系统就会为我们自动分配和释放所需的内存,所以一般指定 NULL 即可;
width:  图片宽度
height:图片高度
bitsPerComponent:每个颜色分量所占bit数,此处传8位
bytesPerRow:位图的每一行使用的字节数,大小至少为 width * bytes per pixel 字节。当我们指定 0/NULL 时,系统不仅会为我们自动计算,而且还会进行cache line alignment 的优化
space:颜色空间
bitmapInfo:位图的信息,此处采用RGBA,即kCGImageAlphaPremultipliedLast
*/
CGContextRef context = CGBitmapContextCreate(imageData, width, height, 8, width * 4, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);

// 将图片翻转过来(图片默认是倒置的)
// 图片的坐标系左上角为(0,0),纹理坐标左下角为(0,0),因此需要翻转
CGContextTranslateCTM(context, 0, height);
CGContextScaleCTM(context, 1.0f, -1.0f);

// 绘制前先清除颜色空间和绘图区域,防止残留数据
CGColorSpaceRelease(colorSpace);
CGContextClearRect(context, rect);

// 对图片进行重新绘制,得到一张新的解压缩后的位图
CGContextDrawImage(context, rect, cgImageRef);

// 设置图片纹理属性
// 获取纹理ID
GLuint textureID;
glGenTextures(1, &textureID); // 获取一个纹理句柄
glBindTexture(GL_TEXTURE_2D, textureID); // 将句柄绑定到纹理目标上,GL_TEXTURE_2D等

// 设置纹理属性
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(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, 0); // 将纹理目标重新绑定为0

CGContextRelease(context); // 释放context
free(imageData); // 释放图片数据区域

⑥、总结

  • 1、图片文件只有在确认要显示时,CPU才会对齐进行解压缩.因为解压是非常消耗性能的事情.解压过的图片就不会重复解压,会缓存起来.

  • 2、图片渲染到屏幕的过程: 读取文件->计算Frame->图片解码->解码后纹理图片位图数据通过数据总线交给GPU->GPU获取图片Frame->顶点变换计算->光栅化->根据纹理坐标获取每个像素点的颜色值(如果出现透明值需要将每个像素点的颜色*透明度值)->渲染到帧缓存区->渲染到屏幕

 四、图片渲染流程

iOS图像处理----探索图片解压缩到渲染的全过程以及屏幕卡顿,图像处理,图像成像,图片解压,图片渲染,屏幕卡顿,图片纹理映射

1、App通过CoreGraphics、CoreAnimation、CoreImage等框架的接口调用来触发图形渲染操作
2、CoreGraphics、CoreAnimation、CoreImage等框架将渲染交由OpenGL ES,由OpenGL ES来驱动GPU做渲染,最后显示到屏幕上
3、由于OpenGL ES 是跨平台的,所以在他的实现中,没有任何窗口相关的代码,而是让各自的平台为OpenGL ES提供载体。在iOS中,如果需要使用OpenGL ES,就是通过CoreAnimation提供窗口,让App可以去调用。 

 五、屏幕卡顿

屏幕卡顿是指图形图像的在显示时出现了撕裂(即图片错位显示)、掉帧(重复显示同一帧数据)等问题,导致用户能直观的从屏幕上看到的一种异常现象。

 ①、屏幕卡顿原因

1、由图像的显示原理,我们知道一帧的显示是由CPU和GPU共同决定的。一般来说,页面滑动流畅是60fps,也就是1s有60帧更新,即每隔16.7ms就要产生一帧画面,而如果CPU和GPU加起来的处理时间超过了16.7ms,从缓存区获取位图显示时,下一帧数据还没准备好,获取的仍是上一帧的数据,产生掉帧现象,掉帧就会导致屏幕卡顿。

2、苹果官方为解决屏幕撕裂问题,目前使用的方案是垂直同步+双缓存区,可以从根本上防止和解决屏幕撕裂,但是同时也导致了新的问题掉帧。虽然我们采用了双缓存区,但是我们并不能解决CPU和GPU处理图形图像的速度问题,导致屏幕在接收到垂直信号时,数据尚未准备好,缓存区仍是上一帧的数据,因此导致掉帧,如图5-1-2所示。


3、在垂直同步+双缓存区方案的基础上,提出将双缓存区,改为三缓存区的优化,但是这样并不能从根本解决掉帧问题,只是比双缓存区掉帧的概率小很多,用户可能无感知。

iOS图像处理----探索图片解压缩到渲染的全过程以及屏幕卡顿,图像处理,图像成像,图片解压,图片渲染,屏幕卡顿,图片纹理映射

                                                                                  图5-1-2 

②、垂直同步与双缓存区 

1、VSync(垂直同步信号):是指给帧缓冲加锁,当电子光束扫描的过程中,只有扫描完成了才会读取下一帧的数据,而不是只读取一部分


2、双缓存区:采用两个帧缓冲区用来存储GPU处理的结果,当屏幕显示其中一个缓存区内容时,另一个缓冲区继续等待下一个缓冲结果,两个缓冲区依次进行交替文章来源地址https://www.toymoban.com/news/detail-830828.html

到了这里,关于iOS图像处理----探索图片解压缩到渲染的全过程以及屏幕卡顿的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【计算机视觉】数字图像处理(六)—— 图像压缩

    (一)、图像编码技术的研究背景 1. 信息信息传输方式发生了很大的改变 通信方式的改变 文字+语音 图像+文字+语音 通信对象的改变 人与人 人与机器,机器与机器 2. 图像传输与存储需要的信息量空间 (1)彩色视频信息 对于电视画面的分辨率640 480的彩色图像,每秒30帧,

    2024年02月05日
    浏览(86)
  • Python图像处理【10】基于离散余弦变换的图像压缩

    由于图像中相邻像素间的相关性引起的空间冗余、图像序列中不同帧之间存在相关性引起的时间冗余,因此我们需要对图像数据进行压缩。数据压缩的目的就是通过去除这些数据冗余来减少数据表示所占用的存储空间。随着大数据时代的到来,图像数据在质量提高的同时,其

    2024年02月04日
    浏览(64)
  • 图像处理之DCT图像压缩(基于c++ opencv实现)

    是老师布置的作业,拖到ddl才开始,opencv也才刚接触,有自己结合百度的一点理解,如有误,请谅解! 先贴一段在matlab上实现的代码,这个在网上都可以查到,就不赘述了 思路如下:      先划分处理块大小,对每个块分别进行DCT变换,再舍弃每个块中的高频系数,再进行

    2024年02月09日
    浏览(69)
  • “探索图像处理的奥秘:使用Python和OpenCV进行图像和视频处理“

     1、上传图片移除背景后下载。在线抠图软件_图片去除背景 | remove.bg – remove.bg 2、对下载的图片放大2倍。ClipDrop - Image upscaler  3、对放大后的下载照片进行编辑。  4、使用deepfacelive进行换脸。 1)将第三步的照片复制到指定文件夹。C:myAppdeepfakelivetempDeepFaceLive_NVIDIAuserda

    2024年02月16日
    浏览(96)
  • 探索图像处理的利器——OpenCV

    目录 引言: 一、OpenCV简介: 二、OpenCV的特点: 三、OpenCV的应用领域: 四、实际案例: 结论: 在当今信息化的时代,图像处理已经成为了日常生活中不可或缺的一部分。从社交媒体滤镜到自动驾驶系统,图像处理技术的广泛应用正在改变着我们的生活。而在图像处理领域,

    2024年02月11日
    浏览(38)
  • 15.1 BP神经网络实现图像压缩——了解神经网络在图像处理方面的应用(matlab程序)

    1. 简述        BP神经网络现在来说是一种比较成熟的网络模型了,因为神经网络对于数字图像处理的先天优势,特别是在图像压缩方面更具有先天的优势,因此,我这一段时间在研究神经网络的时候同时研究了一下关于BP网络实现图像压缩的原理和过程,并且是在MATLAB上进行了仿真

    2024年02月12日
    浏览(41)
  • 探索文档图像大模型,提升智能文档处理性能

    自 ChatGPT 于 2022 年 11 月发布以来,大模型的相关研究在全世界的学术界和工业界都引起了广泛的关注,大模型技术也为智能文档处理领域带来了新的机遇。通过在智能文档处理领域训练和应用大规模深度学习模型,能够提供更准确、全面的文档理解与分析,改善文档图像识别

    2024年02月03日
    浏览(37)
  • MATLAB 图像处理 (二值化,image图片黑白处理)

    Q: MATLAB如何将图片进行 二值化 ,并将 二值化后图片 中的 黑色变成白色 , 原本的白色保持不变,黑白之间的黑色轮廓保持不变。 A: 使用 MATLAB 中的 imbinarize 函数 进行图片二值化。将指定阈值以下的像素值设为 0,其他像素值设为 1。 然后可以使用逻辑取反运算符 ~ (波浪线

    2023年04月08日
    浏览(45)
  • OpenCV(图像处理)-图片搜索

    Opencv进行图片搜索需要的知识有:特征点匹配+单应性矩阵知识,特征点匹配作者前面文章有记录。 单应性矩阵:两个不同视角上的点所对应的单应性矩阵可以用同一个射影变换来表述可以简单理解为变换矩阵H,x1 = h*x2 分别计算查询图片和训练图片的特征点和特征点的描述子

    2024年02月13日
    浏览(45)
  • 图像处理:灰度图片线性截断拉伸

           很多时候,灰度图片的灰度级较大,而像素值的分布比较集中,这就导致灰度级的利用率过低,从而导致图片的对比度很小,人眼的感官体验很不好,因此我们通常需要对原始的图像数据进行拉伸调整,增加图片的对比度以适应人眼观察。当前很多红外摄像机拍摄

    2024年02月06日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包