2分钟带你了解什么是Vsync

news/2024/7/20 21:20:14 标签: 图形渲染, android, ios, flutter

了解Vsync,首先我们需要认知如下问题

  1. 什么是GPU
  2. CPU在渲染之前起到什么作用
  3. 什么是帧,帧率
  4. 什么是画面撕裂

什么是GPU

GPU为图形处理器,又称显示核心、视觉处理器、显示芯片。

在这里插入图片描述
是一种专门在个人电脑、工作站、游戏机和一些移动设备(如平板电脑、智能手机等)上做图像和图形相关运算工作的微处理器主要用于画面的渲染。

CPU在渲染之前起到什么作用?

在这里插入图片描述
在屏幕显示一个画面时候,他需要获取GPU合成的图层数据,进行渲染,而GPU进行图层合成时候,他的数据来自于CPU计算好的数据。
也就是说,一个画面的显示过程为,CPU通过程序的业务代码运算产生的数据,运输到GPU进行图层合成,发送到屏幕进行渲染显示。

什么是帧,帧率

帧(fps)是一个画面的显示,屏幕一秒显示多少个帧(画面),称为帧率。平时看到的60fps,代表一秒绘制60帧,反过来可以知道,60fps的渲染,一帧大概是需要16.66毫秒。人眼的正常帧率范围是30到60帧之间,如果在程序运行时候产生的画面帧率比这范围更低,视觉看到的画面会出现卡顿,也就是人们说的掉帧。通常手机屏幕的渲染帧数为60fps,高性能的手机为120fps。因此,显示画面的fps越高,意味,画面越流畅

在这里插入图片描述

什么是屏幕撕裂?

通过上面的了解我们已经知道,一个画面的绘制流程,如下图
在这里插入图片描述
每一个帧在显示器上绘制都需要从buffer缓冲区上拿去数据,进行刷新屏幕。在早期,只有一个缓冲区,并没有绘制同步概念,如果一个画面一边读取一边绘制还没完全完毕时候,突然缓冲区的数据被GPU合成的数据替换,就会造成画面有多重画面叠层效果,如下图,

在这里插入图片描述
这种情况称之为画面撕裂。GPU写入过快或写入过慢都会导致画面撕裂。后来为了解决这个问题,人们用了双或多缓冲区来解决这个问题
在这里插入图片描述
提供一个缓冲区提供给GPU写入,提供一个给显示器读取。当GPU写入完毕时候,下一次显示器读取时候,只需要将这两个数据交换即可。这就避免了GPU生产和显示器读取数据时间问题。那么问题又来了, 那么什么时候是写的缓冲区的数据交换到读的buffer缓冲区的最佳时期?答案是,显示器刚好绘制完一帧的时候。显示器绘制完一帧时候会发送一个信号给GPU,如果此时GPU已经写入完成,就会把这个数据与读Buffer缓冲区交换数据。这个信号称之为Vsync,也就是垂直信号,这就是Vsync的由来。


http://www.niftyadmin.cn/n/5246483.html

相关文章

【react】动态页面转换成html文件下载,解决样式问题

需求 今天遇到一个需求,挺恶心人的,将一个在线文档页面,可以导出成为html页面查看。 看到网上有使用fs模块,通过react的ReactDOMServer.renderToStaticMarkup将组件转成html字符串,输出文件了。 但是我尝试了&#x…

CrapApi 本地部署 windows+Linux部署( maven+tomcat+idea)

目录 一、本章节所用到的资源共享,嫌麻烦的可以直接下载本地配置好运行使用二、idea maven tomcat启动,我的maven和tomcat的配置三、遇到的问题四、项目运行后效果图转载请标明出处,写作不易如果有用请给个赞~~~~~~~~~~~~~~~~~~~~~~~~~~~~~…

[Java面试——Java 新版本]

Java 8版本特性,及Java8版本特性。 6.1 Java 8 特性 什么是函数式编程?Lambda表达式? 函数式编程 面向对象编程是对数据进行抽象;函数式编程是对行为进行抽象。 核心思想: 使用不可变值和函数,函数对一个值进行处理…

Docker创建RocketMQ和RocketMQ控制台

安装RocketMQ 安装最新版本的RocketMQ(名为RocketMQ)在Docker上的过程大致可以分为以下步骤: 1. 准备工作 确保你的系统中已经安装了Docker。可以通过运行 docker --version 来验证Docker是否已安装及其版本信息。 2. 拉取RocketMQ镜像 …

AI并行计算:CUDA和ROCm

1 介绍 1.1 CUDA CUDA(Compute Unified Device Architecture)是Nvidia于2006年推出的一套通用并行计算架构,旨在解决在GPU上的并行计算问题。其易用性和便捷性能够方便开发者方便的进行GPU编程,充分利用GPU的并行能力&#xff0…

AI助力智慧农业,基于DETR【DEtection TRansformer】模型开发构建田间作物场景下庄稼作物、杂草检测识别系统

智慧农业随着数字化信息化浪潮的演变有了新的定义,在前面的系列博文中,我们从一些现实世界里面的所见所想所感进行了很多对应的实践,感兴趣的话可以自行移步阅读即可: 《自建数据集,基于YOLOv7开发构建农田场景下杂草…

Vue prop 子组件 给 父组件 使用sync传值 双向数据绑定

父传子 Vue prop组件间通信&#xff08;父传子&#xff09; 父组件 <User :name"userName" />data() {return {userName: 生产队的驴}}子组件 <span>用户名&#xff1a;{{name}}</span><button click"alter">点击给父组件传值&…

JS的变量提升ES6基础

JS的变量提升&ES6基础 变量var关键字var声明作用域实例一实例二多个变量 变量提升 let关键字暂时性死区全局声明for循环中使用let const关键字 变量 ECMAScript变量时松散类型的&#xff0c;意思是变量可以用于保存任何类型的数据。 声明变量&#xff1a;var 、const、let …