CN109003334A - 一种基于WebGL的双目三维虚拟现实场景构建系统 - Google Patents

Abstract

本发明涉及一种基于WebGL的双目三维虚拟现实场景构建系统，该系统包括：展示模式管理器(1)：用以管理三维场景在浏览器中被展示的方式；热点对象管理器(2)：用以提供三维展品的交互功能，并且设置热点的三维坐标位置、热点尺寸、热点的旋转角度、热点的初始颜色、热点被点击后的颜色、热点的透明度以及热点所关联的信息页面信息；双目虚拟现实场景组件：分别与展示模式管理器(1)和热点对象管理器(2)交互，用以通过WebGL场景模式生成双目虚拟现实场景以及调整对象属性；辅助功能组件：与双目虚拟现实场景组件交互。与现有技术相比，本发明具有实时、高效、无需插件等优点。

Description

一种基于WebGL的双目三维虚拟现实场景构建系统

技术领域

本发明涉及构建在线双目三维虚拟现实的技术领域，尤其是涉及一种基于WebGL的双目三维虚拟现实场景构建系统。

背景技术

传统的双目三维虚拟现实场景构建方式，生成的虚拟现实场景在线预览总是需要额外的插件支持，来完整三维动画视图的渲染工作，这使得虚拟现实系统的在线展示兼容性和应用普及受到一定限制。

传统的双目三维虚拟现实场景构建过程中，总是需要通过对场景进行编辑制作后，生成导出相应文件后才能在专业硬件上的预览效果，一旦发现有地方需要修改就需要重新对模型或代码进行编辑修改，再重新生成进行预览，这样使得工作效率受到很大的负面影响。

传统的双目三维虚拟现实场景实构建需要较为专业的编制基础，对使用用户的专业要求过高，参与双目三维虚拟现实构建的人员往往是更专业于展品的布局设计，而不是专业的编程人员。因此，很难做到让专业的设计人员专心于双目三维虚拟现实的构建，还需花很多尽力去掌握一些其他编程领域的相关知识，使得团队工作效率变低。

传统的双目三维虚拟现实场景构建往往使用客户端软件进行场景构建，然后再统一发布最终的虚拟现实场景在专业硬件上进行展示。由于专业硬件价格昂贵作用局限，很大程度上限制了虚拟现实产业的发展。同时，场景无法即使更新修正、更新换代都变成掣肘行业发展的问题。

发明内容

本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种实时、高效、无需插件的基于WebGL的双目三维虚拟现实场景构建系统。

本发明的目的可以通过以下技术方案来实现：

一种基于WebGL的双目三维虚拟现实场景构建系统，用以在客户端浏览器中无插件展示虚拟现实场景，该系统包括：

展示模式管理器：用以管理三维场景在浏览器中被展示的方式；

热点对象管理器：用以提供三维展品的交互功能，并且设置热点的三维坐标位置、热点尺寸、热点的旋转角度、热点的初始颜色、热点被点击后的颜色、热点的透明度以及热点所关联的信息页面信息；

双目虚拟现实场景组件：分别与展示模式管理器和热点对象管理器交互，用以通过WebGL场景模式生成双目虚拟现实场景以及调整对象属性；

辅助功能组件：与双目虚拟现实场景组件交互。

所述的双目虚拟现实场景组件包括展品模型管理器、展示镜头管理器、光源对象管理器以及双目虚拟现实场景生成器，所述的展示镜头管理器与展示模式管理器交互。

所述的辅助功能组件包括辅助坐标定位器、场景效果实时预览器和用户管理模块。

所述的三维场景在浏览器中被展示的方式包括以展品为中心的镜头转换模式和以镜头为中心的虚拟现实展示模式。

所述的以展品为中心的镜头转换模式的设置内容包括：设置观察镜头的视角能否转动、设置能否拉伸缩放镜头来观察展品以及设置是否允许拖动三维展品。

