CN106200974B - 一种基于移动设备浏览器的虚拟现实的实现方法 - Google Patents
一种基于移动设备浏览器的虚拟现实的实现方法 Download PDFInfo
- Publication number
- CN106200974B CN106200974B CN201610564851.8A CN201610564851A CN106200974B CN 106200974 B CN106200974 B CN 106200974B CN 201610564851 A CN201610564851 A CN 201610564851A CN 106200974 B CN106200974 B CN 106200974B
- Authority
- CN
- China
- Prior art keywords
- browser
- virtual reality
- interface
- parameter
- mobile device
- 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.)
- Active
Links
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/011—Arrangements for interaction with the human body, e.g. for user immersion in virtual reality
- G06F3/012—Head tracking input arrangements
Abstract
本发明涉及浏览器虚拟实现技术领域，公开了一种基于移动设备浏览器的虚拟现实的实现方法，包括：(1)浏览器类型判断步骤；(2)浏览器支持虚拟现实判断步骤；(3)创建头盔显示设备对象并设置参数；(4)创建传感器设备对象并设置参数；(5)绑定虚拟现实头盔设备对象和位置传感器设备对象；(6)获取硬件信息并计算朝向信息；(7)计算相机参数并渲染左右眼三维图像。本发明让移动设备平台除Firefox浏览之外的主流浏览器也能使用虚拟现实技术；使除了Firefox外的基于移动设备的主流浏览器，能提供网页的虚拟现实应用能简单、便捷的使用，得到推广和普及。
Description
技术领域
本发明涉及浏览器虚拟现实技术领域，特别是涉及一种基于移动设备浏览器的虚拟现实的实现方法。
背景技术
虚拟现实技术是一种可以创建和体验虚拟世界的计算机仿真系统，它利用计算机生成一种模拟环境，是一种多源信息融合的交互式的三维动态视景和实体行为的系统仿真，使用户沉浸到该环境中。虚拟现实当前的实现主要方式是通过头盔硬件提供输入和响应，后端通过桌面电脑三维或手机三维应用程序提供软件支持。
虚拟现实的应用越来越广泛，在智慧城市、智能制造及日常文化娱乐等领域的应用前景广泛。基于移动设备的虚拟现实应用也越来越受到重视，当前主要通过移动应用App的方式提供，这要求除了有虚拟现实应用开发能力外，还要求有移动应用开会的能力。基于网页的移动设备应用是一种容易开发、容易推广的方式，把虚拟现实技术应用于移动设备浏览器实现基于网页的虚拟现实应用开发，这会是一种轻量、便捷应用的强烈需求。
虚拟现实的软件系统需要最基本的头盔设备对象和动作传感器对象，前者用于按合适的头盔显示设备成像，后者用于捕获硬件信息以基于旋转、位置等信息来更新成像的相机参数。随着HTML5技术的发展与成熟，移动设备的浏览器逐步支持高级HTML5特性，主流浏览器厂商均提供了浏览器访问移动硬件设备的相关能力，使得在移动设备的浏览器中使用陀螺仪、重力传感器等硬件设备的信息成为可能。
基于网页浏览器的虚拟现实技术还处于起步阶段，只有Mozilla基金会底下最新Firefox浏览器提供了对网页虚拟现实的实验性支持。Mozilla通过制定实验生的WebVR接口标准，在Firefox浏览器内部实现对硬件设备信息的访问，以标准的JavaScript接口方式向网页应用程序提供功能。该功能在Android最新版本的移动设备Firefox浏览器和桌面操作系统的Firefox浏览器中，通过配置相关参数来启用。
Mozilla基金会制定的WebVR标准当前处于实验阶段，其Firefox浏览器通过内核实现了虚拟现实头盔显示设备与传感器设备的基本规范，以浏览器标准的JavaScript库向外提供接口；由于Firefox的WebVR处于初步试验性阶段，默认并不启用，需要专业人员通过设置浏览才能使用，对一般用户使用困难。除此之外，主流浏览器如Google的Chrome浏览器、微软的IE系列浏览器、苹果的Safari浏览器等，均未加入Mozilla的WebVR标准制定中，这些主流厂商的浏览器当前无法提供基本见面的虚拟现实技术手段。特别是在移动设备中，除Android平台最新版本的Firefox需要通过设置相关参数来启用网页虚拟现实外，其他浏览器均不支持基于网页的虚拟现实技术。因此，基于网页的虚拟现实技术面临两个方面的问题：首先，这项试验技术当前只针对Firefox浏览器，其他浏览器不支持，也造成基于网页的虚拟现实应用的推广困难；其次，即使是Firefox浏览器，该功能不是默认开启，需要针对最新的Firefox浏览器进行设置才能启用，只有专业人员才能使用。
发明内容
本发明针对现有技术中标准化不高、支持性差的缺点，提供一种基于移动设备浏览器的虚拟现实的实现方法，其目的是让移动设备中基于浏览器的网页虚拟应用能提供与Mozilla标准统一的虚拟现实接口，让移动设备浏览器的网页在应用虚拟现实成为可能，保持与Mozilla基金会的WebVR标准的统一。
为了解决上述技术问题，本发明通过下述技术方案得以解决。
一种基于移动设备浏览器的虚拟现实的实现方法，包括如下步骤：
(1)浏览器类型判断步骤：检测浏览器是否为移动设备平台的浏览器，通过在网页的JavaScript代码中获取浏览器的navigator.userAgent和navigator.vendor参数，与预先确定的浏览器判断移动平台的正则表达进行判断，判断为是，进入步骤(2)；判断为否，跳出流程；
(2)浏览器支持虚拟现实判断步骤：将移动设备的浏览器，通过引用外部JavaScript文件的方式，在网页应用中加载实现该文件内的JavaScript代码，接着获取浏览器的navigator.getVRDevices对象，调用已加载的JavaScript代码来判断浏览器是否已经提供了虚拟现实接口的支持，判断为是，跳出流程；判断为否，进入步骤(3)；
(3)创建头盔显示设备对象并设置参数：当移动设备的浏览器不支持虚拟现实接口时，通过已加载的JavaScript代码创建出虚拟现实头盔显示设备的对象，该对象实现了Mozilla WebVR标准的HMDVRDevice接口，提供了使得getEyeParameters符合Mozilla标准的接口方法，该方法把头盔显示设备的视场参数和左右眼的距离参数，设置给虚拟现实头盔显示设备的对象；
(4)创建传感器设备对象并设置参数：接着通过已加载的JavaScript代码，创建出基于JavaScript代码实现的虚拟现实位置传感器设备对象，该对象实现了Mozilla WebVR标准的PositionSensorVRDevice接口，并提供了getState、getOrientation符合Mozilla标准的接口方法；通过devicemotion和orientationchange标准事件接口绑定到虚拟现实位置传感器设备对象的相应接口方法，将传感器硬件相关的信息传递给JavaScript位置传感器设备对象；
(5)绑定虚拟现实头盔设备对象和位置传感器设备对象：根据步骤(4)创建的虚拟现实头盔设备对象和位置传感器设备对象绑定到浏览器提供的navigator顶级JavaScript对象，实现了与Mozilla WebVR接口一致的HMDVRDevice和PositionSensorVRDevice接口，从而保证与Mozilla WebVR标准保持一致性，实现了网页中提供虚拟现实方法的基本设备对象；
(6)获取硬件信息并计算朝向信息：通过步骤(5)中绑定的浏览器标准事件接口，在移动设备的浏览器获取传感器相关的硬件信息，根据步骤(4)中创建的位置传感器对象计算出新的朝向信息；
(7)计算相机参数并渲染左右眼三维图像：根据步骤(6)计算的朝向信息、头盔显示设备对象的参数，计算出三维空间中左眼和右眼的相机参数，并传递给WebGL的图形渲染层，调用WebGL的接口并根据左眼和右眼的相机参数，渲染出同屏中左、右的三维图像。
作为优选，步骤(4)中，getState、getOrientation接口方法用于通过该传感器设备对象设置初始的速度、加速度、朝向的参数的向量值。
作为优选，步骤(4)中，devicemotion和orientationchange为移动设备的浏览器提供的硬件相关联的标准事件接口，devicemotion接口提供与硬件传感器位置移动相关联的信息，orientationchange接口提供与硬件传感器的朝向变化相关联的信息。
作为优选，步骤(6)中，硬件信息包括加速度、旋转速率、时间间隔硬件传感器的信息。
本发明由于采用了以上技术方案，具有显著的技术效果：让移动设备平台除Firefox浏览之外的主流浏览器也能使用虚拟现实技术，用户无需通过复杂设置，而是进行智能判断以决定是否启用虚拟现实模式；同时，使除了Firefox外的基于移动设备的主流浏览器，能提供网页的虚拟现实应用能简单、便捷的使用，得到推广和普及。
附图说明
图1是本发明一种基于移动设备浏览器的虚拟现实的实现方法的流程示意图。
具体实施方式
下面结合附图与实施例对本发明作进一步详细描述。
如图1所示，一种基于移动设备浏览器的虚拟现实的实现方法，包括如下步骤：
(1)浏览器类型判断步骤：检测浏览器是否为移动设备平台的浏览器，通过在网页的JavaScript代码中获取浏览器的navigator.userAgent和navigator.vendor参数，与预先确定的浏览器判断移动平台的正则表达进行判断，判断为是，进入步骤(2)；判断为否，跳出流程；具体的移动设备浏览的正则表达式如下：
/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge|maemo|midp|mmp|mobile.+firefox|netfront|operam(ob|in)i|palm(os)？|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i
(2)浏览器支持虚拟现实判断步骤：将移动设备的浏览器，通过引用外部JavaScript文件的方式，在网页应用中加载实现该文件内的JavaScript代码，接着获取浏览器的navigator.getVRDevices对象，调用已加载的JavaScript代码来判断浏览器是否已经提供了虚拟现实接口的支持，判断为是，跳出流程；判断为否，进入步骤(3)；
(3)创建头盔显示设备对象并设置参数：当移动设备的浏览器不支持虚拟现实接口时，通过已加载的JavaScript代码创建出虚拟现实头盔显示设备的对象，该对象实现了Mozilla WebVR标准的HMDVRDevice接口，提供了使得getEyeParameters符合Mozilla标准的接口方法，该方法把头盔显示设备的视场参数和左右眼的距离参数，设置给虚拟现实头盔显示设备的对象；
(4)创建传感器设备对象并设置参数：接着通过已加载的JavaScript代码，创建出基于JavaScript代码实现的虚拟现实位置传感器设备对象，该对象实现了Mozilla WebVR标准的PositionSensorVRDevice接口，并提供了getState、getOrientation符合Mozilla标准的接口方法，用于通过该传感器设备对象设置初始的速度、加速度、朝向的参数的向量值；通过devicemotion和orientationchange标准事件接口绑定到虚拟现实位置传感器设备对象的相应接口方法，将传感器硬件相关的信息传递给JavaScript位置传感器设备对象，devicemotion和orientationchange为移动设备的浏览器提供的硬件相关联的标准事件接口，devicemotion接口提供与硬件传感器位置移动相关联的信息，orientationchange接口提供与硬件传感器的朝向变化相关联的信息；
(5)绑定虚拟现实头盔设备对象和位置传感器设备对象：根据步骤(4)创建的虚拟现实头盔设备对象和位置传感器设备对象绑定到浏览器提供的navigator顶级JavaScript对象，实现了与Mozilla WebVR接口一致的HMDVRDevice和PositionSensorVRDevice接口，从而保证与Mozilla WebVR标准保持一致性，实现了网页中提供虚拟现实方法的基本设备对象；
(6)获取硬件信息并计算朝向信息：通过步骤(5)中绑定的浏览器标准事件接口，在移动设备的浏览器获取传感器相关的硬件信息，硬件信息包括加速度、旋转速率、时间间隔硬件传感器的信息，根据步骤(4)中创建的位置传感器对象计算出新的朝向信息；
(7)计算相机参数并渲染左右眼三维图像：根据步骤(6)计算的朝向信息、头盔显示设备对象的参数，计算出三维空间中左眼和右眼的相机参数，并传递给WebGL的图形渲染层，调用WebGL的接口并根据左眼和右眼的相机参数，渲染出同屏中左、右的三维图像。
(8)根据步骤(7)计算的朝向信息、头盔显示设备对象的参数，计算出三维空间中左眼和右眼的相机参数，并传递给WebGL的图形渲染层，调用WebGL的接口根据左眼和右眼的相机参数，渲染出同屏中左、右的三维图像。
本发明移动设备平台除Firefox浏览之外的主流浏览器也能使用虚拟现实技术，用户无需通过复杂设置，而是进行智能判断以决定是否启用虚拟现实模式；同时，使除了Firefox外的基于移动设备的主流浏览器，能提供网页的虚拟现实应用能简单、便捷的使用，得到推广和普及。
总之，以上所述仅为本发明的较佳实施例，凡依本发明申请专利范围所作的均等变化与修饰，皆应属本发明专利的涵盖范围。
Claims (4)
1.一种基于移动设备浏览器的虚拟现实的实现方法，其特征在于，所述方法包括如下步骤：
(1)浏览器类型判断步骤：检测浏览器是否为移动设备平台的浏览器，通过在网页的JavaScript代码中获取浏览器的navigator.userAgent和navigator.vendor参数，与预先确定的浏览器判断移动平台的正则表达进行判断，判断为是，进入步骤(2)；判断为否，跳出流程；
(2)浏览器支持虚拟现实判断步骤：将移动设备的浏览器，通过引用外部JavaScript文件的方式，在网页应用中加载实现该文件内的JavaScript代码，接着获取浏览器的navigator.getVRDevices对象，调用已加载的JavaScript代码来判断浏览器是否已经提供了虚拟现实接口的支持，判断为是，跳出流程；判断为否，进入步骤(3)；
(3)创建头盔显示设备对象并设置参数：当移动设备的浏览器不支持虚拟现实接口时，通过已加载的JavaScript代码创建出虚拟现实头盔显示设备的对象，该对象实现了Mozilla WebVR标准的HMDVRDevice接口，提供了使得getEyeParameters符合Mozilla标准的接口方法，该方法把头盔显示设备的视场参数和左右眼的距离参数，设置给虚拟现实头盔显示设备的对象；
(4)创建传感器设备对象并设置参数：接着通过已加载的JavaScript代码，创建出基于JavaScript代码实现的虚拟现实位置传感器设备对象，该对象实现了Mozilla WebVR标准的PositionSensorVRDevice接口，并提供了getState、getOrientation符合Mozilla标准的接口方法；通过devicemotion和orientationchange标准事件接口绑定到虚拟现实位置传感器设备对象的相应接口方法，将传感器硬件相关的信息传递给JavaScript位置传感器设备对象；
(5)绑定虚拟现实头盔设备对象和位置传感器设备对象：根据步骤(4)创建的虚拟现实头盔设备对象和位置传感器设备对象绑定到浏览器提供的navigator顶级JavaScript对象，实现了与Mozilla WebVR接口一致的HMDVRDevice和PositionSensorVRDevice接口，从而保证与Mozilla WebVR标准保持一致性，实现了网页中提供虚拟现实方法的基本设备对象；
(6)获取硬件信息并计算朝向信息：通过步骤(5)中绑定的浏览器标准事件接口，在移动设备的浏览器获取传感器相关的硬件信息，根据步骤(4)中创建的位置传感器对象计算出新的朝向信息；
(7)计算相机参数并渲染左右眼三维图像：根据步骤(6)计算的朝向信息、头盔显示设备对象的参数，计算出三维空间中左眼和右眼的相机参数，并传递给WebGL的图形渲染层，调用WebGL的接口并根据左眼和右眼的相机参数，渲染出同屏中左、右的三维图像。
2.根据权利要求1所述的一种基于移动设备浏览器的虚拟现实的实现方法，其特征在于：步骤(4)中，getState、getOrientation接口方法用于通过该传感器设备对象设置初始的速度、加速度、朝向的参数的向量值。
3.根据权利要求1所述的一种基于移动设备浏览器的虚拟现实的实现方法，其特征在于：步骤(4)中，devicemotion和orientationchange为移动设备的浏览器提供的硬件相关联的标准事件接口，devicemotion接口提供与硬件传感器位置移动相关联的信息，orientationchange接口提供与硬件传感器的朝向变化相关联的信息。
4.根据权利要求1所述的一种基于移动设备浏览器的虚拟现实的实现方法，其特征在于：步骤(6)中，硬件信息包括加速度、旋转速率、时间间隔硬件传感器的信息。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610564851.8A CN106200974B (zh) | 2016-07-18 | 2016-07-18 | 一种基于移动设备浏览器的虚拟现实的实现方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610564851.8A CN106200974B (zh) | 2016-07-18 | 2016-07-18 | 一种基于移动设备浏览器的虚拟现实的实现方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106200974A CN106200974A (zh) | 2016-12-07 |
| CN106200974B true CN106200974B (zh) | 2019-05-24 |
Family
ID=57493742
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610564851.8A Active CN106200974B (zh) | 2016-07-18 | 2016-07-18 | 一种基于移动设备浏览器的虚拟现实的实现方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106200974B (zh) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107248194A (zh) * | 2017-05-31 | 2017-10-13 | 华中科技大学 | 一种基于云计算的cae数据三维显示交互方法 |
| CN109857568B (zh) * | 2017-11-30 | 2023-07-25 | 阿里巴巴（中国）有限公司 | 数据封装及处理方法、装置及电子设备 |
| TWI687842B (zh) * | 2017-12-29 | 2020-03-11 | 宏碁股份有限公司 | 虛擬實境網頁內容的瀏覽方法及應用其的電子裝置 |
| CN110020250B (zh) * | 2017-12-29 | 2022-10-14 | 宏碁股份有限公司 | 虚拟实境网页内容的浏览方法及应用其的电子装置 |
| CN108877310A (zh) * | 2018-06-08 | 2018-11-23 | 河南大学 | 一种新型vr百科课堂 |
| TWI704495B (zh) * | 2019-04-03 | 2020-09-11 | 宏碁股份有限公司 | Chromebook電腦及其網頁虛擬實境的執行方法 |
| CN110488981B (zh) * | 2019-08-28 | 2022-08-23 | 长春理工大学 | 基于云渲染的手机端vr场景交互式显示方法 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101996077A (zh) * | 2010-09-08 | 2011-03-30 | 海皮士（北京）网络技术有限公司 | 一种在三维客户端中嵌入浏览器的方法和系统 |
| CN104102545A (zh) * | 2014-07-04 | 2014-10-15 | 北京理工大学 | 移动增强现实浏览器三维资源配置与加载的优化方法 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP3779869B2 (ja) * | 2000-10-16 | 2006-05-31 | 株式会社ケー・エー・ジェー | 仮想現実空間を表示する方法、仮想現実空間を表示するための装置、および単位仮想現実空間情報を記録した記録媒体 |
-
2016
- 2016-07-18 CN CN201610564851.8A patent/CN106200974B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101996077A (zh) * | 2010-09-08 | 2011-03-30 | 海皮士（北京）网络技术有限公司 | 一种在三维客户端中嵌入浏览器的方法和系统 |
| CN104102545A (zh) * | 2014-07-04 | 2014-10-15 | 北京理工大学 | 移动增强现实浏览器三维资源配置与加载的优化方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106200974A (zh) | 2016-12-07 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106200974B (zh) | 一种基于移动设备浏览器的虚拟现实的实现方法 | |
| KR102370257B1 (ko) | 2d/3d 혼합 콘텐츠의 검출 및 디스플레이 | |
| KR102649272B1 (ko) | 신체 자세 추정 | |
| US11498003B2 (en) | Image rendering method, device, and storage medium | |
| US10449673B2 (en) | Enhanced configuration and control of robots | |
| US20170351330A1 (en) | Communicating Information Via A Computer-Implemented Agent | |
| WO2022188708A1 (zh) | 基于增强现实的试鞋方法、装置和电子设备 | |
| JP2023509866A (ja) | 画像処理方法及び装置 | |
| WO2019231676A1 (en) | Virtual skeleton based on computing device capability profile | |
| KR101653795B1 (ko) | 평면 요소의 속성을 표시하는 방법 및 그 장치 | |
| US11792517B2 (en) | Pose tracking for rolling shutter camera | |
| WO2016047999A2 (ko) | 방향 예측을 이용한 저 레이턴시 시뮬레이션 장치 및 방법과, 이를 위한 컴퓨터 프로그램 | |
| WO2022218104A1 (zh) | 虚拟形象的碰撞处理方法、装置、电子设备和存储介质 | |
| CN114494658B (zh) | 特效展示方法、装置、设备和存储介质 | |
| JP2022551671A (ja) | オブジェクトの表示方法、装置、電子機器及びコンピュータ可読型記憶媒体 | |
| Vlachos et al. | SMART GLASS APPLICATION TESTING FOR AUGMENTED REALITY | |
| KR102534449B1 (ko) | 이미지 처리 방법, 장치, 전자 장치 및 컴퓨터 판독 가능 저장 매체 | |
| CN108415566B (zh) | 虚拟现实场景中外接设备姿态信息的确定方法及装置 | |
| CN117784923A (zh) | 一种基于vr的显示方法、装置、设备及介质 | |
| KR102141954B1 (ko) | 평면 요소의 속성을 표시하는 방법 및 그 장치 | |
| JP2023062814A (ja) | 画像生成プログラム、記録媒体、画像生成方法 | |
| CA2851666A1 (en) | Methods and systems of providing items to customers via a network | |
| Jiao et al. | Stereoscopic Display on Post-process of ANSYS |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20190416 Address after: 2010 803 4th Floor, No. 20, Lane 1555, Jiangxi Road, Jinsha District, Shanghai Applicant after: Shanghai hi-tech limited company Address before: Room 0172, Building 848, Yaojiacun, Qingcun Town, Fengxian District, Shanghai, 201906 Applicant before: SHANGHAI WEIGAO NETWORK TECHNOLOGY CO., LTD. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |