CN109829964A - Web增强现实的渲染方法和装置 - Google Patents

Abstract

本发明实施例提供一种Web增强现实的渲染方法和装置，其中方法包括：向终端发送原生调用指令，以使得终端能够基于原生调用指令控制真实图像采集设备采集真实世界图像，将真实世界图像渲染至Web窗口，并返回真实图像采集设备的位置姿态信息；基于真实图像采集设备的位置姿态信息，将虚拟世界图像渲染至Web窗口。本发明实施例提供的方法和装置，通过调用终端控制真实图像采集设备采集真实世界图像，渲染真实世界部分，相比通过WebRTC渲染真实世界部分的方法，能够有效简化操作流程，避免冗余操作，提高真实世界图像的渲染效率，从而解决渲染过程中真实世界部分与虚拟世界部分的不同步问题，优化用户体验。

Description

Web增强现实的渲染方法和装置

技术领域

本发明实施例涉及增强现实技术领域，尤其涉及一种Web增强现实的渲染方法和装置。

背景技术

移动互联技术日新月异的进步在改变人类生活方式的同时，也推动了增强现实(Augmented Reality，AR)类应用的蓬勃发展。相比移动端原生AR应用存在的封闭性、跨平台成本高、不易传播等缺点，基于Web(全球广域网)浏览器的AR应用(以下简称为Web AR应用)具有通用性、良好的跨平台特性以及易于传播特性，将Web浏览器作为AR应用的载体能够有效解决原生AR应用存在的问题。然而，Web AR应用在计算能力上与原生AR应用存在很大差距，导致很多可以在原生AR应用上实现的AR效果无法在WebAR应用上实现，于是如何提高Web浏览器在渲染AR应用时的性能显得尤为重要。

AR应用的渲染通常分为真实世界部分与虚拟世界部分。现有的Web AR应用中，真实世界部分通过WebRTC(Web Real-Time Communication，网页实时通信)协议打开移动端设备的图像采集设备，获取真实世界的视频流，而后绘制到Web窗口当中，作为AR应用的背景。

然而上述方法存在明显的缺点。真实世界的捕捉和渲染是AR应用的基础，AR应用需要对连续多帧图片进行处理。WebRTC本身是用来做实时通信的，并不适合从图像采集设备中取一帧一帧的数据进行处理。通过WebRTC技术获取到的视频流，为了获取到单帧图像，需要从视频流中截取。截取图像需要借助<canvas>标签，首先将视频流绘制在canvas上，然后将canvas导出存储为Base64的图像格式，这个过程操作冗余、耗时较长，当需要获取连续的帧图片时，会产生更大的延时。

这些问题限制了基于智能终端浏览器的AR应用可以实现的效果，容易造成渲染时真实世界部分与虚拟世界部分不同步、渲染帧率较低的问题，AR体验较差。

发明内容

本发明实施例提供一种Web增强现实的渲染方法和装置，用以解决现有的Web增强现实的渲染方法存在大量冗余操作，容易造成真实世界部分与虚拟世界部分不同步的问题。

第一方面，本发明实施例提供一种Web增强现实的渲染方法，包括：

向终端发送原生调用指令，以使得所述终端能够基于所述原生调用指令控制真实图像采集设备采集真实世界图像，将所述真实世界图像渲染至Web窗口，并返回所述真实图像采集设备的位置姿态信息；

基于所述真实图像采集设备的位置姿态信息，将虚拟世界图像渲染至所述Web窗口。

第二方面，本发明实施例提供一种Web增强现实的渲染装置，包括：

真实渲染单元，用于向终端发送原生调用指令，以使得所述终端能够基于所述原生调用指令控制真实图像采集设备采集真实世界图像，将所述真实世界图像渲染至Web窗口，并返回所述真实图像采集设备的位置姿态信息；

虚拟渲染单元，用于基于所述真实图像采集设备的位置姿态信息，将虚拟世界图像渲染至所述Web窗口。

第三方面，本发明实施例提供一种电子设备，包括处理器、通信接口、存储器和总线，其中，处理器，通信接口，存储器通过总线完成相互间的通信，处理器可以调用存储器中的逻辑指令，以执行如第一方面或第二方面所提供的方法的步骤。

第四方面，本发明实施例提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如第一方面或第二方面所提供的方法的步骤。

本发明实施例提供的一种Web增强现实的渲染方法和装置，通过调用终端控制真实图像采集设备采集真实世界图像，渲染真实世界部分，相比通过WebRTC渲染真实世界部分的方法，能够有效简化操作流程，避免冗余操作，提高真实世界图像的渲染效率，从而解决渲染过程中真实世界部分与虚拟世界部分的不同步问题，优化用户体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的Web增强现实的渲染方法的流程示意图；

图2为本发明另一实施例提供的Web增强现实的渲染方法的流程示意图；

图3为本发明又一实施例提供的Web增强现实的渲染方法的流程示意图；

图4为本发明实施例提供的Web增强现实的渲染装置的结构示意图；

图5为本发明实施例提供的电子设备的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

现有的Web AR应用中，真实世界部分通过WebRTC协议打开移动端设备的图像采集设备，但是通过WebRTC获取真实世界部分，流程中存在大量冗余操作，容易造成渲染时真实世界部分与虚拟世界部分不同步的问题。为了解决这一问题，本发明实施例提供了一种Web增强现实的渲染方法。图1为本发明实施例提供的Web增强现实的渲染方法的流程示意图，如图1所示，该方法的执行主体可以是Web浏览器，还可以是基于Web浏览器的Web AR应用，该方法包括：

步骤110，向终端发送原生调用指令，以使得终端能够基于原生调用指令控制真实图像采集设备采集真实世界图像，将真实世界图像渲染至Web窗口，并返回真实图像采集设备的位置姿态信息。

此处，终端为装载有Web浏览器的智能设备，终端可以是智能手机、平板电脑或智能手表等，本发明实施例对此不作具体限定。原生调用指令用于调用终端控制真实图像采集设备采集真实世界图像，此处真实图像采集设备可以是终端自带的图像采集设备，还可以是与终端相连的外接图像采集设备。真实图像采集设备的位置姿态信息是指真实图像采集设备在采集真实世界图像时的位置姿态信息，位置姿态信息包括真实图像采集设备的位置信息和/或真实图像采集设备的姿态信息。

在需要进行Web增强现实渲染时，向终端发送原生调用指令。终端在接收到原生调用指令后，通过调用原生方法控制真实图像采集设备进行拍摄，并获取真实图像采集设备采集的真实世界图像，以及真实图像采集设备在采集真实世界图像时的位置姿态信息。此处，终端调用的原生方法即基于终端操作***执行的调用真实图像采集设备进行图像采集的方法。相比常规的Web AR应用通过WebRTC控制真实图像采集设备，本发明实施例中应用终端原生方法控制真实图像采集设备，能够有效简化操作流程，提高真实世界图像的获取效率。终端在采集得到真实世界图像后，直接通过原生能力将真实世界图像作为真实世界部分的一帧绘制在Web窗口。此处，Web窗口即用于显示Web AR应用的窗口。

在向终端发送原生调用指令后，等待终端控制真实图像采集设备采集真实世界图像，并接收终端返回的真实图像采集设备的位置姿态信息。

步骤120，基于真实图像采集设备的位置姿态信息，将虚拟世界图像渲染至Web窗口。

具体地，在得到终端返回的真实图像采集设备的位置姿态信息后，构建虚拟世界图像，并将虚拟世界图像作为虚拟世界部分的一帧绘制在Web窗口。此处，虚拟世界图像是包含有虚拟对象的图像，虚拟对象是预先设定的WebAR应用中的模型，虚拟对象在虚拟世界图像中的位置和/或姿态是基于真实图像采集设备的位置姿态信息确定的。

需要说明的是，步骤120仅需在接收到终端返回的真实图像采集设备的位置姿态信息后即可执行，即步骤120可以在步骤110之后执行，也可以与步骤110中终端渲染真实世界图像同步执行，本发明实施例对此不作具体限定。

本发明实施例提供的方法，通过调用终端控制真实图像采集设备采集真实世界图像，渲染真实世界部分，相比通过WebRTC渲染真实世界部分的方法，能够有效简化操作流程，避免冗余操作，提高真实世界图像的渲染效率，从而解决渲染过程中真实世界部分与虚拟世界部分的不同步问题，优化用户体验。

基于上述实施例，步骤120具体包括：步骤121，基于真实图像采集设备的位置姿态信息，对虚拟对象进行渲染，得到虚拟世界图像；步骤122，将虚拟世界图像绘制在Web窗口中。

具体地，在获知真实图像采集设备的位置姿态信息后，基于虚拟图像采集设备的位置姿态信息，对虚拟对象进行渲染，从而确定虚拟对象在虚拟世界图像中的位置和/或姿态，由此得到虚拟世界图像，并将虚拟世界图像作为虚拟世界部分的一帧绘制在Web窗口中，与真实世界部分的一帧进行叠加，得到Web AR应用渲染后的画面。

基于上述任一实施例，步骤121具体包括：基于真实图像采集设备的位置姿态信息，通过WebGL渲染虚拟对象，得到虚拟世界图像，和/或向终端发送原生渲染指令，以使得终端能够在接收到原生渲染指令后渲染虚拟对象，得到并返回所述虚拟世界图像。

具体地，基于真实图像采集设备的位置姿态信息，对虚拟对象进行渲染，从而获取虚拟世界图像可以通过如下三种方式实现：

其一，通过WebGL(Web Graphics Library，web图形库)渲染虚拟对象，得到虚拟世界图像。WebGL是一种3D绘图协议，可供硬件3D加速渲染，使得Web浏览器能够更流畅地展示3D场景和模型。然而完全基于WebGL渲染虚拟世界，由于JavaScript的单线程的特性使得其没有办法利用多核CPU(Central Processing Unit，中央处理器)的计算能力，当虚拟世界物体的3D模型较大或动画较复杂时，会出现卡顿，甚至无法渲染的现象。即使当3D模型较小且动画较简单时，也容易出现现实世界与虚拟世界不同步、虚拟物体悬浮等现象。

其二，通过终端的原生能力渲染虚拟对象，得到虚拟世界图像。此处，原生渲染指令用于调用终端基于终端的原生能力进行虚拟对象的渲染。在需要执行虚拟世界部分的渲染，向终端发送原生渲染指令，终端在接收到原生渲染指令后，通过调用原生方法对虚拟对象进行渲染，得到虚拟世界图像，并返回虚拟世界图像。由于现有的终端多为多核CPU，通过终端原生能力进行渲染能够达到较高的渲染频率，更有利于虚拟世界部分渲染效率的提高。

其三，将虚拟对象分为两部分，分别通过WebGL和终端原生能力进行渲染，将WebGL和终端渲染得到的虚拟世界图像进行叠加，得到完整的虚拟世界图像。

本发明实施例提供的方法，通过调用终端渲染虚拟对象，得到虚拟世界图像，有效利用了终端强大的计算能力，从而有效提高了虚拟世界部分的渲染效率，优化了用户体验。

基于上述任一实施例，步骤121具体包括：基于真实图像采集设备的位置姿态信息，通过WebGL渲染第一虚拟对象，得到第一虚拟世界图像；向终端发送原生渲染指令，以使得终端能够在接收到原生渲染指令后，基于真实图像采集设备的位置姿态信息，渲染第二虚拟对象，得到第二虚拟世界图像并返回；叠加第一虚拟世界图像和第二虚拟世界图像，得到虚拟世界图像。

具体地，第一虚拟对象和第二虚拟对象均为虚拟对象，“第一”和“第二”仅用于区分两个虚拟对象，第一虚拟世界图像为通过WebGL渲染第一虚拟对象得到的，第二虚拟世界图像是通过调用终端渲染第二虚拟对象得到的。在得到第一虚拟世界图像和第二虚拟世界图像后，需要将第一虚拟世界图像和第二虚拟世界图像进行叠加，叠加后的图像即虚拟世界图像，虚拟世界图像中包含有第一虚拟对象和第二虚拟对象。