所述的以镜头为中心的虚拟现实展示模式的设置内容包括：设置第一人称观察镜头的转动速度相对值。

所述的展品模型管理器用以将三维模型的变化、调整工作导入系统内进行管理，所述的展示镜头管理器通过调节镜头参数用以提供观看展品的视觉效果，所述的光源对象管理器用以提供光线的模拟支持。

所述的辅助坐标定位器用以对双目三维虚拟现实场景的光源对象管理，所述的场景效果实时预览器用以提供实时渲染程序并在预览窗口实时显示预览，所述的用户管理模块用以设置热点的三维坐标位置、热点尺寸、热点的旋转角度、热点的初始颜色、热点被点击后的颜色、热点的透明度以及热点所关联的信息页面信息以及实时预览。

与现有技术相比，本发明具有以下优点：

本发明使用统一服务器的网站式协作平台，客户端不保存任何有关双目三维虚拟现实场景构建所需的文件或代码，所有文件及代码全部上传至服务器中，保证了团队协同工作时的多人调用和上传、更新的同步，大大提高了团队协同工作的效率，缩短了双目三维虚拟现实场景构建的周期；

整个构建过程中，提供了实时渲染并显示预览的功能，达到了所见即所得，能随时审查双目三维虚拟现实场景展示的效果和网页渲染性能，及时把控模型精度及设计布局效果；

本系统的双目三维虚拟现实场景构建的实现技术是基于WebGL和Html5，前者提供了直接调用客户端GPU渲染三维展品的功能，后者使得客户端可以通过浏览器直接调用WebGL的API接口功能，达到了很好的兼容性，使得浏览器无需安装任何额外的插件即可直接渲染双目三维虚拟现实场景并在浏览器中展示实时效果。只需配合暴风眼睛等简单的双目分离视野产品即可呈现虚拟现实场景。

附图说明

图1为本系统的系统结构图。

其中，1、展示模式管理器，2、热点对象管理器，3、展品模型管理器，4、展示镜头管理器，5、光源对象管理器，6、双目虚拟现实场景生成器，7、辅助坐标定位器，8、场景效果实时预览器，9、用户管理模块。

具体实施方式

下面结合附图和具体实施例对本发明进行详细说明。

实施例

本发明为解决上述技术问题，提供了一种可在浏览器中免插件双目三维虚拟现实场景构建系统，可以使原本集中在3DMax和Photoshop软件中的场景构建工作，集成在统一服务器的网络环境中协同工作、保证实时预览构建效果、避免代码编程操作高效的完成双目三维虚拟现实场景的构建工作，并且使得展品可以在浏览器中无需安装额外插件的情况下，进行双目三维虚拟现实场景展示，高效利用便携式电子设备，减低技术的硬件耦合。

如图1所示，本发明提供一种可在浏览器中免插件展示双目三维虚拟现实场景构建系统：该系统包括展示模式管理器1、展示镜头管理器4、展品模型管理器3、光源对象管理器5、热点对象管理器2、辅助坐标定位器7、场景效果实时预览器8、双目虚拟现实场景生成器6以及用户管理模块9，上述模块协同工作完成双目三维虚拟现实场景构建；

首先通过展示模式管理器1设置双目三维虚拟现实场景展示模式，本系统通过Threejs封装了WebGL的展品展示模式，用户可以选择以具体展品为中心的镜头转换展示模式及以镜头为中心的全景展示模式，为实际应用提供了很大的便捷性。用户可以设置编辑展示模式的相关参数来调整展示时转向的灵活性、是否可移动展品、是否可旋转镜头来满足实际展示场景的不同需求。

展示模式管理器1是一个管理三维场景在浏览器中被展示的方式，分为以展品为中心的镜头转换模式和以镜头为中心的虚拟现实展示模式。

以展品为中心的镜头转换模式工作原理如下：

