CN108877310A - 一种新型vr百科课堂 - Google Patents

Abstract

本发明公开了一种新型VR百科课堂，其特征在于：采用B/S模式，运行在浏览器环境中，可以跨平台，跨终端使用，本发明使用*** cardboard标准，用户可以通过Internet上的任意节点访问，不受地理位置的限制；使用独创的虚拟场景平台，使得每个用户使用网络处在同一虚拟环境中；独创的扫码互动模式，通过用户设备镜头扫描真实空间的二维码进而将真实空间坐标映射到虚拟空间。本发明的优点是：能够解决在浏览器环境里实现VR并且跨平台使用的问题，能够解决使得不同地理位置的人以不同的虚拟形象在同一虚拟场景中活动并互动的问题，能够解决教师和学生在VR环境中完成一系列教学活动，包括讲解，实验，问答，布置作业，检查作业等的问题。

Description

一种新型VR百科课堂

技术领域

本发明涉及一种计算机或互联网领域，具体为一种新型VR百科课堂。

背景技术

VR百科课堂，是一款面向中小学教育的技术，帮助学生更全面，更身临其 境地了解一个事物的外形特点，工作原理，知识背景。学生还能在场景中和场景 物体进行互动。

现有的VR应用平台有这样几个问题。

1.应用平台单一，需要安装大型客户端且需要配备专用的设备，价格高昂。 本发明采用B/S模式，运行在浏览器环境中，可以跨平台，跨终端使用，本发 明使用***cardboard标准，设备价格低廉。

2.表现手法单一，现有的VR课堂技术每个学生独立使用自己的App，无法 在虚拟场景中交流，且教师难以对学***台，使得每个用户使用网络处在同一虚拟环境中(包括教师)，这 样教师就可以带领学生在虚拟场景中进行授课和互动，这样更加生动，临场感 更强。

3.互动方式单一，要么采用无互动仅浏览的方式，要么采用价格高昂的专 用控制器。本发明使用独创的扫码互动模式，通过用户设备镜头扫描真实空间 的二维码进而将真实空间坐标映射到虚拟空间，使互动方式更为多样化和生动。

4.地理位置受限，只能使用单机App或局域网的方式。本发明采用B/S模 式，在Internet中运行，用户可以通过Internet上的任意节点访问，不受地 理位置的限制。

本发明和传统的百科课堂不同，它采用WebGL和HTML5为依托，建立在浏览 器的基础之上，用户使用时，打开浏览器，输入网址，即可用VR眼镜在浏览器 中全方位浏览场景，了解产品的内容，完全无需任何安装过程和升级过程。甚至 教师可以在课堂中用教学的方式和学生们在一个虚拟环境中联机互动。此产品前 景广阔，利于扩展，相较于市场中的同类产品有着明显的优势。

发明内容

本发明的目的在于提供一种新型VR百科课堂，能够解决在浏览器环境里实 现VR并且跨平台使用的问题，能够解决使得不同地理位置的人以不同的虚拟形 象在同一虚拟场景中活动并互动的问题，能够解决教师和学生在VR环境中完成 一系列教学活动，包括讲解，实验，问答，布置作业，检查作业等的问题。

本发明采用的技术方案如下：一种新型VR百科课堂，其特征在于：

采用WebGL和HTML5为依托，建立在浏览器的基础之上，用户使用时，打开 浏览器，输入网址，即可用VR眼镜在浏览器中全方位浏览场景，了解产品的内 容，完全无需任何安装过程和升级过程；用户除了可以在通用入口登录网站，访 问全部内容，甚至可以将网站部分内容通过其它接口推送至微信等其它社交软件；

1、采用B/S模式，运行在浏览器环境中，可以跨平台，跨终端使用，本发 明使用*** cardboard标准，用户可以通过Internet上的任意节点访问，不 受地理位置的限制；

2、使用独创的虚拟场景平台，使得每个用户使用网络处在同一虚拟环境中；

3、独创的扫码互动模式，通过用户设备镜头扫描真实空间的二维码进而将 真实空间坐标映射到虚拟空间；

4、在VR环境中的可交互式UI；实现了VR交互式UI，包括视觉指针；电容 开关和视点开关双响应；基于陀螺仪的VR相机；扁平化风格的选择菜单和加载 条；

5、使用GLSL制作了大量特殊效果，包括水体效果，包括涟漪算法，涟漪的 实现不是采用波的传播方式，而是采用一种类似电场般迅速扑开的“场”，把整 个水面纳入计算，根据距波源的距离、时间等模拟出某一时刻的顶点高度，烟雾 效果，卡通渲染效果；

6、开发了VR环境中的3D骨骼动画***，配合虚拟UI，完成了动画无缝切 换，视角变换，事件传递多项功能；

7、***前端分为兼容性测试模块，主要负责对浏览器进行WebVR兼容性检 查，后端功能模块分为：(1)场景加载模块，负责和后台通信，接收由后台管理 模块传回的场景模型；(2)虚拟UI，允许用户通过UI和场景进行互动，选择要 了解的动物以及其它交互行为；(3)模型管理模块，管理模型加载以及相关信息， 包括顶点，线，面，骨骼，动画，材质，音乐；(4)特效管理模块。

独创的虚拟场景平台为虚拟环境管理***：用户通过浏览器端登录该***， ***允许多用户同时登录，***通过用户输入的信息(年龄、性别、职业等)自 动为每个用户建立角色模型并绑定到虚拟场景平台中。

场景中的所有对象采用独创的分区树形管理模型，角色控件与每个角色绑定， 角色区存在一个管理员角色(教师)，其他角色的权限受管理员角色分配，权限 分为共有权限和私有权限，共有权限包括浏览、观察而私有权限可以对指定的目 标对象进行操作控制，管理员一次只能为一个角色分配私有权限。

本发明的优点：现在的互联网市场上，HTML5在快速地成长，吸引了越来越 多人的目光和注意，但它也是值得被关注的。它有以下几个优势：

(1)平台优势。WebGL技术依托于HTML5平台，目前取得了茁壮的成长。相 比于传统APP而言，因为WebGL运行于浏览器，所以能在PC，移动端和嵌入式 环境同时运行，而不用重复开发。WebGL根据用户习惯不但可以打包为传统的APP， 甚至可以利用社交软件，例如微信，QQ，“碎片化”运行。

(2)性能优势。WebGL利用OpenGL ES运行，相比浏览器端其它APP，它可 以最大程度利用CPU和GPU，WebGL的普及率要比我们想象中的要高很多，可以说 只要是支持OpenglES的手机设备都可以支持WebGL，甚至2D内容都已调用GLSL 进行渲染，将性能提升至最大。在移动端，目前600元的低端机都可以完美运行 WebGL项目。

(3)市场容量。目前虽然WebGL技术部分已然成熟，但缺少“大作”，市场 占有率很低，但前景十分广阔，在很多领域有着极大的市场前景，我相信，只要 有“大作”进行带动，WebGL类项目必然出现星火燎原之势，尤其它与热门IP -VR结合以后，直接将VR“平民化”，更凸显了在以后市场中可大有作为。本项 目力图做这样的“大作”。教育类项目一直是市场和投资最关注的重点，因为我 本身的教育行业背景，本项目除了技术创新，还有教育手段的创新，本项目紧扣 “百科”和“VR”这两个主题，将知识点进行串联，直观展示，目前因为时间和 资金问题，只开放了“动物认知”这个主题，以后会陆续开放“宇宙认知”，“机 械认知”，“历史认知”等多个主题。

附图说明

图1为本发明的项目结构图。

图2为本发明的场景中的所有对象采用独创的分区树形管理模型图。

图3为本发明的管理员一次只能为一个角色分配私有权限示意图。

图4为本发明的采用两个环境渲染器分别绑定两个透视相机示意图。

具体实施方式

本发明目前功能是通过互动帮助学生了解动物的外形和相关行为以及知识。 教育类项目一直是市场和投资最关注的重点，目前市场上有形形色色的教育类数 字化产品在直观性和互动性方面往往不能兼顾。尤其大多数产品互动性差，无法 让学生主动且有兴趣去了解知识。本发明为一款VR百科Online，这款软件面向 我国中小学生，让学生们在虚拟VR场景里近距离了解动植物，自然，地理，科 技产品，不但能360全景观察，还能通过控制器与场景互动，更增加学习效率和 趣味性。本项目除了技术创新，还有教育手段的创新，本项目紧扣“百科”和“VR” 这两个主题，将知识点进行串联，直观展示，目前因为时间和资金问题，只开放 了“动物认知”这个主题，以后会陆续开放“宇宙认知”，“机械认知”，“历史认知”等多个主题。

本发明在设计时力求达到以下这几个点：“免安装”，“跨平台”，“趣味性”， “低硬件成本”，“分布式使用”。所以，和传统的百科课堂不同，本项目采用WebGL 和HTML5为依托，建立在浏览器的基础之上，用户使用时，打开浏览器，输入网 址，即可用廉价VR眼镜(比如，符合cardboard标准的VR眼镜)在浏览器中全 方位浏览场景，了解产品的内容，完全无需任何安装过程和升级过程。用户除了 可以在通用入口登录网站，访问全部内容，甚至可以将网站部分内容通过其它接 口推送至微信等其它社交软件。本产品后期准备开发局域网模式，教师可以在课 堂中用教学的方式和学生们在一个虚拟环境中联机互动。此产品前景广阔，利于 扩展，相较于市场中的同类产品有着明显的优势。

本发明在VR环境中的可交互式UI；同类的WebVR项目一般交互菜单使用DOM 实现，只能在2D模式下进行选取，本项目为了使用户增加沉浸感，开发实现了 VR交互式UI，包括视觉指针；电容开关和视点开关双响应；基于陀螺仪的VR 相机；扁平化风格(GLSL实现)的选择菜单和加载条。

本发明为了使效果更为生动，使用GLSL制作了大量特殊效果，包括水体效 果(包括涟漪算法，涟漪的实现不是采用波的传播方式，而是采用一种类似电场 般迅速扑开的“场”，把整个水面纳入计算，根据距波源的距离、时间等模拟出 某一时刻的顶点高度)，烟雾效果，卡通渲染效果(卡通渲染是一种非真实感渲 染(non-photorealistic render)。而卡通着色是一种简单非真实着色。它运用 很少的颜色通常是颜色调和，所以经常是从一种色调变化到另一种色调，但是给 人一种三维模型的感觉)。

本发明开发了VR环境中的3D骨骼动画***，配合虚拟UI，完成了动画无缝 切换，视角变换，事件传递等多项功能。

本发明目前功能是通过互动帮助学生了解动物的外形和相关行为以及知识， ***前端分为兼容性测试模块，主要负责对浏览器进行WebVR兼容性检查，如无 法启动WebVR，则自动转换为独创的WebGL渲染VR模式；后端功能模块分为：(1) 场景加载模块，负责和后台通信，接收由后台管理模块传回的场景模型。(2)虚 拟UI，允许用户通过UI和场景进行互动，选择要了解的动物以及其它交互行为； (3)模型管理模块，管理模型加载以及相关信息，包括顶点(Points)，线(Lines)， 面(Faces)，骨骼(Bones)，动画(Animations)，材质(Materials)，音乐(Sounds) 等等；(4)特效管理模块。数据存取利用一个数据库和与之相关的I/O模块， 该模块负责模型和资源的存储和调配。

