一种全景应用中图像渲染的方法及终端设备

技术领域

本申请涉及图像处理技术领域，具体涉及一种全景应用中图像渲染的方法及终端设备。

背景技术

全景图片具有真实感强、信息量大和交互性好等优点，可以给用户带来身临其境的感觉。因此全景图片在诸多领域有着广泛的应用，例如：全景看车、全景看房、全景体验酒店、地图街景和视频聊天的人工智能(artificial intelligence,AI)视频背景替换等。

在这些全景应用中都不是单纯展示全景图片，都涉及到在全景图片上再叠加一个或者多个前景元素，前景元素可以是人物图像，地面标识或者是其它图片等。在全景应用中，全景图片通常都是背景，要实现前景图片叠加到全景图片上，目前采用了图层原理。

采用图层原理在渲染一帧背景图片和前景图片时，首先渲染背景图片，向显示缓冲区中填充背景图片中各像素点的颜色信息，然后再将前景图片对应的像素点的颜色信息填充到显示缓冲区中，前景图片的像素点的颜色信息会覆盖背景图片中与前景图片重叠部分的像素点的颜色信息。由此可见，重叠部分需要重复渲染，导致渲染开销非常大。

发明内容

本申请实施例提供一种全景应用中图像渲染的方法，用于降低渲染开销，避免重复渲染而导致的资源浪费。本申请实施例还提供了相应的终端设备。

本申请第一方面提供一种全景应用中图像渲染的方法，全景应用可包括全景看车、全景看房、全景体验酒店、地图街景和视频聊天的人工智能(artificialintelligence,AI)视频背景替换，以及其他应用到全景图片的应用中。该方法包括：响应对全景应用的操作，获取前景图片和全景图片，全景图片为前景图片的背景图片；渲染前景图片，并设置画布上每个像素点的深度值，每个像素点的深度值包括第一深度值和深度基准值，第一深度值为与前景图片对应的像素点(pixel)的深度值，深度基准值为除掉与前景图片对应的像素点之外的像素点的深度值，画布为终端设备的屏幕上用于显示所述全景图片和所述前景图片的区域，应理解的是，画布可以指屏幕上的部分显示区域，也可以指整个屏幕的显示区域；根据第一深度值和深度基准值，在第一像素点渲染全景图片上与第一像素点对应的颜色值，第一像素点为与深度基准值对应的像素点。

该第一方面中，前景图片可以是人物、地面图标或其他与背景图片不同的图片。背景图片也可以是非全景图片，背景图片的尺寸大于前景图片的尺寸。针对一个画布，该画布所包含的像素点的数量是固定的，画布上的像素点可以看做一个像素点集合A，其中被前景图片占用的像素点的集合可以描述为子集B，除掉子集B后剩余的像素点的集合可以描述为子集C，子集B与子集C的像素点不重叠，且子集B+子集C＝集合A。为了便于描述，“第一深度值”代指前景图片对应的像素点的深度值，深度基准值是一个参考值，第一深度值和深度基准值分别用于表示像素点的不同状态，第一深度值用于表示对应的像素点不需要进行重复渲染，深度基准值表示对应的像素点还没有被渲染。第一深度值可以用具体的数值表示，如-0.5，深度基准值可以用0表示，当然，也可以是其他数值。另外，本申请中的第一深度值和深度基准值也不限于是数值，其他可以指示像素点是否需要渲染的字符也可以，例如：T表示不需要重复渲染，F表示该像素点未被渲染，当然，也可以通过其他字符来表示，只要指示清楚即可。深度值并不表示具体的物理概念，换用其他名称表述也可以，只要能表达像素点是否能按照全景图片进行渲染即可。若深度基准值为0，也可以理解为在每次渲染前景图片前都会进行一次对画布上像素点的深度值的清零操作，然后在渲染前景图片时在对应的前景图片的像素点写入前景图片的第一深度值。若深度基准值不是0，也可以理解为在每次渲染前景图片前都会进行一次对画布上像素点的深度值的统一赋值操作，将画布上的像素点的深度值都先赋值为深度基准值，然后在渲染前景图片时在对应的前景图片的像素点将深度基准值修改为第一深度值。由该第一方面可知，先渲染前景图片，然后针对前景图片没占用的像素点再渲染全景图片的对应内容，这样针对前景图片与全景图片的重叠部分就避免了重复渲染，既减少了资源浪费，降低了渲染开销，又提高了渲染效率。

在第一方面的一种可能的实现方式中，上述步骤：根据第一深度值和深度基准值，在第一像素点渲染全景图片上与第一像素点对应的颜色值，包括：若第二像素点的深度值为第一深度值，则中断在第二像素点渲染全景图片上对应第二像素点的颜色值，第二像素点为画布上的任一像素点；若第二像素点的深度值为深度基准值，则在第二像素点渲染全景图片上对应第二像素点的颜色值。

