本发明涉及虚拟现实技术领域,更具体的说,涉及一种浏览器分屏的方法、装置及移动终端。
背景技术:
近年来,虚拟现实技术以其逼真实时的内容展现形式,受到了越来越多人的追捧,为迎合市场需求,很多热门行业如游戏、电影等公司纷纷大力开发虚拟现实世界。虚拟现实(Virtual Reality,VR)设备的显示原理是左右眼屏幕上分别显示左右眼的图像,人眼获取这种带有差异的信息后,在脑海中产生立体感,从而产生一种身在虚拟环境中的感觉。因此,VR设备中必不可少的一个技术是浏览器分屏技术。
目前,实现浏览器分屏的方案主要有两种:一种是双网页试图控件(webview)分屏方案,一种是双拷贝(copy)分屏方案。双网页试图控件分屏方案的原理为:Chromium(Chromium是Google的chrome浏览器背后的引擎,其目的是为了创建一个安全、稳定和快速的通用浏览器)在Android上将显示页面绘制到网页试图控件(surfaceview)上,浏览器为每个页面创建一个网页试图控件,并为每个网页试图控件创建一个进程(该进程可称之为渲染进程)来渲染这个网页。也就是说,双网页试图控件分屏方案相当于浏览器为显示页面创建两个网页试图控件,并相应的创建两个渲染进程来渲染显示页面。因此耗费资源较大,容易在显示页面复杂时出现卡顿延迟等现象。双拷贝分屏方案的原理为:首先拷贝画在网页显示控件上的图像;然后将拷贝的图像显示在图像显示控件(Imageview,即Android中用来显示的图像的视图)上。也就是说,双拷贝分屏方案中的显示页面,包括:网页显示控件显示的图像以及通过拷贝在图像显示控件显示的图像。由于双拷贝分屏方案需要不停的拷贝网页显示控件显示的图像,并在图像显示控件显示,因此耗费资源也较大,容易出现卡顿延迟等现象。
综上,如何提供一种浏览器分屏的方法及装置,以解决传统方案中耗费资源大,容易出现卡顿延迟等问题,是本领域技术人员亟需解决的技术问题。
技术实现要素:
有鉴于此,本发明公开一种浏览器分屏的方法、装置及移动终端,以解决传统方案在进行浏览器分屏时,耗费资源大,容易出现卡顿延迟等问题。
一种浏览器分屏的方法,包括:
获取待显示页面的渲染树;
为所述渲染树中满足预设合成条件的每一个渲染树节点创建一个合成图层,并为每一个合成图层创建一个离屏帧缓存对象;
将当前帧图像的画布的显示区域划分为左半部分和右半部分;
利用实例化的直接渲染器,将各所述合成图层对应的渲染纹理,按照预设顺序画在所述左半部分;
按照相同的操作,再次将相同的各所述渲染纹理,按照所述预设顺序画在所述右半部分;
当接收到刷新指令时,调用画图操作,将每一个所述离屏帧缓存对象在画所述当前帧图像的过程中存储的画图指令,作用于对应的纹理对象上,得到用于在图形处理器显示的纹理。
优选的,所述获取待显示页面的渲染树包括:
获取所述待显示页面对应的链接;
根据所述链接下载所述待显示页面;
通过渲染进程解析所述待显示页面,生成所述待显示页面的文档树;
根据所述文档树生成渲染树。
优选的,在所述得到用于在图行处理器显示的纹理之后,还包括:
将所述纹理发送给图形处理器进程,通过所述图形处理器进程对所述纹理进行显示,实现对所述待显示页面的显示。
一种浏览器分屏装置,包括:
获取单元,用于获取待显示页面的渲染树;
创建单元,用于为所述渲染树中满足预设合成条件的每一个渲染树节点创建一个合成图层,并为每一个合成图层创建一个离屏帧缓存对象;
区域划分单元,用于将当前帧图像的画布的显示区域划分为左半部分和右半部分;
第一绘画单元,用于利用实例化的直接渲染器,将各所述合成图层对应的渲染纹理,按照预设顺序画在所述左半部分;
第二绘画单元,用于按照相同的操作,再次将相同的各所述渲染纹理,按照所述预设顺序画在所述右半部分;
指令作用单元,用于当接收到刷新指令时,调用画图操作,将每一个所述离屏帧缓存对象在画所述当前帧图像的过程中存储的画图指令,作用于对应的纹理对象上,得到用于在图形处理器显示的纹理。
优选的,所述获取单元包括:
获取子单元,用于获取所述待显示页面对应的链接;
下载子单元,用于根据所述链接下载所述待显示页面;
第一生成子单元,用于通过渲染进程解析所述待显示页面,生成所述待显示页面的文档树;
第二生成子单元,用于根据所述文档树生成渲染树。
优选的,还包括:
发送单元,用于将所述纹理发送给图形处理器进程,通过所述图形处理器进程对所述纹理进行显示,实现对所述待显示页面的显示。
一种移动终端,包括上述所述的浏览器分屏装置。
从上述的技术方案可知,本发明公开了一种浏览器分屏的方法、装置及移动终端,在为待显示页面的渲染树的每一个渲染树节点创建一个合成图层后,还为每一个合成图层创建一个离屏帧缓存对象;通过将当前帧图像的画布的显示区域划分为左半部分和右半部分,并分别在左半部分和右半部分执行相同的画图指令操作,实现对待显示页面的预分屏操作,得到渲染完成的预处理分屏图像;当接收到刷新指令时,调用画图操作,将每一个离屏帧缓存对象在画当前帧图像的过程中存储的画图指令,作用于对应的纹理对象上,得到用于在图形处理器显示的纹理,实现对待显示页面的实际分屏。由此可知,本发明是在将待显示页面发送至图形处理器之前,得到渲染完成的预处理分屏图像,相比传统方案而言,本发明中图形处理器是同时获取渲染完成的预处理分屏图像,因此在对图像分屏显示时不会存在卡顿延迟现象,并且,本发明还大大减小了图形处理器在进行分屏处理时的数据处理量,从而大大节省了资源。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据公开的附图获得其他的附图。
图1为本发明实施例公开的一种浏览器分屏的方法流程图;
图2为本发明实施例公开的一种获取待显示页面的渲染树的方法流程图;
图3为本发明实施例公开的一种浏览器分屏装置的结构示意图;
图4为本发明实施例公开的一种获取单元的结构示意图;
图5为本发明实施例公开的一种移动终端的硬件结构框图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
本发明实施例公开了一种浏览器分屏的方法、装置及移动终端,以解决传统方案在进行浏览器分屏时,耗费资源大,容易出现卡顿延迟等问题。
参见图1,本发明实施例公开的一种浏览器分屏的方法流程图,该方法包括步骤:
步骤S101、获取待显示页面的渲染树;
具体的,CSSOM树和DOM树连接在一起形成一个渲染树(render tree),渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。
渲染树(render tree)只包含了用于渲染页面(即本申请中的待显示页面)的节点。渲染树用来描述所有可见的DOM内容,并且将CSSOM样式信息附加到节点上。
其中,本实施例基于chromium内核获取待显示页面的渲染树。“chromium”是一个google开源的浏览器项目,意在创建一个更快更安全更稳定的浏览器。
步骤S102、为所述渲染树中满足预设合成条件的每一个渲染树节点创建一个合成图层,并为每一个合成图层创建一个离屏帧缓存对象;
需要说明的是,一个渲染树中通常包含有很多个渲染树节点,若为所有的渲染树节点都创建合成图层,必然会占用大量的合成资源,并且,在实际应用中,对于一些渲染树节点是无需创建合成图层的,因此,本实施例中设定了预设合成条件,并对满足该预设合成条件的渲染树节点创建对应的合成图层。
预设合成条件具体依据实际需要而定,如渲染树节点具有3D属性、视频需要单独用一个图层等等。
离屏帧缓存对象(Frame Buffer Object,FBO):在图形渲染引擎中,Layer(图层)会对应有一个Backing Surface。在软件方式渲染中,Backing Surface(后端存储)就是一个内存Buffer(缓冲区)。在硬件方式渲染中,Backing Surface就是一个FBO。
步骤S103、将当前帧图像的画布的显示区域划分为左半部分和右半部分;
可以理解的是,虚拟现实设备的显示原理是左右眼屏幕上分别显示左右眼的图像,人眼获取这种带有差异的信息后,在脑海中产生立体感,从而产生一种身在虚拟环境中的感觉。因此,为实现左右眼屏幕上分别显示左右眼的图像,需要将浏览器进行分屏。本实施例中,将当前帧图像的画布的显示区域划分为左半部分和右半部分的目的是为实现浏览器分屏做准备。
步骤S104、利用实例化的直接渲染器,将各所述合成图层对应的渲染纹理,按照预设顺序画在所述左半部分;
需要说明的是,本实施例中,在启动硬件加速的情况下,用直接渲染器来画图。
预设顺序指的是将渲染纹理按照合成图层的排列顺序画在画布的左半部分。
步骤S105、按照相同的操作,再次将相同的各所述渲染纹理,按照所述预设顺序画在所述右半部分;
需要说明的是,本实施例中,左半部分和右半部分为两个完全相同的区域,且两个区域绘制的内容完全相同。
具体的,在直接渲染器画待显示页面的每一帧图像的时,直接渲染器会将合成图层对应的渲染纹理一个一个的画在当前帧图像的画布上。传统方案中是将整个画布一次性全部画满。而本实施例中,在画每一帧图像的画布时,首先将合成图层对应的渲染纹理画在当前帧画布的左半部分,然后按照相同的操作,再将相同的渲染纹理画在当前帧画布的右半部分。在实际应用中,可以通过设置画图的裁剪区域(即画图区域)来实现。
举例说明,如整个画布左上角坐标为(0,0),整个画布宽30高20,将左上角坐标为(0,0),宽15高20对应的裁剪区域设定为画布的左半部分,将左上角坐标为(15,0),宽15高20对应的裁剪区域设定为画布的右半部分;
首先利用实例化的直接渲染器,将各合成图层对应的渲染纹理,按照预设顺序画在画布的左半部分,然后按照相同的操作,将相同的渲染纹理,按照预设顺序画在画布的右半部分。
需要说明的是,在实际应用中,步骤S104和步骤S105的执行顺序包括但不局限于本实施例示出的顺序,也可以先执行步骤S105,后执行步骤S104,即先将渲染纹理画在画布的右半部分,再将渲染纹理画在画布的左半部分,或是右半部分和左半部分同时画。
步骤S106、当接收到刷新指令时,调用画图操作,将每一个所述离屏帧缓存对象在画所述当前帧图像的过程中存储的画图指令,作用于对应的纹理对象上,得到用于在图形处理器显示的纹理。
需要说明的是,当离屏帧缓存对象创建完成后,离屏帧缓存对象会收集并存储步骤S103~步骤S105各执行步骤中的画图指令,由于在步骤S105执行完成之前,离屏帧缓存对象并不会将画图指令发送给GPU(Graphics Processing Unit,图形处理器)进行处理,因此,为和传统的帧缓存对应进行区分,本实施例命名为“离屏帧缓存对象”。
综上可知,本发明在为待显示页面的渲染树的每一个渲染树节点创建一个合成图层后,还为每一个合成图层创建一个离屏帧缓存对象;通过将当前帧图像的画布的显示区域划分为左半部分和右半部分,并分别在左半部分和右半部分执行相同的画图指令操作,实现对待显示页面的预分屏操作,得到渲染完成的预处理分屏图像;当接收到刷新指令时,调用画图操作,将每一个离屏帧缓存对象在画当前帧图像的过程中存储的画图指令,作用于对应的纹理对象上,得到用于在图形处理器显示的纹理,实现对待显示页面的实际分屏。由此可知,本发明是在将待显示页面发送至图形处理器之前,得到渲染完成的预处理分屏图像,相比传统方案而言,本发明中图形处理器是同时获取渲染完成的预处理分屏图像,因此在对图像分屏显示时不会存在卡顿延迟现象,并且,本发明还大大减小了图形处理器在进行分屏处理时的数据处理量,从而大大节省了资源。
为进一步优化上述实施例,在步骤S106之后,还可以包括:
将所述纹理发送给图形处理器进程,通过所述图形处理器进程对所述纹理进行显示,实现对所述待显示页面的显示。
为进一步优化上述实施例,如图2所示,本发明一实施例公开的一种获取待显示页面的渲染树的方法流程图,包括步骤:
步骤S201、获取待显示页面对应的链接;
具体的,用户将待显示页面对应的链接输入至浏览器的搜索界面。
步骤S202、根据所述链接下载所述待显示页面;
步骤S203、通过渲染进程解析所述待显示页面,生成所述待显示页面的文档树;
步骤S204、根据所述文档树生成渲染树。
具体的,文档树只是对页面的简单描述,而页面的显示由文档以及CSS样式进行控制。
文档树只能描述一个网页结构,但是浏览器绘制整个页面,需要结合作用于文档树上的CSS样式表来绘制,比如对某些节点可能会设置宽高大小等等。浏览器在文档树的基础上,根据文档树节点的CSS样式来判断是否需要创建相对应的渲染树节点。如当文档树节点有隐藏属性时,表明该文档树节点无需显示,在这种情况下,就无需为该文档树节点创建对应的渲染树节点。
需要说明的是,浏览器只有在获取待显示页面的渲染树后,才能获知如何绘制待显示页面。
需要说明的是,本发明可以实现VR设备对浏览器的兼容,可利用现有电子设备与头戴VR,实现网页浏览功能。
与上述方法实施例相对应,本发明还公开了一种浏览器分屏装置。
参见图3,本发明实施例公开的一种浏览器分屏装置的结构示意图,该装置包括:
获取单元301,用于获取待显示页面的渲染树;
具体的,CSSOM树和DOM树连接在一起形成一个渲染树(render tree),渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。
渲染树(render tree)只包含了用于渲染页面(即本申请中的待显示页面)的节点。渲染树用来描述所有可见的DOM内容,并且将CSSOM样式信息附加到节点上。
其中,本实施例基于chromium内核获取待显示页面的渲染树。“chromium”是一个google开源的浏览器项目,意在创建一个更快更安全更稳定的浏览器。
创建单元302,用于为所述渲染树中满足预设合成条件的每一个渲染树节点创建一个合成图层,并为每一个合成图层创建一个离屏帧缓存对象;
需要说明的是,一个渲染树中通常包含有很多个渲染树节点,若为所有的渲染树节点都创建合成图层,必然会占用大量的合成资源,并且,在实际应用中,对于一些渲染树节点是无需创建合成图层的,因此,本实施例中设定了预设合成条件,并对满足该预设合成条件的渲染树节点创建对应的合成图层。
预设合成条件具体依据实际需要而定,如渲染树节点具有3D属性、视频需要单独用一个图层等等。
离屏帧缓存对象(Frame Buffer Object,FBO):在图形渲染引擎中,Layer(图层)会对应有一个Backing Surface。在软件方式渲染中,Backing Surface(后端存储)就是一个内存Buffer(缓冲区)。在硬件方式渲染中,Backing Surface就是一个FBO。
区域划分单元303,用于将当前帧图像的画布的显示区域划分为左半部分和右半部分;
可以理解的是,虚拟现实设备的显示原理是左右眼屏幕上分别显示左右眼的图像,人眼获取这种带有差异的信息后,在脑海中产生立体感,从而产生一种身在虚拟环境中的感觉。因此,为实现左右眼屏幕上分别显示左右眼的图像,需要将浏览器进行分屏。本实施例中,将当前帧图像的画布的显示区域划分为左半部分和右半部分的目的是为实现浏览器分屏做准备。
第一绘画单元304,用于利用实例化的直接渲染器,将各所述合成图层对应的渲染纹理,按照预设顺序画在所述左半部分;
需要说明的是,本实施例中,在启动硬件加速的情况下,用直接渲染器来画图。
预设顺序指的是将渲染纹理按照合成图层的排列顺序画在画布的左半部分。
第二绘画单元305,用于按照相同的操作,再次将相同的各所述渲染纹理,按照所述预设顺序画在所述右半部分;
需要说明的是,本实施例中,左半部分和右半部分为两个完全相同的区域,且两个区域绘制的内容完全相同。
具体的,在直接渲染器画待显示页面的每一帧图像的时,直接渲染器会将合成图层对应的渲染纹理一个一个的画在当前帧图像的画布上。传统方案中是将整个画布一次性全部画满。而本实施例中,在画每一帧图像的画布时,首先将合成图层对应的渲染纹理画在当前帧画布的左半部分,然后按照相同的操作,再将相同的渲染纹理画在当前帧画布的右半部分。在实际应用中,可以通过设置画图的裁剪区域(即画图区域)来实现。
举例说明,如整个画布左上角坐标为(0,0),整个画布宽30高20,将左上角坐标为(0,0),宽15高20对应的裁剪区域设定为画布的左半部分,将左上角坐标为(15,0),宽15高20对应的裁剪区域设定为画布的右半部分;
首先利用实例化的直接渲染器,将各合成图层对应的渲染纹理,按照预设顺序画在画布的左半部分,然后按照相同的操作,将相同的渲染纹理,按照预设顺序画在画布的右半部分。
指令作用单元306,用于当接收到刷新指令时,调用画图操作,将每一个所述离屏帧缓存对象在画所述当前帧图像的过程中存储的画图指令,作用于对应的纹理对象上,得到用于在图形处理器显示的纹理。
综上可知,本发明在为待显示页面的渲染树的每一个渲染树节点创建一个合成图层后,还为每一个合成图层创建一个离屏帧缓存对象;通过将当前帧图像的画布的显示区域划分为左半部分和右半部分,并分别在左半部分和右半部分执行相同的画图指令操作,实现对待显示页面的预分屏操作,得到渲染完成的预处理分屏图像;当接收到刷新指令时,调用画图操作,将每一个离屏帧缓存对象在画当前帧图像的过程中存储的画图指令,作用于对应的纹理对象上,得到用于在图形处理器显示的纹理,实现对待显示页面的实际分屏。由此可知,本发明是在将待显示页面发送至图形处理器之前,得到渲染完成的预处理分屏图像,相比传统方案而言,本发明中图形处理器是同时获取渲染完成的预处理分屏图像,因此在对图像分屏显示时不会存在卡顿延迟现象,并且,本发明还大大减小了图形处理器在进行分屏处理时的数据处理量,从而大大节省了资源。
为进一步优化上述实施例,浏览器分屏装置还包括:
发送单元,用于在指令作用单元306得到用于在图形处理器显示的纹理之后,将所述纹理发送给图形处理器进程,通过所述图形处理器进程对所述纹理进行显示,实现对所述待显示页面的显示。
为进一步优化上述实施例,如图4所示,本发明实施例公开的一种获取单元的结构示意图,包括:
获取子单元401,用于获取所述待显示页面对应的链接;
下载子单元402,用于根据所述链接下载所述待显示页面;
第一生成子单元403,用于通过渲染进程解析所述待显示页面,生成所述待显示页面的文档树;
第二生成子单元404,用于根据所述文档树生成渲染树。
具体的,文档树只是对页面的简单描述,而页面的显示由文档以及CSS样式进行控制。
文档树只能描述一个网页结构,但是浏览器绘制整个页面,需要结合作用于文档树上的CSS样式表来绘制,比如对某些节点可能会设置宽高大小等等。浏览器在文档树的基础上,根据文档树节点的CSS样式来判断是否需要创建相对应的渲染树节点。如当文档树节点有隐藏属性时,表明该文档树节点无需显示,在这种情况下,就无需为该文档树节点创建对应的渲染树节点。
需要说明的是,浏览器只有在获取待显示页面的渲染树后,才能获知如何绘制待显示页面。
本发明还提供了一种移动终端,该移动终端包含上述所述的浏览器分屏装置,图5示出了该移动终端的硬件结构,参见图5,
移动终端可以包括:处理器1,通信接口2,存储器3和通信总线4;
其中处理器1、通信接口2、存储器3通过通信总线4完成相互间的通信;
可选的,通信接口2可以为通信模块的接口,如GSM模块的接口;
处理器1,用于执行程序;
存储器3,用于存放程序;
程序可以包括程序代码,所述程序代码包括计算机操作指令。
处理器1可能是一个中央处理器CPU,或者是特定集成电路ASIC(Application Specific Integrated Circuit),或者是被配置成实施本发明实施例的一个或多个集成电路。
存储器3可能包含高速RAM存储器,也可能还包括非易失性存储器(non-volatile memory),例如至少一个磁盘存储器。
其中,程序可具体用于:
获取待显示页面的渲染树;
为所述渲染树中满足预设合成条件的每一个渲染树节点创建一个合成图层,并为每一个合成图层创建一个离屏帧缓存对象;
将当前帧图像的画布的显示区域划分为左半部分和右半部分;
利用实例化的直接渲染器,将各所述合成图层对应的渲染纹理,按照预设顺序画在所述左半部分;
按照相同的操作,再次将相同的各所述渲染纹理,按照所述预设顺序画在所述右半部分;
当接收到刷新指令时,调用画图操作,将每一个所述离屏帧缓存对象在画所述当前帧图像的过程中存储的画图指令,作用于对应的纹理对象上,得到用于在图形处理器显示的纹理。
最后,还需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中各个实施例采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似部分互相参见即可。
对所公开的实施例的上述说明,使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的,本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下,在其它实施例中实现。因此,本发明将不会被限制于本文所示的这些实施例,而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。