CN113660476A - 一种基于Web页面的立体显示系统及方法 - Google Patents

Abstract

本实施例公开了一种基于Web页面的立体显示系统及方法。所述系统包括：立体显示模块和渲染模块；所述渲染模块与所述立体显示模块连接。其中，所述渲染模块，包括立体相机单元和着色器单元；其中，立体相机单元用于将待显示内容构建为包含至少两个视点视图，所述至少两个视点视图包括左眼视图和右眼视图；着色器单元，用于将所述至少两个视点视图拼接处理，得到拼接结果；所述立体显示模块，用于接收所述拼接结果，并基于立体显示光学组件，进行Web页面的立体显示。采用本发明实施例的技术方案，使Web内容的呈现方式新颖、逼真，带给用户独特的观看及交互体验。

Description

一种基于Web页面的立体显示系统及方法

技术领域

本申请实施例涉及互联网技术领域，尤其涉及一种基于Web页面的立体显示系统及方法。

背景技术

随着计算机网络的发展，人们越来越依靠Web页面获取信息。Web页面包括图形、文字、声音和视像等信息。HTML5将Web带入一个成熟的应用平台，视频、音频、图像、动画以及游戏等内容在性能上得到了显著提升。虽然通过Web页面可以方便、快速地获得信息，但目前Web页面在内容呈现方式上仍较为单一，并且通常是静态的，显示界面无法提供给使用者更加生动的显示界面，从而影响了使用者的使用。

因此，如何为用户呈现更加逼真的显示效果，是本领域技术人员亟待解决的技术问题。

发明内容

本发明实施例提供一种基于Web页面的立体显示系统及方法，使Web内容的呈现方式新颖、逼真，带给用户独特的观看及交互体验。第一方面，本发明实施例提供了一种基于Web页面的立体显示系统，该系统包括：立体显示模块和Web页面的渲染模块；所述渲染模块与所述立体显示模块连接；

所述渲染模块，包括立体相机单元和着色器单元；其中，所述立体相机单元用于将待显示内容构建为包含至少两个视点视图，所述至少两个视点视图包括左眼视图和右眼视图；所述着色器单元，用于将所述至少两个视点视图拼接处理，得到拼接结果；

所述立体显示模块，用于接收所述拼接结果，并基于立体显示光学组件，进行Web页面的立体显示。

进一步的，所述渲染模块为基于WebGL图形库的渲染模块。

进一步的，所述基于WebGL图形库的渲染模块，用于：

接收Web网站页面引入的3D渲染库，并基于所述3D渲染库构建立体相机单元；其中，所述立体相机单元包括CameraL和CameraR。

进一步的，所述3D渲染库包括three.js、thingjs、thinkgl、lightgl、egret以及layabox中的至少一种。

进一步的，所述系统还包括人眼追踪模块；

所述人眼追踪模块用于获取人眼追踪结果，并发送至所述渲染模块；

所述立体相机单元，具体用于：

基于所述人眼追踪结果，确定左眼视角和右眼视角，并根据所述左眼视角和右眼视角将待显示内容构建为左眼视图和右眼视图。

进一步的，所述渲染模块与所述人眼追踪模块通过WebSocket、Socket、USB、蓝牙以及红外传输中的至少一种方式进行连接。

进一步的，所述立体显示模块为支持硬件交织排图的立体显示模块，所述立体显示模块用于执行硬件交织排图，并具体用于：对接收的所述拼接结果，进行解析分割得到至少两个视点视图，并将所述至少两个视点视图进行交织处理后显示。

第二方面，本发明实施例还提供了一种基于Web页面的立体显示方法，该方法包括：

将待显示内容构建为左眼视图和右眼视图；将所述左眼视图和右眼视图拼接处理，得到拼接结果；

基于立体显示光学组件对所述拼接结果进行Web页面的立体显示。

进一步的，所述方法基于WebGL图形库的渲染模块执行。

进一步的，所述方法还包括：获取人眼追踪结果，

所述将待显示内容构建为左眼视图和右眼视图包括：

基于所述人眼跟踪结果，将待显示内容构建为左眼视图和右眼视图。