该种可能的实现方式中，前景图片渲染结束后，开始渲染全景图片，渲染全景图片可以采用逐个像素点渲染的方式，被渲染到的像素点可以用“第二像素点”来代指，若该第二像素点的深度值为第一深度值，则表示该第二像素点已经被前景图片占用，不需要再重复渲染，则中断对该第二像素点的渲染。若该第二像素点的深度值为深度基准值，则表示该第二像素点未被前景图片占用，则按照该第二像素点对应的全景图片的内容进行渲染。该种可能的实现方式中，通过第一深度值和深度基准值对像素点是否需要渲染的指示可以确保已被前景图片占用的像素点不会再按照全景图片重复渲染，确保了渲染的准确度。

在第一方面的一种可能的实现方式中，上述步骤：根据第一深度值和深度基准值，在第一像素点渲染全景图片上与第一像素点对应的颜色值，包括：若第二像素点的深度值小于第二深度值，则中断在第二像素点渲染全景图片上对应第二像素点的颜色值，第二深度值大于第一深度值，且小于深度基准值，第二像素点为画布上的任一像素点；若第二像素点的深度值大于第二深度值，则在第二像素点渲染全景图片上对应第二像素点的颜色值。

该种可能的实现方式中，“第二深度值”代指全景图片的深度值，第一深度值与第二深度值是相对的，因为全景图片是前景图片的背景图片，所以第二深度值要大于第一深度值，第一深度值和第二深度值都小于深度基准值，第一深度值、第二深度值和深度基准值通常都是预先配置好的。渲染全景图片可以采用逐个像素点渲染的方式，被渲染到的像素点可以用“第二像素点”来代指，若该第二像素点的深度值小于第二深度值，则表示该第二像素点已经被前景图片占用，不需要再重复渲染，则中断对该第二像素点的渲染。若该第二像素点的深度值大于第二深度值，则表示该第二像素点未被前景图片占用，则按照该第二像素点对应的全景图片的内容进行渲染。该种可能的实现方式中，通过第一深度值、深度基准值与第二深度值的比较来确定第二像素点是否需要渲染，可以确保已被前景图片占用的像素点不会再按照全景图片重复渲染，确保了渲染的准确度。

在第一方面的一种可能的实现方式中，该方法还包括：通过顶点着色器比较第二像素点的深度值和第二深度值，顶点着色器中配置有第二深度值。

该种可能的实现方式中，图形处理器(graphics processing unit，GPU)通常包括顶点着色器(vertex shader)和片段着色器(fragment shader)，顶点着色器通常用来定位像素点，片段着色器用来着色，也就是将颜色值写入到颜色缓冲区中。在顶点着色器中配置第二深度值，可以在定位像素点时用第二深度值与第二像素点的深度值进行比较，从而确定第二像素点是否需要按照全景图片进行渲染。

在第一方面的一种可能的实现方式中，上述步骤：渲染前景图片，并设置画布上每个像素点的深度值，包括：检测前景图片所对应的像素点的alpha通道的透明值，该透明值用于指示所述像素点的透明程度；若透明值为非0，则将前景图片的颜色值写入颜色缓冲区中的第一位置，并将第一深度值写入深度缓冲区中的第二位置，第一位置为颜色缓冲区中与前景图片对应的像素点的位置，第二位置为深度缓冲区中与前景图片对应的像素点的位置。

该种可能的实现方式中，可以将与渲染相关的显示缓冲区(frame buffer)划分为颜色缓冲区和深度缓冲区，其中颜色缓冲区用于缓存画布上像素点的颜色值，深度缓冲区用于缓存画布上像素点的深度值。如：缓存第一深度值、深度基准值或第二深度值。每个像素点都有一个alpha通道，该alpha通道有256级颜色值，分别从0至255，其中0表示透明值为0，也就是该像素点在前景图片中需要保持透明，不需要渲染，其他1至255的非0透明值都需要按照前景图片的颜色值进行渲染。在渲染前景图片时，深度缓冲区中像素点的深度值都为深度基准值，要是透明值为0，则表示该像素点在前景图片中需要保持透明，那么需要全景图片来填充，则深度缓冲区中该像素点的深度值不需要修改，要是透明值不为0，则表示该像素点需要由前景图片中的颜色来填充，不需要全景图片来填充，则需要将深度缓冲区中该像素点的深度值由深度基准值修改为第一深度值，例如：由0修改为-0.5。

在第一方面的一种可能的实现方式中，该方法还包括：若透明值为0，则中断向颜色缓冲区的颜色值写入操作。

该种可能的实现方式中，若透明值为0则表示不需要向颜色缓冲区写入前景图片的颜色值，写入颜色值通常是由片段着色器来执行，那么透明值为0时，只要中断片段着色器对该像素点的颜色值写入即可。

在第一方面的一种可能的实现方式中，上述步骤：将第一深度值写入深度缓冲区中的第二位置，包括：通过片段着色器将第一深度值写入深度缓冲区中的第二位置，片段着色器中配置有第一深度值。

该种可能的实现方式中，在片段着色器中配置第一深度值，在着色过程中，若通过对颜色值的判断确定需要将深度缓冲区中的深度基准值修改为第一深度值，就可以按照片段着色器中配置的第一深度值进行写入，提高了第一深度值写入的效率。

在第一方面的一种可能的实现方式中，该方法还包括：响应于对所述前景图片的位置选定操作，获取所述前景图片的渲染位置；根据所述渲染位置确定与所述前景图片对应的像素点。

该种可能的实现方式中，用户可以根据需求灵活摆放前景图片在全景图片中的重叠位置，用户选定位置后，终端设备会根据用户选定的位置，确定前景图片在画布上所对应的像素点，从而进行渲染，可以提高渲染的效率。

本申请第二方面提供一种终端设备，该终端设备具有实现上述第一方面或第一方面任意一种可能实现方式的方法的功能。该功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。该硬件或软件包括一个或多个与上述功能相对应的模块，例如：输入单元和处理单元。

本申请第三方面提供一种终端设备，该终端设备包括至少一个中央处理器(central processing unit，CPU)、GPU、存储器、收发器以及存储在存储器中并可在中央处理器上运行的计算机执行指令，当所述计算机执行指令被所述中央处理器执行时，所述中央处理器和GPU执行如上述第一方面或第一方面任意一种可能的实现方式所述的方法。

本申请第四方面提供一种存储一个或多个计算机执行指令的计算机可读存储介质，当所述计算机执行指令被处理器执行时，所述处理器执行如上述第一方面或第一方面任意一种可能的实现方式所述的方法。

本申请第五方面提供一种存储一个或多个计算机执行指令的计算机程序产品(或称计算机程序)，当所述计算机执行指令被所述中央处理器执行时，所述中央处理器和GPU执行上述第一方面或第一方面任意一种可能实现方式的方法。

本申请第六方面提供了一种芯片系统，该芯片系统包括中央处理器和GPU，用于支持终端设备实现上述第一方面或第一方面任意一种可能的实现方式中所涉及的功能。在一种可能的设计中，芯片系统还可以包括存储器，存储器，用于保存终端设备必要的程序指令和数据。该芯片系统，可以由芯片构成，也可以包含芯片和其他分立器件。

其中，第二至第六方面或者其中任一种可能实现方式所带来的技术效果可参见第一方面或第一方面不同可能实现方式所带来的技术效果，此处不再赘述。

本申请实施例采用先渲染前景图片，然后针对前景图片没占用的像素点再渲染全景图片的对应内容，这样针对前景图片与全景图片的重叠部分就避免了重复渲染，既减少了资源浪费，降低了渲染开销，又提高了渲染效率。

附图说明

图1是本申请实施例提供的全景应用的一场景示意图；

图2是本申请实施例提供的全景应用中图像渲染的方法的一实施例示意图；

图3是本申请实施例提供的全景应用中图像渲染的方法的另一实施例示意图；

图4A是本申请实施例提供的全景应用中图像渲染的方法的另一实施例示意图；

图4B是本申请实施例提供的全景应用中图像渲染的方法的另一实施例示意图；

图4C是本申请实施例提供的全景应用中图像渲染的方法的另一实施例示意图；

图5是本申请实施例提供的全景应用中图像渲染的一场景示意图；

图6是本申请实施例提供的终端设备的一结构示意图；

图7是本申请实施例提供的终端设备的另一结构示意图。

具体实施方式

下面结合附图，对本申请的实施例进行描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。本领域普通技术人员可知，随着技术的发展和新场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

本申请实施例提供一种图像渲染的方法，用于降低渲染开销，避免重复渲染而导致的资源浪费。本申请实施例还提供了相应的终端设备。以下分别进行详细说明。

本申请实施例涉及到的全景应用可包括全景看车、全景看房、全景体验酒店、地图街景和视频聊天的人工智能(artificial intelligence,AI)视频背景替换，以及其他应用到全景图片的应用。

图1是全景应用的一场景示意图。

如图1所示，在全景应用中，会用到全景图片和前景图片，前景图片以人物为例，全景图片以风景图片为例，用户或程序开发人员要将前景图片叠加到全景图片中。以用户通过手机等终端设备在全景应用中的操作为例，用户在手机上打开全景应用，选定全景图片，可以通过视角选择确定要选用的部分。然后，手机会将前景图片渲染到显示缓冲区，再将通过视角选择确定的全景图片渲染到显示缓冲区，实现前景图片与全景图片的叠加。

图1的示例说明中只是以手机为例，装载该全景应用的终端设备实际上不限于手机，还可以是平板电脑(pad)、电脑(personal computer，PC)、虚拟现实(virtual reality，VR)终端、增强现实(augmented reality，AR)终端、工业控制(industrial control)中的无线终端、无人驾驶(self driving)中的无线终端、远程医疗(remote medical)中的无线终端、智能电网(smart grid)中的无线终端、运输安全(transportation safety)中的无线终端、智慧城市(smart city)中的无线终端、智慧家庭(smart home)中的无线终端等。

在上述图1的示例中，先渲染前景图片，再渲染全景图片，已被前景图片占用的像素点在渲染全景图片时不会被重复渲染，该过程的实施例可以参阅图2进行理解。

图2为本申请实施例提供的全景应用中图像渲染的方法的一实施例示意图。

如图2所示，本申请实施例提供的全景应用中图像渲染的方法的一实施例可以包括：

101、终端设备响应对全景应用的操作，获取前景图片和全景图片。

全景图片为前景图片的背景图片。

前景图片可以是人物、地面图标或其他与背景图片不同的图片。背景图片也可以是非全景图片，背景图片的尺寸大于前景图片的尺寸。当背景图片是非全景图片时，在叠加前景图片的渲染过程中与本申请全景图片的实现原理与步骤基本相同，可以不进行视角选择。

102、终端设备渲染前景图片，并设置画布上每个像素点的深度值。

每个像素点的深度值包括第一深度值和深度基准值，第一深度值为与前景图片对应的像素点的深度值，深度基准值为除掉与前景图片对应的像素点之外的像素点的深度值，画布为终端设备的屏幕上用于显示所述全景图片和所述前景图片的区域。

针对一个画布，该画布上像素点的数量是固定的，画布上的像素点可以看做一个像素点集合A，其中被前景图片占用的像素点的集合可以描述为子集B，除掉子集B后剩余的像素点的集合可以描述为子集C，子集B与子集C的像素点不重叠，且子集B+子集C＝集合A。

为了便于描述，“第一深度值”代指前景图片对应的像素点的深度值，深度基准值是一个参考值，第一深度值和深度基准值分别用于表示像素点的不同状态，第一深度值用于表示对应的像素点不需要进行重复渲染，深度基准值表示对应的像素点还没有被渲染。第一深度值可以用具体的数值表示，如-0.5，深度基准值可以用0表示，当然，也可以是其他数值。另外，本申请中的第一深度值和深度基准值也不限于是数值，其他可以指示像素点是否需要渲染的字符也可以，例如：T表示不需要重复渲染，F表示该像素点未被渲染，当然，也可以通过其他字符来表示，只要指示清楚即可。深度值并不表示具体的物理概念，换用其他名称表述也可以，只要能表达像素点是否能按照全景图片进行渲染即可。

若深度基准值为0，也可以理解为在每次渲染前景图片前都会进行一次对画布上像素点的深度值的清零操作，然后在渲染前景图片时在对应的前景图片的像素点写入前景图片的第一深度值。若深度基准值不是0，也可以理解为在每次渲染前景图片前都会进行一次对画布上像素点的深度值的统一赋值操作，将画布上的像素点的深度值都先赋值为深度基准值，然后在渲染前景图片时在对应的前景图片的像素点将深度基准值修改为第一深度值。

103、终端设备根据第一深度值和深度基准值，在第一像素点渲染全景图片上与第一像素点对应的颜色值。

第一像素点为与深度基准值对应的像素点。

本申请实施例提供的方案，先渲染前景图片，然后针对前景图片没占用的像素点再渲染全景图片的对应内容，这样针对前景图片与全景图片的重叠部分就避免了重复渲染，既减少了资源浪费，降低了渲染开销，又提高了渲染效率。

上述步骤103可以通过两种方案来实现，下面分别进行介绍。

方案1：通过对第一深度值和深度基准值的识别来实现的方案。

在前景图片渲染结束后，开始渲染全景图片，渲染全景图片可以采用逐个像素点渲染的方式，被渲染到的像素点可以用“第二像素点”来代指。

在逐个像素点渲染时，若第二像素点的深度值为第一深度值，则中断在第二像素点渲染全景图片上对应第二像素点的颜色值，第二像素点为画布上的任一像素点；若第二像素点的深度值为深度基准值，则在第二像素点渲染全景图片上对应第二像素点的颜色值。

若该第二像素点的深度值为第一深度值，则表示该第二像素点已经被前景图片占用，不需要再重复渲染，则中断对该第二像素点的渲染。若该第二像素点的深度值为深度基准值，则表示该第二像素点未被前景图片占用，则按照该第二像素点对应的全景图片的内容进行渲染。

举例来说，若第一深度值为-0.5，深度基准值为0，若第二像素点的深度值为-0.5，则表示该第二像素点已经被前景图片占用，不需要再重复渲染，则中断对该第二像素点的渲染。若该第二像素点的深度值为0，则表示该第二像素点未被前景图片占用，则按照该第二像素点对应的全景图片的内容进行渲染。

这样通过第一深度值和深度基准值对像素点是否需要渲染的指示可以确保已被前景图片占用的像素点不会再按照全景图片重复渲染，确保了渲染的准确度。

方案2：通过第二像素点的深度值与第二深度值的比较来实现的方案。

“第二深度值”代指全景图片的深度值，第一深度值与第二深度值是相对的，因为全景图片是前景图片的背景图片，所以第二深度值要大于第一深度值，第一深度值和第二深度值都小于深度基准值，第一深度值、第二深度值和深度基准值通常都是预先配置好的。渲染全景图片可以采用逐个像素点渲染的方式，被渲染到的像素点可以用“第二像素点”来代指。

在逐个像素点渲染时，若第二像素点的深度值小于第二深度值，则中断在第二像素点渲染全景图片上对应第二像素点的颜色值，第二深度值大于第一深度值，且小于深度基准值，第二像素点为画布上的任一像素点；若第二像素点的深度值大于第二深度值，则在第二像素点渲染全景图片上对应第二像素点的颜色值。

若该第二像素点的深度值小于第二深度值，则表示该第二像素点已经被前景图片占用，不需要再重复渲染，则中断对该第二像素点的渲染。若该第二像素点的深度值大于第二深度值，则表示该第二像素点未被前景图片占用，则按照该第二像素点对应的全景图片的内容进行渲染。

举例来说，若第一深度值为-0.5，深度基准值为0，第二深度值为-0.2。若第二像素点的深度值小于-0.2，也就表明该第二像素点的深度值是-0.5，则表示该第二像素点已经被前景图片占用，不需要再重复渲染，则中断对该第二像素点的渲染。若该第二像素点的深度值大于-0.2，也就表明该第二像素点的深度值是0，则表示该第二像素点未被前景图片占用，则按照该第二像素点对应的全景图片的内容进行渲染。

这样通过第一深度值、深度基准值与第二深度值的比较来确定第二像素点是否需要渲染，可以确保已被前景图片占用的像素点不会再按照全景图片重复渲染，确保了渲染的准确度。

渲染的过程通常是由图形处理器(graphics processing unit，GPU)来完成的，GPU中包括顶点着色器(vertex shader)和片段着色器(fragment shader)，顶点着色器通常用来定位像素点，片段着色器用来着色，也就是将颜色值写入到颜色缓冲区中。在顶点着色器中配置第二深度值，可以在定位像素点时用第二深度值与第二像素点的深度值进行比较，从而确定第二像素点是否需要按照全景图片进行渲染。

也就是说，可以在顶点着色器的脚本中写入第二深度值，例如：-0.2，这样，顶点着色器在定位像素点时就可以比较-0.2与-0.5，或者比较-0.2与0的大小关系，从而确定是否要对第二像素点进行渲染，如果需要渲染，则由片段着色器来执行颜色值的写入。

上述步骤102中可以通过如下实施例来实现：检测前景图片所对应的像素点的alpha通道的透明值，该透明值用于指示所述像素点的透明程度；若透明值为非0，则将前景图片的颜色值写入颜色缓冲区中的第一位置，并将第一深度值写入深度缓冲区中的第二位置，第一位置为颜色缓冲区中与前景图片对应的像素点的位置，第二位置为深度缓冲区中与前景图片对应的像素点的位置。

若透明值为0，则中断向颜色缓冲区的颜色值写入操作。

该种可能的实施例中，可以将与渲染相关的显示缓冲区(frame buffer)划分为颜色缓冲区和深度缓冲区，其中颜色缓冲区用于缓存画布上像素点的颜色值，深度缓冲区用于缓存画布上像素点的深度值。如：缓存第一深度值、深度基准值或第二深度值。每个像素点都有一个alpha通道，该alpha通道有256级颜色值，分别从0至255，其中0表示透明值为0，也就是该像素点在前景图片中需要保持透明，不需要渲染，其他1至255的非0透明值都需要按照前景图片的颜色值进行渲染。

在渲染前景图片时，深度缓冲区中像素点的深度值都为深度基准值，要是透明值为0，则表示该像素点在前景图片中需要保持透明，那么需要全景图片来填充，则深度缓冲区中该像素点的深度值不需要修改，要是透明值不为0，则表示该像素点需要由前景图片中的颜色来填充，不需要全景图片来填充，则需要将深度缓冲区中该像素点的深度值由深度基准值修改为第一深度值，例如：由0修改为-0.5。

若透明值为0则表示不需要向颜色缓冲区写入颜色值，写入颜色值通常是由片段着色器来执行，那么透明值为0时，只要中断片段着色器对该像素点的颜色值写入即可。

本申请实施例提供的全景应用中图像渲染的方法还包括：响应于对所述前景图片的位置选定操作，获取所述前景图片的渲染位置；根据所述渲染位置确定与所述前景图片对应的像素点。

本申请实施例中，用户可以根据需求灵活摆放前景图片在全景图片中的重叠位置，用户选定位置后，终端设备会根据用户选定的位置，确定前景图片在画布上所对应的像素点，从而进行渲染，可以提高渲染的效率。

上述从终端设备的整体上描述了全景应用中图像渲染的方法，下面从模块话的角度描述调用全景应用到GPU执行渲染，以及进行显示的过程。

图3是本申请实施例提供的渲染过程的一流程示意图。

如图3所示，该渲染过程会涉及到全景应用(APP)201、全景(Panorama)软件开发工具包(software development kit，SDK)202、全景功能库203、系统图形库204、图形处理器(GPU)205显示缓冲区206和显示设备207，其中，全景应用201用于与用户交互。全景SDK202相当于一个接口，该接口可以连接到全景功能库203。全景功能库203中可以包括前景图片和全景图片的叠加算法，该叠加算法可以包括对显示缓冲区中的深度值和颜色值清零，进行深度值识别，以及根据深度值进行前景图片和全景图片的渲染。全景功能库203中包含该算法，具体过程可以是全景功能库203调用系统图形库204将深度值和颜色值通过GPU205写入到显示缓冲区206，并通过显示设备207显示叠加后的渲染结果。