本发明实施例提供的方法，通过WebGL和终端原生能力渲染虚拟世界部分，在保证虚拟世界部分的渲染质量的同时，有效提高了虚拟世界部分渲染的效率。

基于上述任一实施例，步骤121具体包括：

步骤1211，基于真实图像采集设备的位置姿态信息，更新虚拟图像采集设备的位置姿态信息。

具体地，虚拟图像采集设备是虚拟世界的图像采集模型。为了使得真实世界部分和虚拟世界部分的视角保持一致，在得到真实图像采集设备的位置姿态信息后，需要基于真实图像采集设备的位置姿态信息，以及预先设定的真实图像采集设备的位置姿态信息和虚拟图像采集设备的位置姿态信息之间的对应关系，更新虚拟图像采集设备的位置姿态信息，从而调整虚拟图像采集设备的位置和/或姿态。此处，虚拟图像采集设备的位置姿态信息的确定，可以通过Web浏览器内置的代码实现。

步骤1212，基于虚拟图像采集设备的位置姿态信息，以及虚拟对象在世界坐标系中的坐标，获取虚拟对象在屏幕坐标系中的坐标。

具体地，虚拟对象在世界坐标系中的坐标，即虚拟对象相对于虚拟世界的坐标是预先设定的。在更新虚拟图像采集设备的位置姿态信息后，根据更新后的虚拟图像采集设备的位置和/或姿态，以及虚拟对象在世界坐标系中的坐标，进行坐标转换，从而得到虚拟对象在屏幕坐标系中的坐标。此处，屏幕坐标系即基于Web窗口构建的坐标系。

步骤1213，基于虚拟对象在屏幕坐标系中的坐标，对虚拟对象进行渲染，得到虚拟世界图像。

具体地，在确定虚拟对象在屏幕坐标系中的坐标后，对虚拟对象进行渲染，从而得到虚拟世界图像。需要说明的是，在基于WebGL和/或终端原生能力进行虚拟对象的渲染时，均需要根据上述步骤得到对应的虚拟世界图像。

基于上述任一实施例，步骤1212具体包括：基于虚拟图像采集设备的位置姿态信息，对虚拟对象在世界坐标系中的坐标进行视角变换，获取虚拟对象在相机坐标系中的坐标；对虚拟对象在相机坐标系中的坐标进行投影变换，获取虚拟对象在裁剪坐标系中的坐标；基于透视除法，将虚拟对象在裁剪坐标系中的坐标转换为虚拟对象在规范化设备坐标系中的坐标；对虚拟对象在规范化设备坐标系中的坐标进行视口变换，获取虚拟对象在屏幕坐标系中的坐标。

具体地，坐标转换包括如下步骤：首先，针对虚拟对象在世界坐标系中的坐标，进行视角转换，基于步骤1211中更新的虚拟图像采集设备的位置姿态信息，将虚拟对象的坐标转换到虚拟图像采集设备坐标系，即相机坐标系下，即得到虚拟对象在相机坐标系下的坐标。其次，通过投影变换，实现虚拟对象从相机坐标系到裁剪坐标系的坐标变换，此处投影变换采用的投影方式可以是平行投影或透视投影。随后，通过执行透视除法，剔除虚拟图像采集设备视角以外的虚拟对象的部分，并将虚拟对象的剩余部分在裁剪坐标系中的坐标转换到规范化设备坐标系中。最后，执行视口变换，将视景体内投影的物体显示到二维的视口平面上，实现虚拟对象从规范化设备坐标系到屏幕坐标系的转换，得到虚拟对象在屏幕坐标系中的坐标。

基于上述任一实施例，步骤120之后还包括：更新真实图像采集设备的位置姿态信息，并基于更新后的图像采集设备的位置姿态信息，将虚拟世界图像渲染至Web窗口。

具体地，为了使得真实世界部分和虚拟世界部分的视角保持一致，需要在步骤120基于真实图像采集设备的位置姿态信息，将虚拟世界图像作为虚拟世界部分的一帧渲染至Web窗口后，实时更新真实图像采集设备的位置姿态信息，并根据更新后的真实图像采集设备的位置姿态信息，更新虚拟世界图像，并将更新后的虚拟世界图像作为虚拟世界部分的下一帧渲染至Web窗口。同样地，终端在通过真实图像采集设备采集得到新的真实世界图像后，也将更新后的真实世界图像作为真实世界部分的下一帧渲染至Web窗口。

本发明实施例提供的方法，通过更新真实世界图像和真实图像采集设备的位置姿态信息，实现了真实世界部分和虚拟世界部分的连续渲染，有助于实现流畅的Web AR应用体验。

基于上述任一实施例，图2为本发明另一实施例提供的Web增强现实的渲染方法的流程示意图，如图2所示，该方法包括：

步骤210，Web浏览器加载Web AR应用页面。

步骤220，Web浏览器初始化Web AR应用。具体地，Web浏览器调用终端的原生方法，打开真实图像采集设备并获取真实图像采集设备的位置姿态信息。此处，真实图像采集设备为终端自带的摄像头。随后，Web浏览器基于真实图像采集设备的位置姿态信息，以及预先设定的真实图像采集设备的位置姿态信息和虚拟图像采集设备的位置姿态信息之间的对应关系，通过Web浏览器内置的代码构建第一虚拟世界和第二虚拟世界，其中第一虚拟世界为Web浏览器端的虚拟世界，第二虚拟世界为终端原生的虚拟世界。

步骤230，判断是否需要混合渲染一帧场景，如果需要的话，则执行步骤240和步骤250。

步骤240，Web浏览器向终端发送原生调用指令。终端在接收到原生调用指令后，通过调用原生方法控制真实图像采集设备进行拍摄，并获取真实图像采集设备采集的真实世界图像，以及真实图像采集设备在采集真实世界图像时的位置姿态信息，并直接通过GPU的能力将真实世界图像作为真实世界部分的一帧绘制在Web窗口。

步骤250，在得到真实图像采集设备在采集真实世界图像时的位置姿态信息后，Web浏览器可以通过内置的代码调整第一虚拟世界中虚拟图像采集设备的位置，随后基于WebGL和第一虚拟对象，将第一虚拟世界图像渲染在Web窗口。此外，Web浏览器还向终端发送原生渲染指令，终端在接收到原生渲染指令后，通过调用原生方法调整第二虚拟世界中虚拟图像采集设备的位置，并基于第二虚拟对象，将第二虚拟世界图像渲染至Web窗口。

步骤260，真实世界图像、第一虚拟世界图像和第二虚拟世界图像在Web窗口上叠加，渲染出Web AR应用场景的一帧。随后，返回步骤230，判断是否需要对Web AR应用场景的下一帧进行混合渲染。

本发明实施例提供的方法，通过调用终端控制真实图像采集设备采集真实世界图像，渲染真实世界部分，相比通过WebRTC渲染真实世界部分的方法，能够有效简化操作流程，避免冗余操作，提高真实世界图像的渲染效率，从而解决渲染过程中真实世界部分与虚拟世界部分的不同步问题，优化用户体验。此外，通过WebGL和终端原生能力渲染虚拟世界部分，有效利用了终端强大的计算能力，在保证虚拟世界部分的渲染质量的同时，有效提高了虚拟世界部分渲染的效率。

基于上述任一实施例，图3为本发明又一实施例提供的Web增强现实的渲染方法的流程示意图，如图3所示，该方法需要实现用户在浏览器上点击目标平面后，Web浏览器在目标平面上放置环形跑道，并将人物模型放在跑道上。用户通过点击人物模型控制人物模型的跑步和停止。本发明实施例中，现实世界的捕捉通过终端原生能力实现，并形成帧图片渲染到终端屏幕上。虚拟世界中，跑道模型这一部分不需要与用户发生交互，且模型体积较大，使用终端原生进行渲染；人物模型需要与用户发生交互，且模型体积较小，直接使用WebGL渲染。该方法的步骤具体如下：

步骤310，Web浏览器加载Web AR应用页面。

步骤320，Web浏览器初始化Web AR应用。具体地，Web浏览器调用终端的原生方法，打开真实图像采集设备并获取真实图像采集设备的位置姿态信息。此处，真实图像采集设备为终端自带的摄像头。随后，Web浏览器基于真实图像采集设备的位置姿态信息，以及预先设定的真实图像采集设备的位置姿态信息和虚拟图像采集设备的位置姿态信息之间的对应关系，通过Web浏览器内置的代码构建第一虚拟世界和第二虚拟世界，其中第一虚拟世界为Web浏览器端的虚拟世界，第二虚拟世界为终端原生的虚拟世界。

步骤330，终端持续对通过原生方法获取到的图像进行检测识别，当发生点击事件的时候，终端检测点击的位置是否存在平面，若存在平面则根据点击的平面的位置，即目标平面，将跑道模型放置到原生中构建的虚拟世界，即第二虚拟世界当中；将人物模型放置到Web浏览器中构建的虚拟世界，即第一虚拟世界当中。

步骤340，判断是否需要混合渲染一帧场景，如果需要的话，则执行步骤350和步骤360。

步骤350，Web浏览器向终端发送原生调用指令。终端在接收到原生调用指令后，通过调用原生方法控制真实图像采集设备进行拍摄，并获取真实图像采集设备采集的真实世界图像，以及真实图像采集设备在采集真实世界图像时的位置姿态信息，并直接通过GPU的能力将真实世界图像作为真实世界部分的一帧绘制在Web窗口，此处Web窗口即终端屏幕。

步骤360，在得到真实图像采集设备在采集真实世界图像时的位置姿态信息后，Web浏览器可以通过内置的代码调整第一虚拟世界中虚拟图像采集设备的位置，随后基于WebGL，将人物模型渲染在Web窗口。此外，Web浏览器还向终端发送原生渲染指令，终端在接收到原生渲染指令后，调整第二虚拟世界中虚拟图像采集设备的位置，通过调用原生方法将跑道模型渲染至Web窗口。

步骤370，真实世界图像、包含有人物模型的第一虚拟世界图像和包含有跑道模型的第二虚拟世界图像在Web窗口上叠加，渲染出Web AR应用场景的一帧。随后，返回步骤340，判断是否需要对Web AR应用场景的下一帧进行混合渲染。

需要说明的是，当用户点击模型时，产生交互事件。交互事件发生在Web浏览器当中，且只与Web浏览器中的人物模型有关。在人物模型暂停时，点击事件发生后，通过Web浏览器控制人物模型播放人物跑步的动画，与跑步的路径；在人物模型播放动画时，点击事件发生后，通过Web浏览器控制人物模型停止动画的播放。

基于上述任一实施例，图4为本发明实施例提供的Web增强现实的渲染装置的结构示意图，如图4所示，该装置包括真实渲染单元410和虚拟渲染单元420；

其中，真实渲染单元410用于向终端发送原生调用指令，以使得所述终端能够基于所述原生调用指令控制真实图像采集设备采集真实世界图像，将所述真实世界图像渲染至Web窗口，并返回所述真实图像采集设备的位置姿态信息；

虚拟渲染单元420用于基于所述真实图像采集设备的位置姿态信息，将虚拟世界图像渲染至所述Web窗口。

本发明实施例提供的装置，通过调用终端控制真实图像采集设备采集真实世界图像，渲染真实世界部分，相比通过WebRTC渲染真实世界部分的方法，能够有效简化操作流程，避免冗余操作，提高真实世界图像的渲染效率，从而解决渲染过程中真实世界部分与虚拟世界部分的不同步问题，优化用户体验。

基于上述任一实施例，虚拟渲染单元420具体包括渲染子单元和绘制子单元；

其中，渲染子单元用于基于所述真实图像采集设备的位置姿态信息，对虚拟对象进行渲染，得到所述虚拟世界图像；

绘制子单元用于将所述虚拟世界图像绘制在所述Web窗口中。

基于上述任一实施例，渲染子单元用于基于所述真实图像采集设备的位置姿态信息，通过WebGL渲染虚拟对象，得到所述虚拟世界图像，和/或向所述终端发送原生渲染指令，以使得所述终端能够在接收到所述原生渲染指令后渲染所述虚拟对象，得到并返回所述虚拟世界图像。

基于上述任一实施例，渲染子单元用于：

基于所述真实图像采集设备的位置姿态信息，通过WebGL渲染第一虚拟对象，得到第一虚拟世界图像；

向所述终端发送原生渲染指令，以使得所述终端能够在接收到所述原生渲染指令后，基于所述真实图像采集设备的位置姿态信息，渲染第二虚拟对象，得到第二虚拟世界图像并返回；

叠加所述第一虚拟世界图像和所述第二虚拟世界图像，得到所述虚拟世界图像。

基于上述任一实施例，渲染子单元包括姿态更新模块、坐标获取模块和渲染模块；

其中，姿态更新模块用于基于所述真实图像采集设备的位置姿态信息，更新所述虚拟图像采集设备的位置姿态信息；

坐标获取模块用于基于所述虚拟图像采集设备的位置姿态信息，以及所述虚拟对象在世界坐标系中的坐标，获取所述虚拟对象在屏幕坐标系中的坐标；

渲染模块用于基于所述虚拟对象在屏幕坐标系中的坐标，对虚拟对象进行渲染，得到所述虚拟世界图像。

基于上述任一实施例，坐标获取模块具体用于：

基于所述虚拟图像采集设备的位置姿态信息，对所述虚拟对象在世界坐标系中的坐标进行视角变换，获取所述虚拟对象在相机坐标系中的坐标；

对所述虚拟对象在相机坐标系中的坐标进行投影变换，获取所述虚拟对象在裁剪坐标系中的坐标；

基于透视除法，将所述虚拟对象在裁剪坐标系中的坐标转换为所述虚拟对象在规范化设备坐标系中的坐标；

对所述虚拟对象在规范化设备坐标系中的坐标进行视口变换，获取所述虚拟对象在屏幕坐标系中的坐标。

基于上述任一实施例，该装置还包括更新单元；

更新单元用于更新所述真实图像采集设备的位置姿态信息，并基于更新后的所述图像采集设备的位置姿态信息，将所述虚拟世界图像渲染至所述Web窗口。

图5为本发明实施例提供的电子设备的实体结构示意图，如图5所示，该电子设备可以包括：处理器(processor)501、通信接口(Communications Interface)502、存储器(memory)503和通信总线504，其中，处理器501，通信接口502，存储器503通过通信总线504完成相互间的通信。处理器501可以调用存储在存储器503上并可在处理器501上运行的计算机程序，以执行上述各实施例提供的Web增强现实的渲染方法，例如包括：向终端发送原生调用指令，以使得所述终端能够基于所述原生调用指令控制真实图像采集设备采集真实世界图像，将所述真实世界图像渲染至Web窗口，并返回所述真实图像采集设备的位置姿态信息；基于所述真实图像采集设备的位置姿态信息，将虚拟世界图像渲染至所述Web窗口。

此外，上述的存储器503中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

本发明实施例还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各实施例提供的Web增强现实的渲染方法，例如包括：向终端发送原生调用指令，以使得所述终端能够基于所述原生调用指令控制真实图像采集设备采集真实世界图像，将所述真实世界图像渲染至Web窗口，并返回所述真实图像采集设备的位置姿态信息；基于所述真实图像采集设备的位置姿态信息，将虚拟世界图像渲染至所述Web窗口。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种Web增强现实的渲染方法，其特征在于，包括：

向终端发送原生调用指令，以使得所述终端能够基于所述原生调用指令控制真实图像采集设备采集真实世界图像，将所述真实世界图像渲染至Web窗口，并返回所述真实图像采集设备的位置姿态信息；

基于所述真实图像采集设备的位置姿态信息，将虚拟世界图像渲染至所述Web窗口。

2.根据权利要求1所述的方法，其特征在于，所述基于所述真实图像采集设备的位置姿态信息，将虚拟世界图像渲染至所述Web窗口，具体包括：