本发明实施例公开了一种基于Web页面的立体显示系统及方法。该系统包括：立体显示模块和Web页面的渲染模块；所述渲染模块与所述立体显示模块连接；其中，所述渲染模块，包括立体相机单元和着色器单元；其中，所述立体相机单元用于将待显示内容构建为包含至少两个视点视图，所述至少两个视点视图包括左眼视图和右眼视图；所述着色器单元，用于将所述至少两个视点视图拼接处理，得到拼接结果；所述立体显示模块，用于接收所述拼接结果，并基于立体显示光学组件，进行Web页面的立体显示。采用本发明实施例的技术方案，使Web内容的呈现方式新颖、逼真，带给用户独特的观看及交互体验。

附图说明

图1是本发明实施例一提供的一种基于Web页面的立体显示系统的结构示意图；

图2是本发明实施例二提供的一种基于Web页面的立体显示系统的结构示意图；

图3是本发明实施例三提供的一种基于Web页面的立体显示系统的结构示意图；

图4是本发明实施例四提供的一种基于Web页面的立体显示方法的流程图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本申请，而非对本申请的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本申请相关的部分而非全部结构。

在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各步骤描述成顺序的处理，但是其中的许多步骤可以被并行地、并发地或者同时实施。此外，各步骤的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。

实施例一

图1是本发明实施例一提供的一种基于Web页面的立体显示系统的结构示意图。本发明实施例的技术方案可以适用于Web页面的立体显示的场景中。

如图1所示，本发明实施例中提供的基于Web页面的立体显示系统包括：Web页面的渲染模块110和立体显示模块120；所述渲染模块110与所述立体显示模块120连接，；

所述渲染模块110，包括立体相机单元111和着色器单元112；其中，所述立体相机单元111用于将待显示内容构建为包含至少两个视点视图，至少两个视点视图可以是在同一物品前不同的角度观看时对应的视图，例如在与物品1米的距离，以相同的高度，每隔5°拍摄一张视图。所述至少两个视点视图包括但不限于左眼视图和右眼视图，还可以是生成多视图，例如视图数量>＝3；所述着色器单元112，用于将所述至少两个视点视图拼接处理，得到拼接结果；

所述立体显示模块120，用于接收所述拼接结果，并基于立体显示光学组件，进行Web页面的立体显示。

渲染模块110包含但不限于立体相机单元111和着色器单元112。其中，立体相机单元111用于构建待显示内容的至少两个视点视图；着色器单元112用于将所述至少两个视点视图拼接处理，得到拼接结果。其中，待显示内容可以是Web页面中需要显示的资源，例如视频、图片以及其他显示内容。渲染模块110可以是将视图进行拼接处理的模块，例如，将待显示的内容构建为包含至少两个视点视图，所述至少两个视点视图包括左眼视图和右眼视图，并将所述至少两个视点视图进行拼接处理。本申请中显示输出的是裸眼3D显示器，且裸眼3D显示器支持对左右视图拼接画面进行解析分割，因此需要将基于Web页面的左眼视图和右眼视图拼接后输出。

立体显示模块120可以是指将待显示内容的至少两个视点视图进行立体显示的模块，即呈现形式可以是三维立体视图。例如，在普通的显示模块下，人眼看到的是Web页面是平面图形，在立体显示模块120中，待显示内容以三维立体的形态展现在用户视野中，使Web页面的内容呈现方式更加逼真。

在本发明实施例中，渲染模块110与立体显示模块120相连接，将待显示的Web页面的内容构建为至少两个视点视图，并将所述至少两个视点视图进行拼接处理，并将所述拼接结果发送给立体显示模块120，在立体显示模块120中，将待显示的Web页面以立体图像的形式展现在用户的视野中，使Web内容的呈现方式新颖、逼真，带给用户独特的观看及交互体验。

实施例二

图2是本发明实施例二中提供的一种基于Web页面的立体显示系统的结构示意图，本实施例在上述实施例的基础上进行细化，本实施例可以与上述实施例中各个可选方案结合。可选的，在本发明实施例中还包括人眼追踪模块130。

所述人眼追踪模块130用于获取人眼追踪结果，并发送至所述渲染模块；所述渲染模块与所述人眼追踪模块连接。

人眼追踪模块130实时收集用户人眼观测数据并传递到基于WebGL的3D渲染模块113及立体显示模块120。

立体相机单元111构建左右眼视图的CameraL及CameraR，它使用人眼追踪模块130收集到的用户人眼数据模拟出左眼视图和右眼视图。

着色器单元112在最终渲染输出图像前对立体相机单元111模拟的左眼视图和右眼视图进行拼接处理后输出到立体显示模块120。

立体显示模块120将着色器单元112输出的进行拼接处理后的图像正确的呈现给用户。

其中，其中，人眼追踪模块130可以是对人眼进行动态捕捉的模块，例如可以通过摄像头获取人眼的运动信息，并实时追踪眼睛的位置变化。当人的眼睛处于不同位置时，对于物体的观看角度会产生细微的变化。这些变化中可以提取到特征，计算机可以通过识别这些特征，从而实时追踪眼睛的位置变化。例如，人眼跟踪模块130根据人眼的变化收集用户的图像数据，包括但不限于脸宽数据、瞳距数据、视角数据、注视数据以及扫视数据等。

人眼追踪模块130将采集到的用户人眼数据可以通过包含但不限于WebSocket、Socket、USB、蓝牙、红外等方式实时传递到基于WebGL的3D渲染模块113及立体显示模块120以供使用。

基于WebGL的3D渲染模块113，用于接收Web网站页面引入的3D渲染库，并基于所述3D渲染库构建立体相机单元111。WebGL(Web图形库)是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5<canvas>元素中使用。这种一致性使API可以利用用户设备提供的硬件图形加速。

在本发明实施例中，基于WebGL的3D渲染模块113包含但不限于three.js、thingjs、thinkgl、lightgl、egret以及layabox等。

以three.js为例，在远程Web网站页面中引入three.js，使它同Web页面内容一同被加载到本地浏览器内；进一步的，在three.js代码中去构建立体相机单元111，即左眼视图和右眼视图的CameraL及CameraR；进一步的，使用人眼追踪模块130采集到的用户人眼数据分别设置CameraL及CameraR视角，具体的，着色器单元112将立体相机单元111基于所述人眼追踪结果，确定左眼视角和右眼视角，并根据所述左眼视角和右眼视角将待显示内容构建为左眼视图和右眼视图，将构建的左眼视图和右眼视图进行拼接处理后输出到立体显示模块120端，由立体显示模块120向用户呈现立体显示效果供用户观看使用。

立体显示模块120通过视频线接收经由着色器单元112输出的图形内容，视频线包含但不限于：DP线、HDMI线、DVI线、VGA线等。

在立体显示模块120呈现立体显示效果的同时，它将根据人眼追踪模块130所收集到的用户人眼数据进行实时动态调节，以保持用户始终可以正确观看到Web内容的立体显示效果。

在本发明实施例中人眼追踪模块130实时收集用户人眼观测数据并传递到基于WebGL的3D渲染模块113及立体显示模块120；立体相机单元111构建左右眼视角的CameraL及CameraR，并模拟出左眼视图和右眼视图；着色器单元112在对模拟的左眼视图和右眼视图进行拼接处理后输出到立体显示模块120；立体显示模块120将着色器单元112输出的进行拼接处理后的图像正确的呈现给用户，使Web内容的呈现方式新颖、逼真，带给用户独特的观看及交互体验。

实施例三

图3是本发明实施例三中提供的一种基于Web页面的立体显示系统的结构示意图，本实施例在上述实施例的基础上进行细化，本发明实施例可以与上述一个或者多个实施例中各个可选方案结合。可选的，在本发明实施例中所述立体显示模块120为支持硬件交织排图的立体显示模块121。

人眼追踪模块130实时收集用户人眼观测数据并传递到渲染模块110及支持硬件交织排图的立体显示模块121。

立体相机单元111构建左右眼视角的CameraL及CameraR，它使用人眼追踪模块130收集到的用户人眼数据模拟出左眼视图和右眼视图，并将左眼视图和右眼视图发送至支持硬件交织排图的立体显示模块121。

支持硬件交织排图的立体显示模块121将立体相机单元111发送的左眼视图和右眼视图拼接结果进行解析分割，分割出左眼视图和右眼视图后，进行交织处理，并将交织处理后的结果实时呈现。

在本发明实施例中，在支持硬件交织排图的立体显示模块121上实施时，渲染模块110将立体相机单元111构建的左眼视图和右眼视图(CameraL及CameraR)直接输出到立体显示模块120中，由立体显示模块120当中的支持硬件交织排图的立体显示模块121完成左眼视图和右眼视图的交织处理工作后实时呈现。使Web页面中各种内容的立体化显示，包括但不限于图片、视频、游戏、3D模型文件、动画等内容，使Web内容的呈现方式新颖、逼真，带给用户独特的观看及交互体验。

实施例四

图4是本发明实施例四提供的一种基于Web页面的立体显示方法，本发明实施例的技术方案可适用于立体显示的情况，尤其适用于基于Web页面的立体显示的情形，该方法可由本发明任意实施例中所提供的基于Web页面的立体显示系统来执行。如图4所示，本发明实施例中提供的基于Web页面的立体显示方法具体包括以下步骤：

S410、将待显示内容构建为包含至少两个视点视图，所述至少两个视点视图包括左眼视图和右眼视图；将所述至少两个视点视图拼接处理，得到拼接结果。

在上述实施例的基础上，可选的，还包括：

基于WebGL的图形库，接收Web网站页面引入的3D渲染库，并基于所述3D渲染库构建立体相机单元；所述3D渲染库包括three.js、thingjs、thinkgl、lightgl、egret以及layabox中的至少一种；其中，所述立体相机单元包括CameraL和CameraR。

S420、接收所述拼接结果进行Web页面的立体显示。

在上述实施例的基础上，可选的，还包括：所述渲染模块通过DP线、HDMI线、DVI线以及VGA线中的至少一种方式将所述拼接结果进行Web页面的立体显示。

可选的，该方法还包括：

人眼追踪模块获取人眼追踪结果，并发送至所述渲染模块；

在上述实施例的基础上，可选的，还包括：基于所述人眼追踪结果，确定左眼视角和右眼视角，并根据所述左眼视角和右眼视角将待显示内容构建为左眼视图和右眼视图。

其中，所述人眼追踪结果通过WebSocket、Socket、USB、蓝牙以及红外传输中的至少一种方式传输给所述渲染模块。

本发明实施例中所提供的基于Web页面的立体显示方法可应用于上述本发明任意实施例中所提供的基于Web页面的立体显示系统，具备该基于Web页面的立体显示系统相应的功能和有益效果，未在上述实施例中详尽描述的技术细节，具体可参见本申请任意实施例中所提供的基于Web页面的立体显示系统。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种基于Web页面的立体显示系统，其特征在于，所述系统包括：立体显示模块和Web页面的渲染模块；所述渲染模块与所述立体显示模块连接；

所述渲染模块，包括立体相机单元和着色器单元；其中，所述立体相机单元用于将待显示内容构建为包含至少两个视点视图，所述至少两个视点视图包括左眼视图和右眼视图；所述着色器单元，用于将所述至少两个视点视图拼接处理，得到拼接结果；

所述立体显示模块，用于接收所述拼接结果，并基于立体显示光学组件，进行Web页面的立体显示。

2.根据权利要求1所述的系统，其特征在于，所述渲染模块为基于WebGL图形库的渲染模块。

3.根据权利要求2所述的系统，其特征在于，所述基于WebGL图形库的渲染模块，用于：

接收Web网站页面引入的3D渲染库，并基于所述3D渲染库构建立体相机单元；其中，所述立体相机单元包括CameraL和CameraR。

4.根据权利要求3所述的系统，其特征在于，所述3D渲染库包括three.js、thingjs、thinkgl、lightgl、egret以及layabox中的至少一种。

5.根据权利要求1所述的系统，其特征在于，所述系统还包括人眼追踪模块；

所述人眼追踪模块用于获取人眼追踪结果，并发送至所述渲染模块；

所述立体相机单元，具体用于：

基于所述人眼追踪结果，确定左眼视角和右眼视角，并根据所述左眼视角和右眼视角将待显示内容构建为左眼视图和右眼视图。

6.根据权利要求1所述的系统，其特征在于，所述渲染模块与所述人眼追踪模块通过WebSocket、Socket、USB、蓝牙以及红外传输中的至少一种方式进行连接。

7.根据权利要求1所述的系统，其特征在于，所述立体显示模块为支持硬件交织排图的立体显示模块，所述立体显示模块用于执行硬件交织排图，并具体用于：对接收的所述拼接结果，进行解析分割得到至少两个视点视图，并将所述至少两个视点视图进行交织处理后显示。

8.一种基于Web页面的立体显示方法，其特征在于，所述方法包括：

将待显示内容构建为左眼视图和右眼视图；将所述左眼视图和右眼视图拼接处理，得到拼接结果；

基于立体显示光学组件对所述拼接结果进行Web页面的立体显示。

9.根据权利要求8所述的方法，其特征在于，所述方法基于WebGL图形库的渲染模块执行。

10.根据权利要求8所述的方法，其特征在于，还包括：获取人眼追踪结果，

所述将待显示内容构建为左眼视图和右眼视图包括：

基于所述人眼跟踪结果，将待显示内容构建为左眼视图和右眼视图。

Images