上述图3中的全景功能库203如图4A所示可以包括渲染初始化模块2031、渲染前景图片模块2032和渲染全景图片模块2033。

如图4A所示过程中，全景应用201通过调用全景SDK202来实现具体的全景应用功能，比如说实现街景浏览，实现实时视频背景替换功能。全景功能库203是部署在终端设备上的全景图片展示功能的动态库，全景功能库203中包括的渲染初始化模块2031、渲染前景图片模块2032和渲染全景图片模块2033在全景应用渲染一帧画面时一次调用这三个模块完成显示缓冲区清零，然后渲染前景图片，最后渲染作为背景的全景图片完成一帧全景图片叠加。全景功能库203调用系统图形库204的来操作GPU205，将每一步操作记录在显示缓冲区206中，之后系统会定时将显示缓冲区206中的内容显示在显示设备上207，从而完成全景图片与前景图片叠加后的结果。

显示缓冲区206可以包括颜色缓冲区和深度缓冲区，在前景图片渲染之前，渲染初始化模块2031可以对颜色缓冲区中的颜色值和深度缓冲区中的深度值进行清零，这样可以避免上一次的结果对本次渲染造成干扰。

前景图片的渲染过程结合上述模块可以包括：全景应用201通过全景SDK202的接口将前景图片传递给全景功能库203。渲染前景图片模块2032可以通过系统图形库204调用GPU中的片段着色器判断当前像素点(要被渲染的像素点，参考前述的第二像素点)alpha通道的透明值是否为0，如果透明值为零说明当前像素点透明，需要中断片段着色器继续执行，保持深度缓冲区中该像素点的深度基准值(例如：0)不被修改。如果判断当前像素点alpha通道的透明值不为0，说明该像素点有颜色，就将该前景图片的颜色值写入颜色缓冲区中，并且该像素点对应的深度值写成第一深度值(例如-0.5)。这样，显示缓冲区中对应位置已经保存了前景图片颜色值，并且非透明部分的深度缓冲值被设置成了-0.5。其中，渲染前景图片模块2032中的逻辑可以包括图4B所示的如下步骤。

2032-1、渲染前景图片模块2032接收到前景图片。

2032-2、渲染前景图片模块2032启动对前景图片的渲染。

2032-3、渲染前景图片模块2032可以通过系统图形库204调用GPU中的片段着色器判断当前像素点alpha通道的透明值是否为0，若是为0则执行步骤2032-4，若不为0，则执行步骤2032-5。

2032-4、如果透明值为零则渲染前景图片模块2032中断片段着色器继续执行，渲染前景图片模块2032保持深度缓冲区中该像素点的深度基准值不被修改。

2032-5、如果当前像素点alpha通道的透明值不为0，渲染前景图片模块2032将通过片段着色器前景图片的颜色值写入颜色缓冲区中，并且将深度缓冲区中该像素点对应的深度值写成第一深度值。

前景图片渲染结束后，开始渲染全景图片。

渲染全景图片模块2033接收全景应用201通过全景SDK202的接口传递来的全景图片，渲染全景图片模块2033通过统图形库204调用GPU中的顶点着色器进行渲染，顶点着色器的脚本中将全景图片的深度值设为-0.2，GPU的Eearly-Depth-Test处于开启状态，GPU会计算当前像素点(参考前述的第二像素点)的深度值，如果前景图片的深度值小于深度缓冲区中该像素点的深度值，说明深度缓冲区中该像素点并没有渲染前景图片的颜色，GPU会将全景图片中对应像素点的颜色值写入到颜色缓冲区。如果当前像素点的深度值大于深度缓冲区中该像素点的深度值，(例如：-0.2>-0.5)，这时GPU Early-Depth-Test失败，不执行片段着色器，保持颜色缓冲区中对应像素的颜色值和深度缓冲区中的深度值不变。其中，渲染全景图片模块2033中的逻辑可以包括图4C所示的如下步骤。

2033-1、渲染全景图片模块2033接收全景图片。

2033-2、渲染全景图片模块2033将二维平面模拟成三维空间。

2033-3、渲染全景图片模块2033在顶点着色器的脚本中将全景图片的深度值设置为第二深度值。

2033-4、渲染全景图片模块2033确认GPU的Eearly-Depth-Test功能已开启。

若未开启，则触发开启GPU的Eearly-Depth-Test功能。

2033-5、渲染全景图片模块2033调用GPU中的顶点着色器对当前像素点的深度值与第二深度值进行比较，若当前像素点的深度值小于第二深度值，则执行步骤2033-6，若当前像素点的深度值大于第二深度值，则执行步骤2033-7。

2033-6、若当前像素点的深度值小于第二深度值，则渲染全景图片模块2033触发GPU Early-Depth-Test失败，不执行片段着色器。

2033-7、若当前像素点的深度值大于第二深度值，渲染全景图片模块2033触发GPU将全景图片中对应像素点的颜色值写入到颜色缓冲区。