因为WebGL技术本身的特点，本发明特点是不需任何插件即可在Web页面里 嵌入交互式3D模型。所以本发明有多种渠道可以使用，比如传统B/S模式，用 户可以用PC和移动端浏览器使用，也可以打包成WebAPP，供有App使用***台(本发明可以在微信浏览器端运行)进行分发，形成辐射效应。

在用户使用方法上，有两种模式，一是发布在互联网环境中，用户可以正常注册、使用和缴费。二是针对某学校或某班级课堂提供特殊的局域网版本，在局域网版 本里，提供多人联机互动功能，形成虚拟课堂，为用户创造了一个实时的网络互 动课堂，允许老师在虚拟环境里进行教学。关于虚拟课堂的内容，项目初期可以 在局域网里测试，如果效果理想，后期可以考虑将其推广到互联网，教育资源不 均衡这是每个国家都会面临的问题，但通过虚拟学校，可以把好的老师和资源集 中在一起，通过网络分享，让各地的孩子都能享受到优质的教育资源。同时，虚 拟学校也给很多问题儿童创造了学习的机会。

场景中的所有对象采用独创的分区树形管理模型，角色控件与每个角色绑定， 角色区存在一个管理员角色(教师)，其他角色的权限受管理员角色分配，权限 分为共有权限和私有权限，共有权限包括浏览、观察而私有权限可以对指定的目 标对象进行操作控制，管理员一次只能为一个角色分配私有权限。

独创的虚拟场景平台为虚拟环境管理***：用户通过浏览器端登录该***， ***允许多用户同时登录，***通过用户输入的信息(年龄、性别、职业等)自 动为每个用户建立角色模型并绑定到虚拟场景平台中。场景中的所有对象采用独 创的分区树形管理模型，如下图2所示：角色控件与每个角色绑定，角色区存在 一个管理员角色(教师)，其他角色的权限受管理员角色分配，权限分为共有权 限和私有权限，共有权限包括浏览、观察而私有权限可以对指定的目标对象进行 操作控制，管理员一次只能为一个角色分配私有权限。场景显示示意图如下图3。

2.独创的适应VR环境的GLSL特效。传统的GLSL特效并不能适应在浏览器 端VR环境的需求，浏览器端VR环境的特点是有限吞吐量、有限并发和有限的渲 染机能。为了适应这种环境，本专利对传统的相关GLSL做了改造，以便于更好 适应VR环境。提出了

(1)适应VR环境的光线变化特效；

(2)适应VR环境的自动纹理生成；

(3)适应VR环境的水纹特效。

3.浏览器端的双目渲染功能。传统的VR渲染依托特定的客户端(比如 Windows、Linux、Android、PS VR和iOS)和与之整合的特定的观察环境(比如 Oculus Rift等)。而浏览器端VR有以下几个特点：1.观察设备多样化。2.浏览 器本身渲染能力有限。3.所有交互控制行为都是在线完成。

基于以上要求，本专利采用两个环境渲染器(renderer)分别绑定两个透视 相机(perspective camera)，调整两个相机的平面距离，使距离a为0.06个单 位，以符合亚洲人的平均视距。如下图4所示。

而镜头到焦距之间的距离dis由以下迭代公式给出：

其中f₀为焦距，而dis′为上一次的计算结果，n为迭代次数。并且两个相机在渲染中交替渲染，可以使渲染性能增倍。

实施例1

本发明已经开发完成，现取其中一个模块进行实例说明：

1、VR眼镜，考虑普适性和用户成本，本项目推荐Cardboard或者符合Cardboard标准的VR眼镜。

2、移动端Chrome，本项目需要移动端浏览器运行，为了有更好体验，请在 手机终端安装最新版Chrome，一般在应用商店可以安装。

目前主流机型都已兼容WebGL，一些华为较老机型，例如：荣耀3C/4C/5C 还无法兼容。

具体步骤为：

(1)打开网站，用手机Chrome打开网站；

(2)Loading界面，场景和模型加载，敬请耐心等待；

(3)选择返回菜单，选中返回菜单，会回到初始菜单，选择下一个动物；

(4)激活VR场景，点击“cardboard”图标，进入VR场景，请将手机放入 VR眼镜里；

(5)浏览场景，请先随意浏览场景，然后你会在某一位置找到控制菜单， 菜单采用视点指针控制(环形)，将视点停在某一菜单项(比如白鹭鸶图标)，当 视点指针大小缩至0，表示菜单选中；

(6)进入动物介绍场景，选中特定动物(比如白鹭鸶)后，视角会飞入岛 内，会看到在岛上休息的动物；

(7)观察动物行为，将视点停在动物身上，等视点缩小消失后，会出现选 择菜单，用同样的方法选中菜单，可以看见动物摆出相应的菜单，再次选中动物， 会再次出现菜单；

(8)了解和动物相关的知识，选中“百科”菜单，会弹出介绍窗口，可以 观察与动物相关的内容。(9)选择返回菜单，选中返回菜单，会回到初始菜单， 选择下一个动物。

Claims (3)

1.一种新型VR百科课堂，其特征在于：

采用WebGL和HTML5为依托，建立在浏览器的基础之上，用户使用时，打开浏览器，输入网址，即可用VR眼镜在浏览器中全方位浏览场景，了解产品的内容，完全无需任何安装过程和升级过程；用户除了可以在通用入口登录网站，访问全部内容，甚至可以将网站部分内容通过其它接口推送至微信等其它社交软件；

(1)采用B/S模式，运行在浏览器环境中，可以跨平台，跨终端使用，使用***cardboard标准，用户可以通过Internet上的任意节点访问，不受地理位置的限制；

(2)使用独创的虚拟场景平台，使得每个用户使用网络处在同一虚拟环境中；

(3)独创的扫码互动模式，通过用户设备镜头扫描真实空间的二维码进而将真实空间坐标映射到虚拟空间；

(4)在VR环境中的可交互式UI；实现了VR交互式UI，包括视觉指针；电容开关和视点开关双响应；基于陀螺仪的VR相机；扁平化风格的选择菜单和加载条；

(5)使用GLSL制作了大量特殊效果，包括水体效果，包括涟漪算法，涟漪的实现不是采用波的传播方式，而是采用一种类似电场般迅速扑开的“场”，把整个水面纳入计算，根据距波源的距离、时间等模拟出某一时刻的顶点高度，烟雾效果，卡通渲染效果；

(6)开发了VR环境中的3D骨骼动画***，配合虚拟UI，完成了动画无缝切换，视角变换，事件传递多项功能；

(7)***前端分为兼容性测试模块，主要负责对浏览器进行WebVR兼容性检查，后端功能模块分为：(1)场景加载模块，负责和后台通信，接收由后台管理模块传回的场景模型；(2)虚拟UI，允许用户通过UI和场景进行互动，选择要了解的动物以及其它交互行为；(3)模型管理模块，管理模型加载以及相关信息，包括顶点，线，面，骨骼，动画，材质，音乐；(4)特效管理模块。

2.根据权利要求1所述的一种新型VR百科课堂，其特征在于：独创的虚拟场景平台为虚拟环境管理***：用户通过浏览器端登录该***，***允许多用户同时登录，***通过用户输入的信息(年龄、性别、职业等)自动为每个用户建立角色模型并绑定到虚拟场景平台中。

3.根据权利要求2所述的一种新型VR百科课堂，其特征在于：场景中的所有对象采用独创的分区树形管理模型，角色控件与每个角色绑定，角色区存在一个管理员角色(教师)，其他角色的权限受管理员角色分配，权限分为共有权限和私有权限，共有权限包括浏览、观察而私有权限可以对指定的目标对象进行操作控制，管理员一次只能为一个角色分配私有权限。