基于所述真实图像采集设备的位置姿态信息，对虚拟对象进行渲染，得到所述虚拟世界图像；

将所述虚拟世界图像绘制在所述Web窗口中。

3.根据权利要求2所述的方法，其特征在于，所述基于所述真实图像采集设备的位置姿态信息，对虚拟对象进行渲染，得到所述虚拟世界图像，具体包括：

基于所述真实图像采集设备的位置姿态信息，通过WebGL渲染所述虚拟对象，得到所述虚拟世界图像，和/或向所述终端发送原生渲染指令，以使得所述终端能够在接收到所述原生渲染指令后渲染所述虚拟对象，得到并返回所述虚拟世界图像。

4.根据权利要求3所述的方法，其特征在于，所述基于所述真实图像采集设备的位置姿态信息，通过WebGL渲染所述虚拟对象，得到所述虚拟世界图像，和/或向所述终端发送原生渲染指令，以使得所述终端能够在接收到所述原生渲染指令后渲染所述虚拟对象，得到并返回所述虚拟世界图像，具体包括：

基于所述真实图像采集设备的位置姿态信息，通过WebGL渲染第一虚拟对象，得到第一虚拟世界图像；

向所述终端发送原生渲染指令，以使得所述终端能够在接收到所述原生渲染指令后，基于所述真实图像采集设备的位置姿态信息，渲染第二虚拟对象，得到第二虚拟世界图像并返回；

叠加所述第一虚拟世界图像和所述第二虚拟世界图像，得到所述虚拟世界图像。

5.根据权利要求2所述的方法，其特征在于，所述基于所述真实图像采集设备的位置姿态信息，对虚拟对象进行渲染，得到所述虚拟世界图像，具体包括：

基于所述真实图像采集设备的位置姿态信息，更新虚拟图像采集设备的位置姿态信息；

基于所述虚拟图像采集设备的位置姿态信息，以及所述虚拟对象在世界坐标系中的坐标，获取所述虚拟对象在屏幕坐标系中的坐标；

基于所述虚拟对象在屏幕坐标系中的坐标，对所述虚拟对象进行渲染，得到所述虚拟世界图像。

6.根据权利要求5所述的方法，其特征在于，所述基于所述虚拟图像采集设备的位置姿态信息，以及所述虚拟对象在世界坐标系中的坐标，获取所述虚拟对象在屏幕坐标系中的坐标，具体包括：

基于所述虚拟图像采集设备的位置姿态信息，对所述虚拟对象在世界坐标系中的坐标进行视角变换，获取所述虚拟对象在相机坐标系中的坐标；

对所述虚拟对象在相机坐标系中的坐标进行投影变换，获取所述虚拟对象在裁剪坐标系中的坐标；

基于透视除法，将所述虚拟对象在裁剪坐标系中的坐标转换为所述虚拟对象在规范化设备坐标系中的坐标；

对所述虚拟对象在规范化设备坐标系中的坐标进行视口变换，获取所述虚拟对象在屏幕坐标系中的坐标。

7.根据权利要求1至6中任一项所述的方法，其特征在于，所述基于所述真实图像采集设备的位置姿态信息，将虚拟世界图像渲染至所述Web窗口，之后还包括：

更新所述真实图像采集设备的位置姿态信息，并基于更新后的所述图像采集设备的位置姿态信息，将所述虚拟世界图像渲染至所述Web窗口。

8.一种Web增强现实的渲染装置，其特征在于，包括：

真实渲染单元，用于向终端发送原生调用指令，以使得所述终端能够基于所述原生调用指令控制真实图像采集设备采集真实世界图像，将所述真实世界图像渲染至Web窗口，并返回所述真实图像采集设备的位置姿态信息；

虚拟渲染单元，用于基于所述真实图像采集设备的位置姿态信息，将虚拟世界图像渲染至所述Web窗口。

9.一种电子设备，其特征在于，包括处理器、通信接口、存储器和总线，其中，处理器，通信接口，存储器通过总线完成相互间的通信，处理器可以调用存储器中的逻辑指令，以执行如权利要求1至7任一所述的方法。

10.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现如权利要求1至7任一所述的方法。