下面结合视频流背景替换应用介绍上述叠加渲染的过程。可以通过AI抠图技术将视频中的人像提取出来作为前景图片，然后用360度全景图片作为背景图片和作为前景图片的人像相融合。该过程在本申请实施例中的渲染过程可以参阅图5进行理解，如图5所示，本实施例的组件结构图主要包括了全景图片301和抠除了背景的人像302作为前景图片。

渲染初始化模块2031对颜色缓冲区和深度缓冲区都清零，颜色缓冲区和深度缓冲区中的清零后的情况可以参阅3031和3032进行理解。

渲染前景图片模块2032将用户输入的人物图片302按照用户指定的位置渲染到显示缓冲区中，并在深度缓冲区中该人物图像对应的位置将像素点的深度值修改为第一深度值(例如：-0.5)。结合到该场景，渲染人物图片302后，颜色缓冲区和深度缓冲区中的清零后的情况可以参阅3033和3034进行理解。

渲染全景图片模块2033在前景图片渲染完成后再继续渲染全景图片的过程。在上一个步骤完成后，深度缓冲区中所有像素值都变成了深度基准值(例如：0)或者第一深度值(例如：-0.5)。渲染全景图片时，在顶点着色器中将计算深度计算结果设定成第二深度值(例如：-0.2)。结合到该场景，渲染全景图片301后，颜色缓冲区和深度缓冲区中的清零后的情况可以参阅3035和3036进行理解。

本申请实施例通过先渲染前景图片，让前景图片通过深度值对全景图片形成遮挡，由于GPU Early-Depth-Test的功能，GPU会自动优化放弃对深度值大于深度缓冲区中深度值的像素渲染。相比与叠加区域重复渲染，本申请实施例提供的方案相当于少渲染了一个前景图片，避免了重复渲染，既减少了资源浪费，降低了渲染开销，又提高了渲染效率。

上述示例中只是以一个前景图片为例进行的描述，一个全景图片上可以叠加两个或更多个前景图片，无论有多少个前景图片，渲染的原理都与上述实施例所描述的原理相同，如果两个或多个作为全景图片的前景图片出现重叠，可以根据两张或多张前景图片的排布赋予不同的深度值，渲染时先渲染深度值最小的前景图片，然后依次深度值的顺序依次渲染其他前景图片，渲染的原理与上述实施例的渲染原理相同。

以上描述了全景应用中图像渲染的方法，下面结合附图介绍本申请实施例提供的终端设备。

如图6所示，本申请实施例提供的终端设备40的一实施例包括：

输入单元401，用于响应对所述全景应用的操作；

处理单元402用于：

获取前景图片和全景图片，所述全景图片为所述前景图片的背景图片；

渲染所述前景图片，并设置画布上每个像素点的深度值，所述每个像素点的深度值包括第一深度值和深度基准值，所述第一深度值为与所述前景图片对应的像素点的深度值，所述深度基准值为除掉与所述前景图片对应的像素点之外的像素点的深度值，所述画布为终端设备的屏幕上用于显示所述全景图片和所述前景图片的区域；

根据第一深度值和深度基准值，在第一像素点渲染全景图片上与第一像素点对应的颜色值，第一像素点为与所述深度基准值对应的像素点。

本申请实施例提供的方案相当于少渲染了一个前景图片，避免了重复渲染，既减少了资源浪费，降低了渲染开销，又提高了渲染效率。

一种可能的实施例中，处理单元402用于：

若第二像素点的深度值为第一深度值，则中断在所述第二像素点渲染所述全景图片上对应所述第二像素点的颜色值，所述第二像素点为所述画布上的任一像素点；

若所述第二像素点的深度值为深度基准值，则在所述第二像素点渲染所述全景图片上对应所述第二像素点的颜色值。

一种可能的实施例中，处理单元402用于：

若第二像素点的深度值小于第二深度值，则中断在所述第二像素点渲染所述全景图片上对应所述第二像素点的颜色值，所述第二深度值大于所述第一深度值，且小于所述深度基准值，所述第二像素点为所述画布上的任一像素点；

若第二像素点的深度值大于第二深度值，则在所述第二像素点渲染所述全景图片上对应所述第二像素点的颜色值。

一种可能的实施例中，处理单元402还用于：

通过顶点着色器比较所述第二像素点的深度值和所述第二深度值，所述顶点着色器中配置有所述第二深度值。

一种可能的实施例中，处理单元402用于：

检测所述前景图片所对应的像素点的alpha通道的透明值，该透明值用于指示所述像素点的透明程度；

若所述透明值为非0，则将所述前景图片的颜色值写入颜色缓冲区中的第一位置，并将第一深度值写入深度缓冲区中的第二位置，所述第一位置为所述颜色缓冲区中与所述前景图片对应的像素点的位置，所述第二位置为所述深度缓冲区中与所述前景图片对应的像素点的位置。

一种可能的实施例中，处理单元402还用于：

若所述透明值为0，则中断向所述颜色缓冲区的颜色值写入操作。

一种可能的实施例中，处理单元402用于：

通过片段着色器将所述第一深度值写入深度缓冲区中的第二位置，所述片段着色器中配置有所述第一深度值。

一种可能的实施例中，处理单元402还用于：

响应于对所述前景图片的位置选定操作，获取所述前景图片的渲染位置；

根据所述渲染位置确定与所述前景图片对应的像素点。

需要说明的是，上述终端设备40的各单元之间的信息交互、执行过程等内容，由于与本申请方法实施例基于同一构思，其带来的技术效果与本发明方法实施例相同，具体内容可参见本申请前述所示的方法实施例中的叙述，此处不再赘述。

图7示出的是与本申请实施例提供的终端相关的手机的部分结构的框图。参考图7，手机包括：射频(Radio Frequency，RF)电路510、存储器520、输入单元530、显示单元540、图形处理器(GPU)550、音频电路560、无线保真(wireless fidelity，WiFi)模块570、处理器580、以及电源590等部件。本领域技术人员可以理解，图7中示出的手机结构并不构成对手机的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图7对手机的各个构成部件进行具体的介绍：

RF电路510可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，给处理器580处理；另外，将设计上行的数据发送给基站。通常，RF电路510包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器(Low NoiseAmplifier，LNA)、双工器等。此外，RF电路510还可以通过无线通信与网络和其他设备通信。上述无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(GlobalSystem of Mobile communication，GSM)、通用分组无线服务(General Packet RadioService，GPRS)、码分多址(Code Division Multiple Access，CDMA)、宽带码分多址(Wideband Code Division Multiple Access,WCDMA)、长期演进(Long Term Evolution，LTE)、电子邮件、短消息服务(Short Messaging Service，SMS)等。

存储器520可用于存储软件程序以及模块，处理器580通过运行存储在存储器520的软件程序以及模块，从而执行手机的各种功能应用以及数据处理。存储器520可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器520可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

输入单元530可用于接收用户操作指令，以及产生与手机的用户设置以及功能控制有关的键信号输入。具体地，输入单元530可包括触控面板531以及其他输入设备532。触控面板531，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板531上或在触控面板531附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触控面板531可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器580，并能接收处理器580发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板531。除了触控面板531，输入单元530还可以包括其他输入设备532。具体地，其他输入设备532可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元540可用于显示前景图片和全景图片的叠加结果。显示单元540可包括显示面板541，可选的，可以采用液晶显示器(Liquid Crystal Display，LCD)、有机发光二极管(Organic Light-Emitting Diode，OLED)等形式来配置显示面板541。进一步的，触控面板531可覆盖显示面板541，当触控面板531检测到在其上或附近的触摸操作后，传送给处理器580以确定触摸事件的类型，随后处理器580根据触摸事件的类型在显示面板541上提供相应的视觉输出。虽然在图7中，触控面板531与显示面板541是作为两个独立的部件来实现手机的输入和输入功能，但是在某些实施例中，可以将触控面板531与显示面板541集成而实现手机的输入和输出功能。

手机还可包括至少一种传感器，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板541的亮度，接近传感器可在手机移动到耳边时，关闭显示面板541和/或背光。作为运动传感器的一种，加速计传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于手机还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

图形处理器(GPU)550用于执行上述全景应用中图像渲染的方法实施例中的相应步骤，例如：步骤10、102和103等，以及颜色缓冲区和深度缓冲区的清零、前景图片渲染和全景图片渲染等步骤。

音频电路560、扬声器561，传声器562可提供用户与手机之间的音频接口。音频电路560可将接收到的音频数据转换后的电信号，传输到扬声器561，由扬声器561转换为声音信号输出；另一方面，传声器562将收集的声音信号转换为电信号，由音频电路560接收后转换为音频数据，再将音频数据输出处理器580处理后，经RF电路510以发送给比如另一手机，或者将音频数据输出至存储器520以便进一步处理。

WiFi属于短距离无线传输技术，手机通过WiFi模块570可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图7示出了WiFi模块570，但是可以理解的是，其并不属于手机的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器580是手机的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器520内的软件程序和/或模块，以及调用存储在存储器520内的数据，执行手机的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器580可包括一个或多个处理单元；优选的，处理器580可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器580中。

手机还包括给各个部件供电的电源590(比如电池)，优选的，电源可以通过电源管理系统与处理器580逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

尽管未示出，手机还可以包括摄像头、蓝牙模块等，在此不再赘述。

本申请还提供了一种芯片系统，该芯片系统包括中央处理器和GPU，用于支持上述终端设备实现其所涉及的功能，例如，例如渲染前景图片和渲染全景图片。在一种可能的设计中，所述芯片系统还包括存储器，所述存储器，用于保存计算机设备必要的程序指令和数据。该芯片系统，可以由芯片构成，也可以包含芯片和其他分立器件。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。

所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(Digital Subscriber Line，DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存储的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

本申请中“第一”、“第二”、“第三”等仅为了区分表述，没有限定顺序的意思；另外，第一对象和第二对象在某些情况下有可能指同一对象；再者，由于没有限定顺序，所以没有第一，也可以有第二或第三。

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

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