CN116243831A - 一种虚拟云展厅交互方法及系统 - Google Patents

一种虚拟云展厅交互方法及系统 Download PDF

Info

Publication number
CN116243831A
CN116243831A CN202310530437.5A CN202310530437A CN116243831A CN 116243831 A CN116243831 A CN 116243831A CN 202310530437 A CN202310530437 A CN 202310530437A CN 116243831 A CN116243831 A CN 116243831A
Authority
CN
China
Prior art keywords
virtual
scene
camera
engine
rendering
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202310530437.5A
Other languages
English (en)
Other versions
CN116243831B (zh
Inventor
丁兆龙
孙即林
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Qingdao Daoke Cloud Network Technology Co ltd
Original Assignee
Qingdao Daoke Cloud Network Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Qingdao Daoke Cloud Network Technology Co ltd filed Critical Qingdao Daoke Cloud Network Technology Co ltd
Priority to CN202310530437.5A priority Critical patent/CN116243831B/zh
Publication of CN116243831A publication Critical patent/CN116243831A/zh
Application granted granted Critical
Publication of CN116243831B publication Critical patent/CN116243831B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04815—Interaction with a metaphor-based environment or interaction object displayed as three-dimensional, e.g. changing the user viewpoint with respect to the environment or object
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T19/00—Manipulating 3D models or images for computer graphics
    • G06T19/006—Mixed reality
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T19/00—Manipulating 3D models or images for computer graphics
    • G06T19/20—Editing of 3D images, e.g. changing shapes or colours, aligning objects or positioning parts
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Computer Graphics (AREA)
  • Software Systems (AREA)
  • Computer Hardware Design (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Geometry (AREA)
  • Architecture (AREA)
  • Data Mining & Analysis (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明属于虚拟现实技术领域，公开了一种虚拟云展厅交互方法及系统。通过krpano引擎构建VR虚拟空间；利用步进式漫游方法，再构建得VR虚拟空间中进行移步换景，并进行VR虚拟空间渲染；利用BabylonJS 3D引擎，构建虚拟3D组件并嵌入到经渲染的VR虚拟空间中进行融合，将该虚拟3D组件以悬浮方式显示在web端页面。本发明利用VR、3D技术，使展示体验更具有沉浸感、互动性。通过本发明方便地观赏喜欢的展品，并可以查看更多关于这些展品的信息和资料。

Description

一种虚拟云展厅交互方法及系统
技术领域
本发明属于虚拟现实技术领域，尤其涉及一种虚拟云展厅交互方法及系统。
背景技术
虚拟现实技术在近年来非常流行，为人们打开了新3D世界的大门，从平面3D显示延伸到带有更多位置和姿态交互信息的虚拟3D世界。虚拟展厅能够身临其境般的直观感受全方位各种真实或虚拟的场景，如同在逛实体展厅一样，用户可以选择观赏位置，但是现有的虚拟展示交互体验差，视角切换不流畅，具体表现为现有的虚拟展厅全景漫游为场景全景图的跳转关系，属于二维图片的跳转，所产生的3D效果，仅是基于人眼生活习惯所得的图像；根本问题在于二维画面之间从生成上无三维空间之间的关联性，仅是二维图像之间的切换；二维画面跳转之后由于角度的不同，极易使得浏览者产生视觉混乱。
通过上述分析，现有技术存在的问题及缺陷为：现有技术不能有效搭建基于互联网的三维虚拟展厅，不能更好通过网页浏览展厅中更多展品的信息和资料。
发明内容
为克服相关技术中存在的问题，本发明公开实施例提供了一种虚拟云展厅交互方法及系统。
所述技术方案如下：虚拟云展厅交互方法，应用于web端，该方法包括以下步骤：
S1，通过krpano引擎构建VR虚拟空间；
S2，利用步进式漫游方法在构建的VR虚拟空间中进行移步换景，并进行VR虚拟空间渲染；
S3，利用BabylonJS 3D引擎构建虚拟3D组件并嵌入到经渲染的VR虚拟空间中进行融合，将该虚拟3D组件以悬浮方式显示在web端页面。
在步骤S1中，krpano引擎构建VR虚拟空间包括以下步骤：
（1）构建虚拟场景：利用3D建模软件构建虚拟场景，包括建筑、景观、道路；
（2）导入场景：将构建好的虚拟场景导入到krpano引擎中；
（3）构建全景图：使用全景相机进行虚拟场景拍摄，获取全景图，将全景图转化为html5格式；
（4）添加交互元素：在krpano引擎中添加交互元素；
（5）调整观察视角：在krpano引擎中调整观察视角。
在一个实施例中， krpano引擎通过留置的API接口与虚拟现实设备通信，所述虚拟现实设备包括VR眼镜和移动端。
在步骤S2中，步进式漫游方法包括以下步骤：
（Ⅰ）空间位置表示：在虚拟场景中，每个物体和场景结构采用三维坐标系x、y、z表示，其中x、y、z分别代表物体在三个方向上的位置坐标，利用三维坐标系对虚拟场景的任意位置进行定位和移动描述；
（Ⅱ）相机模型：通过控制相机位置和方向，生成虚拟场景中的图像；
（Ⅲ）渲染引擎：利用计算机图形学，将虚拟场景中的几何结构和纹理映射到屏幕上的像素点，生成真实图像；
（Ⅳ）运动控制算法：利用贝塞尔曲线，通过对虚拟相机的路径进行插值处理，生成平滑连续的运动路径。
在步骤（Ⅰ）中，利用三维坐标系对虚拟场景的任意位置进行定位和移动包括：
视图变换：将虚拟世界中以（x,y,z)为坐标的物体变换到以多个像素位置 (x,y)表示的屏幕坐标系之中；
模型变换：将虚拟世界中或者更具体点，场景中的物体调整至应该在的位置；
摄像机变换：在虚拟空间中将摄像机变换到物体与摄像机的相对位置；
投影变换：在摄像机变换后，得到所有可视范围内的物体相对于摄像机的相对位置坐标(x,y,z)，之后根据具体情况选择平行投影或是透视投影，将三维空间投影至标准二维平面( [-1,1]^2)之上；
视口变换：将处于标准平面映射到屏幕分辨率范围内，表达式为： [-1,1]^2\rightarrow[0,width]* [0,height]，其中width和height指屏幕分辨率大小；
在步骤（Ⅲ）中，将虚拟场景中的几何结构和纹理映射到屏幕上的像素点，生成真实图像包括：
（Ⅲ-1）获取WebGLAPI的JavaScript绑定库，将WebGLAPI与JavaScript绑定；
（Ⅲ-2）创建Canvas元素，添加WebGL上下文；
（Ⅲ-3）通过编写的JavaScript代码，使用WebGLAPI进行 3D图形渲染；先编写顶点着色器和片元着色器，然后通过JavaScript传递给WebGL上下文，最后在Canvas上获取3D图形；
（Ⅲ-4）使用JavaScript和WebGLAPI生成各种3D游戏和动画。
在步骤（Ⅲ-4）使用JavaScript和WebGLAPI生成各种3D动画包括：
通过HTML脚本本身实现web交互式三维动画的构建，创建Web交互式三维动画；或，通过openGL接口利用底层的图形硬件加速功能进行图形渲染，将渲染结果显示在屏幕上，生成各种3D动画。
所述创建Web交互式三维动画具体步骤如下：
步骤1，安装并引入BabylonJS库；
步骤2，创建HTML文件，并在文件头中引入BabylonJS库和JavaScript代码；
步骤3，在HTML文件中创建Canvas元素渲染BabylonJS场景；
步骤4，使用JavaScript编写代码创建BabylonJS场景、相机和物体；
步骤5，使用WebGL渲染器将BabylonJS场景渲染到Canvas元素上；
步骤6，编写JavaScript代码实现交互式功能；
步骤7，最后，将这些代码打包在一起，发布到Web服务器上以供访问。
步骤（Ⅳ）中，通过对虚拟相机的路径进行插值处理，生成平滑连续的运动路径包括：
（Ⅳ-1）确定相机要移动的路径点，包括起点、终点、中间点；
（Ⅳ-2）根据路径点选择贝塞尔曲线阶数，包括二阶、三阶、高阶；
（Ⅳ-3）根据贝塞尔曲线公式计算每个路径点对应的控制点，以及每个控制点之间的参数t；参数t为曲线上的位置比例，t从0到1；
（Ⅳ-4）根据参数t和控制点计算相机在曲线上的位置和方向，作为相机的运动状态；
（Ⅳ-5）根据需要调整参数t的变化速率，实现相机的平滑移动和缓慢停顿。
在步骤S3中，利用BabylonJS 3D引擎构建虚拟3D组件包括以下步骤：
（a）通过npm或直接下载源码安装BabylonJS 3D引擎；
（b）通过BabylonJS提供的Scene对象创建3D场景，3D场景包括背景颜色、环境光、相机；
（c）通过BabylonJS提供的Mesh对象创建3D模型，并添加到3D场景中；
（d）在场景中添加光源以及光源属性；
（e）对创建的3D模型赋予不同的材质；
（f）对创建的3D模型赋予交互事件。
在步骤（a）中，安装BabylonJS 3D引擎是通过留置的API接口、工具和内置算法与虚拟现实设备通信；
在步骤（d）中，光源包括点光源、聚光灯、方向光；光源属性包括颜色、强度、位置；
在步骤（e）中，不同的材质包括纹理、颜色、光泽度；
在步骤（f）中，交互事件包括点击、鼠标滚轮、触摸。
本发明的另一目的在于提供一种虚拟云展厅交互系统，实施所述的虚拟云展厅交互方法，该系统包括：
krpano引擎，用于构建VR虚拟空间；
步进式漫游模块，利用步进式漫游方法，再构建得VR虚拟空间中进行移步换景，并进行VR虚拟空间渲染；
BabylonJS 3D引擎，构建虚拟3D组件并嵌入到经渲染的VR虚拟空间中进行融合，将该虚拟3D组件以悬浮方式显示在web端页面。
结合上述的所有技术方案，本发明所具备的优点及积极效果为：本发明利用常规网页技术、VR（虚拟现实）技术、3D技术，搭建基于互联网的三维虚拟展厅。在实际展厅空间内，不同的展品用多种形式呈现，用户在沉浸于3D虚拟空间的体验中，方便地观赏他们喜欢的展品，并可以查看更多关于这些展品的信息和资料。
本发明使用了一种特殊的虚拟场景技术，将用户视角进行内容场景整合，使用者可以在不同种类的虚拟展厅中选择性进行浏览，也可以点击展品跳转到相关网页进行详细查看，大大提高了用户观看展览的体验度。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理；
图1是本发明实施例提供的虚拟云展厅交互方法流程图；
图2是本发明实施例提供的虚拟云展厅交互系统示意图；
图中：1、krpano引擎；2、步进式漫游模块；3、BabylonJS 3D引擎。
具体实施方式
为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图对本发明的具体实施方式做详细的说明。在下面的描述中阐述了很多具体细节以便于充分理解本发明。但是本发明能够以很多不同于在此描述的其他方式来实施，本领域技术人员可以在不违背本发明内涵的情况下做类似改进，因此本发明不受下面公开的具体实施的限制。
如图1所示，本发明实施例提供一种虚拟云展厅交互方法，应用于web端，该方法包括以下步骤：
S1，通过krpano引擎构建VR虚拟空间；
S2，利用步进式漫游方法，再构建得VR虚拟空间中进行移步换景，并进行VR虚拟空间渲染；
S3，利用BabylonJS 3D引擎，构建虚拟3D组件并嵌入到经渲染的VR虚拟空间中进行融合，将该虚拟3D组件以悬浮方式显示在web端页面。
实施例1，如图1所示，本发明实施例提供的虚拟云展厅交互方法包括：
使用krpano引擎构建VR虚拟空间展示，使用BabylonJS 3D引擎构建3D组件，创新性地使用步进式漫游方法，实现移步换景式的空间浏览。
所述使用krpano引擎构建VR虚拟空间包括3D建模软件、全景相机、html5等技术。引擎本身也提供了各种工具和API接口，方便开发者进行开发和调试。同时，krpano还支持多种虚拟现实设备，如VR眼镜、移动端观看等，让用户能够更加方便地获得极致的虚拟现实体验。
具体的，使用krpano引擎构建VR虚拟空间具体包括以下步骤：
（1）构建虚拟场景：首先需要利用3D建模软件构建虚拟场景，包括建筑、景观、道路等。
（2）导入场景：将构建好的虚拟场景导入到krpano引擎中。
（3）构建全景图：为了实现虚拟现实场景的全景视角，需要将场景拍摄成全景图。使用全景相机进行拍摄，然后将全景图转化为html5格式，以便在VR环境中显示。
（4）添加交互元素：在krpano中添加交互元素，如hotspot等，让用户能够在VR环境中进行交互。
（5）调整观察视角：在krpano中调整观察视角，以便用户能够获得最佳的观察体验。
在本发明实施例中，使用BabylonJS 3D引擎构建3D组件的具体过程如下：
（a）安装BabylonJS 3D引擎。可以通过npm安装，也可以直接下载源码并引入到项目中。
（b）创建场景。通过BabylonJS提供的Scene对象创建一个3D场景，可以设置场景的背景颜色、环境光、相机等等。
（c）添加3D模型。可以通过BabylonJS提供的Mesh对象创建3D模型，并添加到场景中。可以使用现成的模型，也可以自己创建模型。
可以理解，现成的模型是指已经建好的模型或者demo模型，自己创建是指可以利用BabylonJS平台来生成一个新的模型。
（d）设置光照。可以在场景中添加各种光源，如点光源、聚光灯、方向光等。并可以设置光源的颜色、强度、位置等属性。
（e）添加材质。可以给模型设置不同的材质，如纹理、颜色、光泽度等。
（f）添加交互。可以给模型添加交互事件，如点击、鼠标滚轮、触摸等等。
可以理解，通过以上步骤，就可以使用BabylonJS 3D引擎构建3D组件。其实现过程主要是通过3D图形学及WebGL技术来实现的。BabylonJS 3D引擎提供了一系列的API接口、工具和内置算法，使得用户可以更加便捷地构建3D组件。
在本发明实施例中，步进式漫游方法是一种基于虚拟现实技术的交互式场景浏览方式，通过移动设备（如智能手机、平板电脑、VR眼镜等）控制用户在虚拟场景中的视角位置和方向，从而实现对场景的全方位观察和探索。在步进式漫游过程中，移步换景是非常重要的一部分，它能够增强用户的沉浸感和探究欲望，使虚拟场景呈现出更加自然和流畅的体验。
具体的，步进式漫游方法包括：
（Ⅰ）空间位置表示：在虚拟场景中，每个物体和场景结构都可以用三维坐标系表示，其中x、y、z分别代表物体在三个方向上的位置坐标。利用空间位置表示，可以实现对虚拟场景的任意位置进行定位和移动。
可以理解，利用三维坐标系对虚拟场景的任意位置进行定位和移动，是计算机图形学中的一个重要技术。需要用到以下几个概念和步骤：
视图变换（Viewing Transformation）：将虚拟世界中以（x,y,z)为坐标的物体变换到以一个个像素位置 (x,y) 来表示的屏幕坐标系之中。
模型变换 (modeling tranformation)：将虚拟世界中或者更具体点，场景中的物体调整至应该在的位置。
摄像机变换 (camera tranformation)：在虚拟空间中真正在乎的是摄像机 (或者说眼睛)所看到的东西，也就是需要得到物体与摄像机的相对位置。
投影变换 (projection tranformation)：在摄像机变换之后，得到了所有可视范围内的物体相对于摄像机的相对位置坐标(x,y,z)，之后根据具体情况选择平行投影或是透视投影，将三维空间投影至标准二维平面( [-1,1]^2)之上。
视口变换 (viewport transformation)：将处于标准平面映射到屏幕分辨率范围之内，即 [-1,1]^2\rightarrow[0,width]* [0,height], 其中width和height指屏幕分辨率大小。
（Ⅱ）相机模型：相机模型可以模拟真实相机的光学特性，通过控制相机位置和方向，生成虚拟场景中的图像。在步进式漫游中，相机模型可以实时调整，以保证用户的视角能够随意切换。
可以理解，通过调节虚拟相机的参数、位置以及姿态，以及调节立方体的尺寸位置，最后渲染出虚拟相机所拍摄的三维场景图片。
（Ⅲ）渲染引擎：渲染引擎利用计算机图形学技术，将虚拟场景中的几何结构和纹理映射到屏幕上的像素点，生成真实感极强的图像。
（Ⅳ）运动控制算法：在步进式漫游中，需要实现相机的平滑移动和缓慢停顿，这就需要基于数学模型的运动控制算法来实现。最常用的算法是贝塞尔曲线，通过对虚拟相机的路径进行插值处理，生成平滑连续的运动路径。
示例性的，基于数学模型的运动控制算法包括基于塞尔曲线算法控制相机的平滑移动和缓慢停顿的处理过程，具体包括：
（Ⅳ-1）确定相机要移动的路径点，例如起点、终点、中间点等。
（Ⅳ-2）根据路径点选择合适的贝塞尔曲线阶数，例如二阶、三阶或更高阶。一般来说，阶数越高，曲线越平滑，但也越复杂。
（Ⅳ-3）根据贝塞尔曲线公式计算每个路径点对应的控制点，以及每个控制点之间的参数t。参数t可以理解为曲线上的位置比例，t从0到1变化。
（Ⅳ-4）根据参数t和控制点计算相机在曲线上的位置和方向，并将其作为相机的运动状态。
（Ⅳ-5）根据需要调整参数t的变化速率，以实现相机的平滑移动和缓慢停顿。例如，可以让t在起点和终点附近变化较慢，在中间部分变化较快。
可以理解，步进式漫游方法需要利用各种数学模型来实现移步换景的空间浏览过程，包括空间位置表示、相机模型、渲染引擎和运动控制算法等。这些数学模型可以实现高精度、高效率的虚拟场景浏览，为用户带来超越现实的观感体验。
实施例2，作为本发明的一种实施方式，在步骤（iii）渲染引擎中，将JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，可以为HTML5Canvas提供硬件3D加速渲染。
在增加OpenGLES2.0的JavaScript绑定种可以按照以下步骤操作：
（Ⅲ-1）下载和安装WebGLAPI的JavaScript绑定库。WebGLAPI是基于OpenGLES2.0标准的3D图形渲染API，通过此库可以将WebGLAPI与JavaScript绑定起来。
（Ⅲ-2）创建Canvas元素，添加WebGL上下文。
（Ⅲ-3）写JavaScript代码，使用WebGLAPI实现3D图形渲染功能。在进行3D图形渲染时，需要先编写顶点着色器和片元着色器，然后通过JavaScript将其传递给WebGL上下文，最后在Canvas上绘制出3D图形。
（Ⅲ-4）可以使用JavaScript和WebGLAPI实现各种3D游戏和动画效果。
在本发明实施例种，通过结合JavaScript和OpenGLES2.0，可以为HTML5Canvas提供硬件3D加速渲染的优势。由于WebGLAPI是基于OpenGLES2.0标准的，所以可以将JavaScript和OpenGLES2.0联系起来，实现硬件加速的3D渲染效果。这样可以大大提高网页的性能和用户体验。同时，由于JavaScript和WebGLAPI都是标准化的技术，所以可以跨平台运行，并且兼容各种浏览器和设备。
通过上述方案，Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。同时免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。本发明解决了现有的web端交互式三维动画的两大问题，这对于从事3D工作的人群具有实用价值。
示例性的，解决现有的web端交互式三维动画的一问题的过程包括：
通过HTML脚本本身实现web交互式三维动画的构建，创建Web交互式三维动画，具体步骤如下：
步骤1，首先，需要安装并引入BabylonJS库。
步骤2，创建一个HTML文件，并在文件头中引入BabylonJS库和JavaScript代码。
步骤3，在HTML文件中创建一个Canvas元素来渲染BabylonJS场景。
步骤4，使用JavaScript编写代码来创建BabylonJS场景、相机和物体。
步骤5，使用WebGL渲染器将BabylonJS场景渲染到Canvas元素上。
步骤6，编写JavaScript代码来实现交互式功能，例如响应用户鼠标移动事件、键盘事件等。
步骤7，最后，将这些代码打包在一起，发布到Web服务器上以供访问。在整个构建过程中，是不需要下载任何插件的，相当便捷。
示例性的，解决现有的web端交互式三维动画的另一种问题的过程包括：利用底层的图形硬件加速功能进行的图像渲染，通过统一的、标准的、跨平台的openGL接口实现的。
OpenGL接口可以利用底层的图形硬件加速功能进行图形渲染，具体过程如下：
步骤一，创建OpenGL上下文：在应用程序启动时，需要创建一个OpenGL上下文，它是与系统的图形硬件交互的接口。使用相关API调用来创建OpenGL上下文，这些API通常由操作系统提供。
步骤二，创建渲染对象：使用OpenGLAPI创建图形渲染对象，例如顶点缓冲区、着色器程序、纹理等。
步骤三，设置渲染状态：一些OpenGLAPI调用可用于设置渲染状态，如深度测试、剪切测试、颜色混合等。这些状态通常是直接设置在图形硬件上的。
步骤四，让OpenGL执行渲染：最终，OpenGL使用GPU执行渲染操作。GPU通常能够并行处理大量的图形数据，这使得OpenGL可以高效地渲染复杂的场景。
步骤五，显示到屏幕：最后，渲染结果显示在屏幕上。
实施例3，如图2所示，本发明实施例提供一种虚拟云展厅交互系统，包括：
krpano引擎1，用于构建VR虚拟空间；
步进式漫游模块2，利用步进式漫游方法，再构建得VR虚拟空间中进行移步换景，并进行VR虚拟空间渲染；
BabylonJS 3D引擎3，构建虚拟3D组件并嵌入到经渲染的VR虚拟空间中进行融合，将该虚拟3D组件以悬浮方式显示在web端页面
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。
上述装置/单元之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程。
基于上述本发明实施例记载的技术方案，进一步的可提出以下应用例。
根据本申请的实施例，本发明还提供了一种计算机设备，该计算机设备包括：至少一个处理器、存储器以及存储在所述存储器中并可在所述至少一个处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述任意各个方法实施例中的步骤。
本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时可实现上述各个方法实施例中的步骤。
本发明实施例还提供了一种信息数据处理终端，所述信息数据处理终端用于实现于电子装置上执行时，提供用户输入接口以实施如上述各方法实施例中的步骤，所述信息数据处理终端不限于手机、电脑、交换机。
本发明实施例还提供了一种服务器，所述服务器用于实现于电子装置上执行时，提供用户输入接口以实施如上述各方法实施例中的步骤。
本发明实施例还提供了一种计算机程序产品，当计算机程序产品在电子设备上运行时，使得电子设备执行时可实现上述各个方法实施例中的步骤。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质至少可以包括：能够将计算机程序代码携带到拍照装置/终端设备的任何实体或装置、记录介质、计算机存储器、只读存储器（Read-OnlyMemory，ROM）、随机存取存储器（RandomAccessMemory，RAM）、电载波信号、电信信号以及软件分发介质。例如U盘、移动硬盘、磁碟或者光盘等。
以上所述，仅为本发明较优的具体的实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，都应涵盖在本发明的保护范围之内。

Claims (10)

1.一种虚拟云展厅交互方法，其特征在于，应用于web端，该方法包括以下步骤：
S1，通过krpano引擎构建VR虚拟空间；
S2，利用步进式漫游方法在构建的VR虚拟空间中进行移步换景，并进行VR虚拟空间渲染；
S3，利用BabylonJS 3D引擎构建虚拟3D组件并嵌入到经渲染的VR虚拟空间中进行融合，将该虚拟3D组件以悬浮方式显示在web端页面。
2.根据权利要求1所述的虚拟云展厅交互方法，其特征在于，在步骤S1中，krpano引擎构建VR虚拟空间包括以下步骤：
（1）构建虚拟场景：利用3D建模软件构建虚拟场景，包括建筑、景观、道路；
（2）导入场景：将构建好的虚拟场景导入到krpano引擎中；
（3）构建全景图：使用全景相机进行虚拟场景拍摄，获取全景图，将全景图转化为html5格式；
（4）添加交互元素：在krpano引擎中添加交互元素；
（5）调整观察视角：在krpano引擎中调整观察视角。
3.根据权利要求2所述的虚拟云展厅交互方法，其特征在于， krpano引擎通过留置的API接口与虚拟现实设备通信，所述虚拟现实设备包括VR眼镜和移动端。
4.根据权利要求1所述的虚拟云展厅交互方法，其特征在于，在步骤S2中，步进式漫游方法包括以下步骤：
（Ⅰ）空间位置表示：在虚拟场景中，每个物体和场景结构采用三维坐标系x、y、z表示，其中x、y、z分别代表物体在三个方向上的位置坐标，利用三维坐标系对虚拟场景的任意位置进行定位和移动描述；
（Ⅱ）相机模型：通过控制相机位置和方向，生成虚拟场景中的图像；
（Ⅲ）渲染引擎：利用计算机图形学，将虚拟场景中的几何结构和纹理映射到屏幕上的像素点，生成真实图像；
（Ⅳ）运动控制算法：利用贝塞尔曲线，通过对虚拟相机的路径进行插值处理，生成平滑连续的运动路径。
5.根据权利要求4所述的虚拟云展厅交互方法，其特征在于，在步骤（Ⅰ）中，利用三维坐标系对虚拟场景的任意位置进行定位和移动包括：
视图变换：将虚拟世界中以（x,y,z)为坐标的物体变换到以多个像素位置 (x,y) 表示的屏幕坐标系之中；
模型变换：将虚拟世界中或者更具体点，场景中的物体调整至应该在的位置；
摄像机变换：在虚拟空间中将摄像机变换到物体与摄像机的相对位置；
投影变换：在摄像机变换后，得到所有可视范围内的物体相对于摄像机的相对位置坐标(x,y,z)，之后根据具体情况选择平行投影或是透视投影，将三维空间投影至标准二维平面( [-1,1]^2)之上；
视口变换：将处于标准平面映射到屏幕分辨率范围内，表达式为： [-1,1]^2\rightarrow[0,width]* [0,height]，其中width和height指屏幕分辨率大小；
在步骤（Ⅲ）中，将虚拟场景中的几何结构和纹理映射到屏幕上的像素点，生成真实图像包括：
（Ⅲ-1）获取WebGLAPI的JavaScript绑定库，将WebGLAPI与JavaScript绑定；
（Ⅲ-2）创建Canvas元素，添加WebGL上下文；
（Ⅲ-3）通过编写的JavaScript代码，使用WebGLAPI进行 3D图形渲染；先编写顶点着色器和片元着色器，然后通过JavaScript传递给WebGL上下文，最后在Canvas上获取3D图形；
（Ⅲ-4）使用JavaScript和WebGLAPI生成各种3D游戏和动画。
6.根据权利要求5所述的虚拟云展厅交互方法，其特征在于，在步骤（Ⅲ-4）使用JavaScript和WebGLAPI生成各种3D动画包括：
通过HTML脚本本身实现web交互式三维动画的构建，创建Web交互式三维动画；或，通过openGL接口利用底层的图形硬件加速功能进行图形渲染，将渲染结果显示在屏幕上，生成各种3D动画；
所述创建Web交互式三维动画具体步骤如下：
步骤1，安装并引入BabylonJS库；
步骤2，创建HTML文件，并在文件头中引入BabylonJS库和JavaScript代码；
步骤3，在HTML文件中创建Canvas元素渲染BabylonJS场景；
步骤4，使用JavaScript编写代码创建BabylonJS场景、相机和物体；
步骤5，使用WebGL渲染器将BabylonJS场景渲染到Canvas元素上；
步骤6，编写JavaScript代码实现交互式功能；
步骤7，最后，将这些代码打包在一起，发布到Web服务器上以供访问。
7.根据权利要求4所述的虚拟云展厅交互方法，其特征在于，步骤（Ⅳ）中，通过对虚拟相机的路径进行插值处理，生成平滑连续的运动路径包括：
（Ⅳ-1）确定相机要移动的路径点，包括起点、终点、中间点；
（Ⅳ-2）根据路径点选择贝塞尔曲线阶数，包括二阶、三阶、高阶；
（Ⅳ-3）根据贝塞尔曲线公式计算每个路径点对应的控制点，以及每个控制点之间的参数t；参数t为曲线上的位置比例，t从0到1；
（Ⅳ-4）根据参数t和控制点计算相机在曲线上的位置和方向，作为相机的运动状态；
（Ⅳ-5）根据需要调整参数t的变化速率，实现相机的平滑移动和缓慢停顿。
8.根据权利要求1所述的虚拟云展厅交互方法，其特征在于，在步骤S3中，利用BabylonJS 3D引擎构建虚拟3D组件包括以下步骤：
（a）通过npm或直接下载源码安装BabylonJS 3D引擎；
（b）通过BabylonJS提供的Scene对象创建3D场景，3D场景包括背景颜色、环境光、相机；
（c）通过BabylonJS提供的Mesh对象创建3D模型，并添加到3D场景中；
（d）在场景中添加光源以及光源属性；
（e）对创建的3D模型赋予不同的材质；
（f）对创建的3D模型赋予交互事件。
9.根据权利要求8所述的虚拟云展厅交互方法，其特征在于，在步骤（a）中，安装BabylonJS 3D引擎是通过留置的API接口、工具和内置算法与虚拟现实设备通信；
在步骤（d）中，光源包括点光源、聚光灯、方向光；光源属性包括颜色、强度、位置；
在步骤（e）中，不同的材质包括纹理、颜色、光泽度；
在步骤（f）中，交互事件包括点击、鼠标滚轮、触摸。
10.一种虚拟云展厅交互系统，其特征在于，实施权利要求1-9任意一项所述的虚拟云展厅交互方法，该系统包括：
krpano引擎（1），用于构建VR虚拟空间；
步进式漫游模块（2），利用步进式漫游方法，再构建得VR虚拟空间中进行移步换景，并进行VR虚拟空间渲染；
BabylonJS 3D引擎（3），构建虚拟3D组件并嵌入到经渲染的VR虚拟空间中进行融合，将该虚拟3D组件以悬浮方式显示在web端页面。
CN202310530437.5A 2023-05-12 2023-05-12 一种虚拟云展厅交互方法及系统 Active CN116243831B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310530437.5A CN116243831B (zh) 2023-05-12 2023-05-12 一种虚拟云展厅交互方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310530437.5A CN116243831B (zh) 2023-05-12 2023-05-12 一种虚拟云展厅交互方法及系统