设置观察镜头的视角能否转动，默认为允许转动；若允许转动，可以调节观察镜头的转动速度的相对值；

设置能否拉伸缩放镜头来观察展品，默认为允许；若允许缩放，可以调节镜头缩放速度的相对值；

设置是否允许拖动三维展品，默认为允许；若允许拖动，可以调节拖动三维展品移动速度的相对值。

以镜头为中心的全景展示模式工作原理如下：

设置第一人称观察镜头的转动速度相对值；

设置第一人称观察镜头行走移动速度的相对值，若需要全景观看效果，可以设置该值为0。

展示镜头管理器4提供了用户观看展品的视觉效果，本系统提供了对展示镜头参数的调节功能，可以调节镜头的视角、镜头观察的初始位置、镜头观测目标的初始位置。

展示镜头管理器4是管理观察三维展品镜头属性的管理器，可以设置镜头的观察视角、镜头的三维场景渲染范围、镜头的初始位置及镜头的初始目标位置。不同的镜头观察视角会产生不同的虚拟现实视觉上的形变效果，三维虚拟现实场景渲染范围决定了镜头当前所能观看的虚拟现实场景范围，渲染范围越大带来的单位时间渲染处理开销越大，而渲染范围过小则影响虚拟现实场景中的展示效果，可以通过展示镜头管理器4来设置符合实际应用需求的展示镜头属性值。

展品模型管理器3提供了对由3DMax预先制作好的展品三维模型的导入及二次编辑功能。本系统通过对WebGL、Html5、Ajax、JQuery技术的集成，可以在网页浏览器中实时的编辑导入的三维展品模型，可以调节展品的三维位置坐标、展品旋转角度并且通过Ajax技术实时动态的在浏览器预览窗口显示场景展示效果，使整个设计过程无需设计任何代码编辑或编程操作，而且能观察到设计过程中任何细微的变化，提高了团队工作的效率与展品设计质量。

展品模型管理器3是用来管理三维展品展示场景中三维模型的管理器，传统的双目三维虚拟现实场景构建的三维模型管理总是把三维模型构建的工作全部交由独立的三维模型构建平台，如3Dmax。实现对三维模型的各种特性及展示细节进行制作编辑，然后导出三维模型在三维场景中完成构建工作，一旦对三维模型有调整的需求，则需要再次制作修改后导出三维模型，使得整个双目三维虚拟现实场景的构建工作变得繁琐且效率低。本系统的展品模型管理器3可以将三维模型的变化、调整工作直接在本系统内进行管理，无需进行多次三维模型编辑制作。在3Dmax中完成最基本的三维模型制作工作后，将三维模型文件导出。在展品模型管理器3中将相应的三维模型文件导入上传至系统服务器，再通过展品模型管理器3对三维展品模型进行调整制作。

光源对象管理器5为整个双目三维虚拟现实场景构建提供光线的模拟支持，可以选择不同类型光源来满足实际设计的需要。光源对象管理器5也提供了设计编辑过程中的实时展示效果预览功能，可以设置光源位置、光源目标位置、光源强度、光源的光色、光源的放射角度并能拖动光源在预览窗口实时观察三维展品的渲染效果。

光源对象管理器5提供了对双目三维虚拟现实场景的光源对象管理，传统的双目三维虚拟现实场景构建工作中，光源对三维展品的影响效果往往是在制作三维展品模型时一起渲染完成的，各种光源对展品模型的造成的影响效果一旦有调整需求，则需要重新编辑三维展品模型并导出新的模型文件。本系统中，光源的影响效果与三维展品模型的构建分开管理，交由光源对象管理器5单独管理，可以在双目三维虚拟现实场景中添加一个或多个基本环绕光源、平行光源、单点光源，可以调整光源的位置、目标、光强、光色、放射角度，光源对象管理器5提供了光源对象的设计辅助线，使设计者在编辑过程中能更直观的观察到光源变化对三维展品模型在场景中展示效果的影响。

热点对象管理器2是为提供三维展品更多的交互功能，可以设置热点的三维坐标位置、热点尺寸、热点的旋转角度、热点的初始颜色、热点被点击后的颜色、热点的透明度、热点所关联的信息页面信息。热点对象管理器2也提供了对热点编辑的实时预览功能，设计者可以灵活的调节热点各个参数并观察其在双目三维虚拟现实场景中的展示效果，也可在完成编辑后直接将热点转换为透明模型，使得展品模型在双目三维虚拟现实场景中获得热点交互的功能。

热点对象管理器2是一个对整个双目三维虚拟现实场景中的交互热点进行管理的管理器。为了让三维展品能具有更多的用户交互功能，本系统利用WebGL中射线与模型碰撞的判断功能，将浏览器中操作映射至三维虚拟现实场景中，设计了交互热点对象。热点对象管理器2提供了对热点的添加、编辑管理，可以为每个热点设置名称，便于团队人员协同编辑管理，可以设置热点在双目三维虚拟现实场景中三维坐标位置、设置热点的尺寸、颜色、点击后的颜色、透明度、关联信息的页面信息、展示页面尺寸、展示页面方式。若要将三维展品设置为一个交互对象，只需在该展品模型位置部署一个热点对象，将其透明度设置为0即可。

辅助坐标定位器7是为设计者在设计双目三维虚拟现实场景时定位参考功能，本系统会在双目三维虚拟现实场景中提供三维坐标及网格辅助线，设计者在设计过程中可以开启该功能，在完成设计后可以去除三维坐标及网格辅助线，生成最终三维展品场景。

辅助坐标定位器7是为了方便设计设在构建双目三维虚拟现实场景所提供的辅助工具。辅助坐标定位器7会根据镜头渲染范围的设置值来自动调整网格的部署范围，同时添加了三维坐标给场景构建过程中提供定位参考，在整个构建过程中设计者可以随时开启或关闭辅助坐标定位器7，来观察双目三维虚拟现实场景的实际构建效果。

场景效果实时预览器8为设计者在构建整个双目三维虚拟现实场景过程中提供了实时渲染程序并在预览窗口实时显示预览，达到整个设计过程中的实时预览效果，给设计者提供了很大的便捷。

场景效果实时预览器8是提供了在整个双目三维虚拟现实场景构建过程中的效果预览功能，场景效果实时预览器8对设计者在操作展示模式管理器1、展示镜头管理器4、展品模型管理器3、光源对象管理器5、热点对象管理器2、辅助坐标定位器7时所产生的参数变化，都会做出实时渲染并将三维展品场景的效果实时的显示在场景效果实时预览器8中，让设计者实时看到双目三维虚拟现实场景构建的效果，达到了所见即所，方便快速的构建出符合实际应用需求的三维展品场景。

整个场景构建过程中，都是用普通WebGL场景模式，即单画面场景。在场景构建完成后，通过导出模块导出成双目虚拟现实模式，提供给用户浏览。场景构建人员无需考虑双目的立体视觉效果，构建平台会根据场景自动处理生成。

双目虚拟现实场景生成器6用来完成一般三维场景导出成双目虚拟场景的工作。导出场景会自动适应用户屏幕尺寸、浏览器内核，正常情况下无需构建人员设置。但为适应特殊的构建要求，在导出模块中也配备有尺寸配置、浏览器内核选择、瞳距等配置以及场景渲染速率等，通过配置可以当初满足不同要求的双目虚拟现实场景。场景直接保存在服务器端，用户使用任意设备浏览器通过制定连接即可完成虚拟现实场景的浏览。

用户管理模块9是为了在双目三维虚拟现实场景构建过程中使各设计者用户可以协同工作，提高工作效率，使得设计者之间可以有明确的分工安排。

用户管理模块9提供了多个成员协同构建双目三维虚拟现实场景的功能，本系统可以添加多个系统成员，所有的双目三维虚拟现实场景构建过程中的文件、相关代码都上传至统一的应用服务器中，通过网页平台可以随时操作编辑构建双目三维虚拟现实场景，方便多个成员同时协同工作，提高了整个双目三维虚拟现实场景构建的工作效率与质量。

集成上述所有模块可以实现双目三维虚拟现实场景的基本构建功能，为了使本系统有更强的兼容性、三维场景渲染具有更高的效率，本系统集成了Html5和WebGL技术来解决兼容性和高效性两个问题，同时为了提高开发效率及系统可维护性和稳健性，本系统使用了Three.js框架来具体实现WebGL的功能接口；整个系统使用Visual Studio平台开发，开发语言使用C#语言，数据库使用SQL Server。

Claims (8)

1.一种基于WebGL的双目三维虚拟现实场景构建系统，用以在客户端浏览器中无插件展示虚拟现实场景，其特征在于，该系统包括：

展示模式管理器(1)：用以管理三维场景在浏览器中被展示的方式；

热点对象管理器(2)：用以提供三维展品的交互功能，并且设置热点的三维坐标位置、热点尺寸、热点的旋转角度、热点的初始颜色、热点被点击后的颜色、热点的透明度以及热点所关联的信息页面信息；

双目虚拟现实场景组件：分别与展示模式管理器(1)和热点对象管理器(2)交互，用以通过WebGL场景模式生成双目虚拟现实场景以及调整对象属性；

辅助功能组件：与双目虚拟现实场景组件交互。

2.根据权利要求1所述的一种基于WebGL的双目三维虚拟现实场景构建系统，其特征在于，所述的双目虚拟现实场景组件包括展品模型管理器(3)、展示镜头管理器(4)、光源对象管理器(5)以及双目虚拟现实场景生成器(6)，所述的展示镜头管理器(4)与展示模式管理器(1)交互。

3.根据权利要求1所述的一种基于WebGL的双目三维虚拟现实场景构建系统，其特征在于，所述的辅助功能组件包括辅助坐标定位器(7)、场景效果实时预览器(8)和用户管理模块(9)。

4.根据权利要求1所述的一种基于WebGL的双目三维虚拟现实场景构建系统，其特征在于，所述的三维场景在浏览器中被展示的方式包括以展品为中心的镜头转换模式和以镜头为中心的虚拟现实展示模式。

5.根据权利要求4所述的一种基于WebGL的双目三维虚拟现实场景构建系统，其特征在于，所述的以展品为中心的镜头转换模式的设置内容包括：设置观察镜头的视角能否转动、设置能否拉伸缩放镜头来观察展品以及设置是否允许拖动三维展品。

6.根据权利要求4所述的一种基于WebGL的双目三维虚拟现实场景构建系统，其特征在于，所述的以镜头为中心的虚拟现实展示模式的设置内容包括：设置第一人称观察镜头的转动速度相对值。

7.根据权利要求2所述的一种基于WebGL的双目三维虚拟现实场景构建系统，其特征在于，所述的展品模型管理器(3)用以将三维模型的变化、调整工作导入系统内进行管理，所述的展示镜头管理器(4)通过调节镜头参数用以提供观看展品的视觉效果，所述的光源对象管理器(5)用以提供光线的模拟支持。

8.根据权利要求3所述的一种基于WebGL的双目三维虚拟现实场景构建系统，其特征在于，所述的辅助坐标定位器(7)用以对双目三维虚拟现实场景的光源对象管理，所述的场景效果实时预览器(8)用以提供实时渲染程序并在预览窗口实时显示预览，所述的用户管理模块(9)用以设置热点的三维坐标位置、热点尺寸、热点的旋转角度、热点的初始颜色、热点被点击后的颜色、热点的透明度以及热点所关联的信息页面信息以及实时预览。