Publications (2)

Publication Number Publication Date
CN116243831A true CN116243831A (zh) 2023-06-09
CN116243831B CN116243831B (zh) 2023-08-08

Family

ID=86635294

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310530437.5A Active CN116243831B (zh) 2023-05-12 2023-05-12 一种虚拟云展厅交互方法及系统

Country Status (1)

Country Link
CN (1) CN116243831B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117596349A (zh) * 2023-11-06 2024-02-23 中影电影数字制作基地有限公司 基于虚拟引擎进行空间虚拟拍摄的方法及系统

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20200264695A1 (en) * 2017-09-29 2020-08-20 Eyexpo Technology Corp. A cloud-based system and method for creating a virtual tour
CN112132961A (zh) * 2020-09-28 2020-12-25 建信金融科技有限责任公司 基于全景图模板的数字虚拟展厅生成方法及系统
CN112933606A (zh) * 2021-03-16 2021-06-11 天津亚克互动科技有限公司 游戏场景转换方法及装置、存储介质、计算机设备
US20210390760A1 (en) * 2020-06-15 2021-12-16 Nvidia Corporation Ray tracing hardware acceleration for supporting motion blur and moving/deforming geometry
CN114237436A (zh) * 2021-12-22 2022-03-25 杭州群核信息技术有限公司 相机路径绘制方法和基于相机路径绘制的渲染交互系统
CN115222927A (zh) * 2022-07-25 2022-10-21 上海炯眼网络科技有限公司 一种步进式虚拟漫游场景构建方法
CN115398894A (zh) * 2020-02-14 2022-11-25 奇跃公司 用于虚拟和增强现实显示系统的虚拟对象运动速度曲线

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20200264695A1 (en) * 2017-09-29 2020-08-20 Eyexpo Technology Corp. A cloud-based system and method for creating a virtual tour
CN115398894A (zh) * 2020-02-14 2022-11-25 奇跃公司 用于虚拟和增强现实显示系统的虚拟对象运动速度曲线
US20210390760A1 (en) * 2020-06-15 2021-12-16 Nvidia Corporation Ray tracing hardware acceleration for supporting motion blur and moving/deforming geometry
CN112132961A (zh) * 2020-09-28 2020-12-25 建信金融科技有限责任公司 基于全景图模板的数字虚拟展厅生成方法及系统
CN112933606A (zh) * 2021-03-16 2021-06-11 天津亚克互动科技有限公司 游戏场景转换方法及装置、存储介质、计算机设备
CN114237436A (zh) * 2021-12-22 2022-03-25 杭州群核信息技术有限公司 相机路径绘制方法和基于相机路径绘制的渲染交互系统
CN115222927A (zh) * 2022-07-25 2022-10-21 上海炯眼网络科技有限公司 一种步进式虚拟漫游场景构建方法

Non-Patent Citations (6)

* Cited by examiner, † Cited by third party
Title
BGENER等: "教程：与3D对象交互", pages 2 - 4, Retrieved from the Internet <URL:https://learn.microsoft.com/zh-cn/windows/mixed-reality/develop/javascript/tutorials/babylonjs-webxr-helloworld/interact-03> *
EHSAN AZIMI等: "Alignment of the Virtual Scene to the Tracking Space of a Mixed Reality Head-Mounted Display", 《ARXIV-HUMAN-COMPUTER INTERACTION》, pages 1 - 10 *
KOMMENTAR HINZUFUGEN: "PCA+1.7 Complete Workflow", pages 2 - 4, Retrieved from the Internet <URL:https://der-mische.de/2022/04/22/panocamadder1-7-complete-workflow-tutorial/> *
仇益阳: "JavaScript第十五章节 使用Canvas绘图（WebGL）", pages 1 - 5, Retrieved from the Internet <URL:https://zhuanlan.zhihu.com/p/90588307> *
孙小磊: "计算机图形学二：视图变换(坐标系转化，正交投影，透视投影，视口变换)", pages 1, Retrieved from the Internet <URL:https://zhuanlan.zhihu.com/p/144329075> *
杨诚笃: "多视角非专业视频处理关键技术的研究", 《信息科技辑》, no. 07, pages 11 - 55 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117596349A (zh) * 2023-11-06 2024-02-23 中影电影数字制作基地有限公司 基于虚拟引擎进行空间虚拟拍摄的方法及系统

Also Published As

Publication number Publication date
CN116243831B (zh) 2023-08-08

Similar Documents

Publication Publication Date Title
Shreiner OpenGL programming guide: the official guide to learning OpenGL, versions 3.0 and 3.1
US7400322B1 (en) Viewport-based desktop rendering engine
Klein et al. Non-photorealistic virtual environments
CA2669409C (en) Method for scripting inter-scene transitions
Fairbairn et al. The use of VRML for cartographic presentation
RU2427918C2 (ru) Метафора двумерного редактирования для трехмерной графики
US9799134B2 (en) Method and system for high-performance real-time adjustment of one or more elements in a playing video, interactive 360° content or image
KR20070086037A (ko) 장면 간 전환 방법
US20130278600A1 (en) Rendering interactive photorealistic 3d model representations
CN116243831B (zh) 一种虚拟云展厅交互方法及系统
Liarokapis et al. Mobile augmented reality techniques for geovisualisation
US20050140668A1 (en) Ingeeni flash interface
Trapp et al. Colonia 3D communication of virtual 3D reconstructions in public spaces
CN112308948A (zh) 用于房产营销的光场漫游模型的构建方法及应用
CN111949904A (zh) 一种基于浏览器的数据处理方法、装置以及终端
Ko et al. Interactive web-based virtual reality with Java 3D
CN114119821A (zh) 虚拟对象的毛发渲染方法、装置及设备
Lehn et al. Introduction to Computer Graphics: Using OpenGL and Java
Tao A VR/AR-based display system for arts and crafts museum
Meyer et al. Real-time reflection on moving vehicles in urban environments
Barrile et al. A Combined Study of Cultural Heritage in Archaeological Museums: 3D Survey and Mixed Reality. Heritage 2022, 5, 1330–1349
Wünsche et al. Sketch, click, plug and play: accelerated design of virtual environments by integrating multimedia and sketch content into game engines
Blythe et al. Lighting and shading techniques for interactive applications
Hering et al. 3DCIS: A real-time browser-rendered 3d campus information system based on webgl
KR102622709B1 (ko) 2차원 영상에 기초하여 3차원 가상객체를 포함하는 360도 영상을 생성하는 방법 및 장치

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant