CN109242976A - 一种基于WebGL虚拟现实自动旋转展示的方法 - Google Patents
一种基于WebGL虚拟现实自动旋转展示的方法 Download PDFInfo
- Publication number
- CN109242976A CN109242976A CN201810872808.7A CN201810872808A CN109242976A CN 109242976 A CN109242976 A CN 109242976A CN 201810872808 A CN201810872808 A CN 201810872808A CN 109242976 A CN109242976 A CN 109242976A
- Authority
- CN
- China
- Prior art keywords
- scene
- camera
- virtual reality
- webgl
- button
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 31
- 230000000007 visual effect Effects 0.000 claims abstract description 14
- 238000010276 construction Methods 0.000 claims abstract description 4
- 230000000694 effects Effects 0.000 claims description 22
- 239000000463 material Substances 0.000 claims description 18
- 238000001514 detection method Methods 0.000 claims description 9
- 238000009877 rendering Methods 0.000 claims description 7
- 238000010422 painting Methods 0.000 claims description 5
- 230000008569 process Effects 0.000 claims description 5
- 230000004888 barrier function Effects 0.000 claims description 3
- 238000012937 correction Methods 0.000 claims description 3
- 239000011159 matrix material Substances 0.000 claims description 3
- 238000012544 monitoring process Methods 0.000 claims description 3
- 230000011514 reflex Effects 0.000 claims description 3
- 230000001360 synchronised effect Effects 0.000 claims description 3
- 230000004048 modification Effects 0.000 claims description 2
- 238000012986 modification Methods 0.000 claims description 2
- 239000004744 fabric Substances 0.000 claims 1
- 238000004215 lattice model Methods 0.000 claims 1
- 238000005516 engineering process Methods 0.000 abstract description 7
- 230000006870 function Effects 0.000 description 20
- 230000009471 action Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000007812 deficiency Effects 0.000 description 2
- 241000208340 Araliaceae Species 0.000 description 1
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 1
- 235000003140 Panax quinquefolius Nutrition 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 235000008434 ginseng Nutrition 0.000 description 1
- 239000011521 glass Substances 0.000 description 1
- 230000008439 repair process Effects 0.000 description 1
- 238000004088 simulation Methods 0.000 description 1
Classifications
-
- 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
- G06T3/00—Geometric image transformations in the plane of the image
- G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
- G06T3/4038—Image mosaicing, e.g. composing plane images from plane sub-images
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T3/00—Geometric image transformations in the plane of the image
- G06T3/60—Rotation of whole images or parts thereof
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T2207/00—Indexing scheme for image analysis or image enhancement
- G06T2207/10—Image acquisition modality
- G06T2207/10016—Video; Image sequence
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Computer Graphics (AREA)
- Computer Hardware Design (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开一种基于WebGL虚拟现实自动旋转展示的方法，利用WebGL技术并结合虚拟现实的全景照片或全景视频，以第一视角方式完全还原拍摄现场的真实画面，让使用者有身临其境的感觉。同时，提供了在虚拟场景内通过点击热点走动的功能，可以通过多个地点浏览整个场景的构造，让用户对场景了然于胸。另外，由于采用了自动旋转技术，用户在第一次使用全景播放器时可以更便捷地观看整张图片的全貌，以防用户误认为所看到的只是屏幕的固定部分而忽略了全景图片或视频的全景特性，是一种很好的创新方案，很有市场推广前景。
Description
技术领域
本发明涉及场景展示系统中图形展示技术领域，特别是涉及一种基于WebGL虚拟现实自动旋转展示的方法。
背景技术
WebGL是一种在任何可兼容的网页浏览器中渲染3D图形的JavaScript API，无需加装插件。通过WebGL的技术，只需要编写网页代码即可实现3D图像的展示。WebGL是基于OpenGL ES提供的3D图像API。可以利用JavaScript实现自动内存管理，WebGL使用GLSL作为着色器。
虚拟现实(Virtual Reality，简称VR)是利用计算机技术模拟产生三维的虚拟世界，让使用者及时、没有限制地感知虚拟空间内的事物。虚拟现实技术利用视觉、听觉、触觉、嗅觉等对人体进行全方位欺骗，达到让使用者“身临其境”的效果。近几年来，虚拟现实技术蓬勃发展，各大厂商也纷纷进入虚拟现实领域大展拳脚，该领域的投资并购不胜枚举。
如图1所示，现在市面上的场景展示系统大多是基于正常照片的滚动式的照片橱窗浏览系统，图片底部是一个可以左右滑动的照片选择器，用户可以点击最左边或最右边的按钮移动照片选择器中的照片，点选其中的某张照片可以改变选择器上方的展示大图。
现有的场景展示系统只能通过从某个固定角度拍摄的照片观看场景，具有较大的观察死角，无法客观了解场景的全貌，容易造成网上看到的与实地看到的场景有较大差距，实用性能不佳，存在着不足，不能满足社会高速发展的需求。
综上所述，针对现有技术的缺陷，特别需要一种基于WebGL虚拟现实自动旋转展示的方法，以解决现有技术的不足。
发明内容
针对原有的场景展示系统存在盲区，导致无法客观了解场景全貌，本发明提出一种基于WebGL虚拟现实自动旋转展示的方法，设计新颖，还原拍摄现场的真实画面，让使用者有身临其境的感觉，感观性能优，已解决现有技术的缺陷。
为了实现上述目的，本发明的技术方案如下：
一种基于WebGL虚拟现实自动旋转展示的方法，包括如下步骤：
步骤S1:通过拍摄设备到现场获取全景照片或视频；
步骤S2：利用WebGL中的three.js将拍摄到的全景照片构成3D场景的基础构建，采用开源的3D引擎库提升开发的效率；
步骤S3:构建多个全景场景切换，即进入房间后的走动效果；
步骤S4:构建全景场景的自动旋转；自动旋转的实现方式包含有电脑端、移动端；
步骤S5:实现虚拟现实分屏观看；
步骤S6:分屏模式下实现点击效果。
进一步，本发明获取展示素材的全景照片或视频的方式为：
1)、直接拍摄全景照片或视频；
2)、采用单反加鱼眼的模式拍摄多张照片，使用全景照片拼接软件拼合成一张全景图；
3)、通过多个运动相机同时拍摄多个角度的视频，再使用拼接软件拼合成一个全景视频。
进一步，本发明构建基础3D场景的步骤为：
调用THREE.Scene构建3D场景；
调用THREE.WebGLRender生成渲染器；
调用THREE.PerspectiveCamera创建透视摄像机；
调用THREE.TextureLoader将全景图片或者全景视频传入生成图片texture；
调用THREE.MeshBasicMaterial再将刚刚生成的texture作为map的参数传入生成全景材质；
调用THREE.SphereGeometry创建球形的顶点模型；
调用THREE.Mesh将球形定点模型与全景材质作为参数传入生成一个带材质的球形网格模型；
将camera与mesh归零处理,并将mesh的scale.z设置为-1，将camera与mesh添加到场景中；
创建function render函数，在其中调用WebGLRender(camera,scene)渲染场景；
调用requestAnimationFrame函数将render函数传入，做到每一次浏览器的渲染，必定调用render函数；
将包含代码的页面与素材部署到服务器；
打开浏览器访问网页地址，浏览场景展示系统。
进一步，本发明构建多个全景场景切换包括如下步骤：
调用THREE.Mesh THREE.MeshBasicMaterial THREE.PlaneGeometry构建一个点击按钮；
将按钮放置在全景球的某个合适位置，如走道上，门口；
调用THREE.Raycaster生成一条射线，对webGLRender.domElement监听click事件，记入鼠标点击位置，在鼠标位置生成一条射线，射线在发射过程中如果碰到按钮，会将第一个碰到的按钮返回，通过检测是否返回按钮可以判断按钮被点击了；
重复调用生成全景场景全景球的方法，传入第二张全景图，生成全景球2号；
在按钮上设置监听当按钮被点击的时候，切换两张全景图的material的透明度，图片1显示图片2消失，图片2显示图片1消失，营造一种叠画的效果。
进一步，本发明构建自动旋转为电脑端，电脑端在用户长时间静止不动即没有修改全景场景视角的情况下，自动触发电脑自动旋转机制，自动旋转全景图以营造一种用户自然环顾的效果；
构建自动旋转电脑端的步骤为：
全局调用一次setInterva，每隔1000ms触发事件以检测Camera的视角是否发生变化；
如果本次调用与上次调用的rotation参数值相同，则记录Camera此次未动；
累计连续3次Camera未动就触发自动选择条件；
编写autoRotation函数，设置偏移量Math.PI*0.01，在每次的render过程中调用autoRotation函数，给camera的rotation.y参数添加偏移量；
再次监测render.domElement函数的mousedown事件，当mousedown事件触发时停止调用autoRotation。
进一步，本发明构建自动旋转为移动端，移动端包含有手机端或者平板端，利用移动设备自带的陀螺仪传感器，通过旋转手机调整场景视角；
构建自动旋转移动端的步骤为：
在window中监听orientation事件，获取陀螺仪的alpha,beta,gamma参数；
在每次render过程中将获取的alpha,beta,gamma参数赋值给camera.rotation可以实现camera的自动旋转。
进一步，所述实现虚拟现实分屏观看的步骤为：
调用THREE.PerspectiveCamera创建两个cameraLeft，cameraRight；
根据Anaglyph 3D和Parallax barrier理论修正cameraLeft和cameraRight投影矩阵；
在render时将普通camera上的matrixWorld拷贝到cameraLeft与cameraRight以确保三个相机同步；
重写render函数，调用WebGLRender对象，传入cameraLeft和scene两个参数，渲染到画布的左半边，然后调用webGLRender对象，传入cameraRight和scene两个参数，渲染到画布的右半边，形成双目的效果。
进一步，分屏模式下实现点击效果的步骤为：
重新修改之前的射线代码，添加检测设备的方法；
如果检测设备是电脑，则保持代码不变；
如果检测设备是手机，则将射线的发射点由mouse的点击位置修改为camera的注视点，模拟从视野正中心点击的动作；
与电脑相同，当射线接触到按钮时判定按钮被点击。
本发明的有益效果是：虚拟现实特性能产生身临其境的体验效果，可以运用在不同的领域。如看房，使得浏览者既减少了往返实地看房所花费的时间又如同实地看房一样可以非常具体地了解房间特性，从而给予浏览者极大的便利性，智能性能优，感观效果好，也可以应用于其他行业方案中，设计新颖，是一种很好的创新方案，很有市场推广前景。
附图说明
下面结合附图和具体实施方式来详细说明本发明：
图1为现有展示系统图；
图2为本发明方法的流程图。
图3为本发明的图片处理过程图。
图4为本发明的获取全景影片或视频结构框图；
图5为本发明的移动端旋转结构图；
图6为本发明的实施例全景图；
图7为本发明的camera在中心的全景图；
图8为本发明一个角度展示图；
图9为本发明的另一个角度展示图。
具体实施方式
为了使本发明实现的技术手段、创作特征、达成目的与功效易于明白了解，下面结合具体图示，进一步阐述本发明。
参见图2、图3，本发明的具体实施方式为：
获取全景照片或视频；
通过诸如三星Gear360之类的全景照片拍摄设备，可用三种方式获取展示素材：参见图4，
1、直接拍摄全景照片或视频；
2、采用单反加鱼眼的模式拍摄多张照片，使用全景照片拼接软件拼合成一张全景图；
3、通过多个运动相机同时拍摄多个角度的视频，再使用拼接软件拼合成一个全景视频,运行相机可以采用GOPRO。
进一步，利用WebGL(three.js)将全景照片构成3D场景基础构建；
WebGL只提供基础API，直接用来做开发不够便捷，故我们使用3D引擎库来减少开发的重复工作量以加快进度。
构建3D场景的步骤：
调用THREE.Scene构建3D场景；
调用THREE.WebGLRender生成渲染器；
调用THREE.PerspectiveCamera创建透视摄像机；
调用THREE.TextureLoader将全景图片或者全景视频传入生成图片texture；
调用THREE.MeshBasicMaterial再将刚刚生成的texture作为map的参数传入生成全景材质；
调用THREE.SphereGeometry创建球形的顶点模型；
调用THREE.Mesh将球形定点模型与全景材质作为参数传入生成一个带材质的球形网格模型；
将camera与mesh归零处理,并将mesh的scale.z设置为-1，将camera与mesh添加到场景中；
创建function render函数，在其中调用webGLRender(camera,scene)渲染场景；
调用requestAnimationFrame函数将render函数传入，做到每一次浏览器的渲染，必定调用render函数；
将包含代码的页面与素材部署到服务器；
打开浏览器访问网页地址，浏览场景展示系统。
进一步，高级构建，构建多个全景场景直接切换。
上一步构建了场景展示系统中最基础的展示部分，但要实现全景图来回的直接切换，即进入场景后的走动效果，还需要做一些扩展工作。
调用THREE.Mesh THREE.MeshBasicMaterial THREE.PlaneGeometry构建一个点击按钮；
将按钮放置在全景球的某个合适位置，如走道上，门口。
调用THREE.Raycaster生成一条射线，对webGLRender.domElement监听click事件。记入鼠标点击位置，在鼠标位置生成一条射线，射线在发射过程中如果碰到按钮，会将第一个碰到的按钮返回，通过检测是否返回按钮可以判断按钮被点击了。
重复调用生成全景场景全景球的方法，传入第二张全景图，生成全景球2号；
在按钮上设置监听当按钮被点击的时候，切换两张全景图的material的透明度，图片1显示图片2消失，图片2显示图片1消失。营造一种叠画的效果。
进一步，高级构建，实现全景场景的自动旋转；
在用WebGL构建的虚拟现实自动选择场景展示系统中，自动旋转系统是非常关键的技术点。
有两种方式实现自动旋转：
第一种是在电脑端，在用户长时间静止不动即没有修改全景场景视角的情况下，自动触发电脑自动旋转机制，自动旋转全景图以营造一种用户自然环顾的效果。
第二种是在手机端或者平板端，利用移动设备自带的陀螺仪传感器，通过旋转手机调整场景视角，这也是实现虚拟现实观览的重要技术。
电脑端实现：
全局调用一次setInterva，每隔1000ms触发事件以检测Camera的视角是否发生变化；
如果本次调用与上次调用的rotation参数值相同，则记录Camera此次未动；
累计连续3次Camera未动就触发自动选择条件；
编写autoRotation函数，设置偏移量Math.PI*0.01，在每次的render过程中调用autoRotation函数，给camera的rotation.y参数添加偏移量
再次监测render.domElement函数的mousedown事件，当mousedown事件触发时停止调用autoRotation。
参见附图5，手机端实现：
在window中监听orientation事件，获取陀螺仪的alpha,beta,gamma参数；
在每次render过程中将获取的alpha,beta,gamma参数赋值给camera.rotation可以实现camera的自动旋转。
进一步，高级构建，实现虚拟现实分屏观看
为了实现虚拟现实“身临其境”的观看体验，首先我们需要实现分屏观看系统，然后结合上一步中的陀螺仪自动旋转功能，再配合虚拟现实眼镜，就可以构建出完整的虚拟现实自动选择场景展示系统。
构建分屏流程；
调用THREE.PerspectiveCamera创建两个cameraLeft，cameraRight；
根据Anaglyph 3D和Parallax barrier理论修正cameraLeft和cameraRight投影矩阵；
在render时将普通camera上的matrixWorld拷贝到cameraLeft与cameraRight以确保三个相机同步；
重写render函数，调用WebGLRender对象，传入cameraLeft和scene两个参数，渲染到画布的左半边，然后调用webGLRender对象，传入cameraRight和scene两个参数，渲染到画布的右半边，形成双目的效果。
进一步，高级构建，分屏模式下实现点击效果；
在上面步骤中我们实现了电脑端的点击工作，在手机端同样需要在多个全景图间切换，也需要在分屏模式下实现点击动作，原理与电脑端基本相同。
重新修改之前的射线代码，添加检测设备的方法；
如果检测设备是电脑，则保持代码不变；
如果检测设备是手机，则将射线的发射点由mouse的点击位置修改为camera的注视点，模拟从视野正中心点击的动作；
与电脑端相同，当射线接触到按钮时判定按钮被点击。
参见图6、图7、图8、图9，本发明利用WebGL技术并结合虚拟现实的全景照片或全景视频，以第一视角方式完全还原拍摄现场的真实画面，让使用者有"身临其境"的感觉。同时，提供了在虚拟场景内通过点击热点走动的功能，可以通过多个地点浏览整个场景的构造，让用户对场景了然于胸。另外，由于采用了自动旋转技术，用户在第一次使用全景播放器时可以更便捷地观看整张图片的全貌，以防用户误认为所看到的只是屏幕的固定部分而忽略了全景图片或视频的全景特性。
本发明的有益效果是：虚拟现实特性能产生身临其境的体验效果，可以运用在不同的领域。如看房，使得浏览者既减少了往返实地看房所花费的时间又如同实地看房一样可以非常具体地了解房间特性，从而给予浏览者极大的便利性，智能性能优，感观效果好，也可以应用于其他行业方案中，设计新颖，是一种很好的创新方案，很有市场推广前景。
本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等同物界定。
Claims (8)
1.一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：
包括如下步骤：
步骤S1:通过拍摄设备到现场获取全景照片或视频；
步骤S2：利用WebGL中的three.js将拍摄到的全景照片构成3D场景的基础构建，采用3D引擎库提升开发的效率；
步骤S3:构建多个全景场景切换，即进入房间后的走动效果；
步骤S4:构建全景场景的自动旋转；自动旋转的实现方式包含有电脑端、移动端；
步骤S5:实现虚拟现实分屏观看；
步骤S6:分屏模式下实现点击效果。
2.根据权利要求1所述一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：获取展示素材的全景照片或视频的方式为：
1)、直接拍摄全景照片或视频；
2)、采用单反加鱼眼的模式拍摄多张照片，使用全景照片拼接软件拼合成一张全景图；
3)、通过多个运动相机同时拍摄多个角度的视频，再使用拼接软件拼合成一个全景视频。
3.根据权利要求1所述一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：构建基础3D场景的步骤为：
调用THREE.Scene构建3D场景；
调用THREE.WebGLRender生成渲染器；
调用THREE.PerspectiveCamera创建透视摄像机；
调用THREE.TextureLoader将全景图片或者全景视频传入生成图片texture；
调用THREE.MeshBasicMaterial再将刚刚生成的texture作为map的参数传入生成全景材质；
调用THREE.SphereGeometry创建球形的顶点模型；
调用THREE.Mesh将球形定点模型与全景材质作为参数传入生成一个带材质的球形网格模型；
将camera与mesh归零处理,并将mesh的scale.z设置为-1，将camera与mesh添加到场景中；
创建function render函数，在其中调用webGLRender(camera,scene)渲染场景；
调用requestAnimationFrame函数将render函数传入，做到每一次浏览器的渲染，必定调用render函数；
将包含代码的页面与素材部署到服务器；
打开浏览器访问网页地址，浏览场景展示系统。
4.根据权利要求1所述一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：构建多个全景场景切换包括如下步骤：
调用THREE.Mesh THREE.MeshBasicMaterial THREE.PlaneGeometry构建一个点击按钮；
将按钮放置在全景球的某个合适位置，如走道上，门口；
调用THREE.Raycaster生成一条射线，对webGLRender.domElement监听click事件，记入鼠标点击位置，在鼠标位置生成一条射线，射线在发射过程中如果碰到按钮，会将第一个碰到的按钮返回，通过检测是否返回按钮可以判断按钮被点击了；
重复调用生成全景场景全景球的方法，传入第二张全景图，生成全景球2号；
在按钮上设置监听当按钮被点击的时候，切换两张全景图的material的透明度，图片1显示图片2消失，图片2显示图片1消失，营造一种叠画的效果。
5.根据权利要求1所述一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：构建自动旋转为电脑端，电脑端在用户长时间静止不动即没有修改全景场景视角的情况下，自动触发电脑自动旋转机制，自动旋转全景图以营造一种用户自然环顾的效果；
构建自动旋转电脑端的步骤为：
全局调用一次setInterva，每隔1000ms触发事件以检测Camera的视角是否发生变化；
如果本次调用与上次调用的rotation参数值相同，则记录Camera此次未动；
累计连续3次Camera未动就触发自动旋转条件；
编写autoRotation函数，设置偏移量Math.PI*0.01，在每次的render过程中调用autoRotation函数，给camera的rotation.y参数添加偏移量；
再次监测render.domElement函数的mousedown事件，当mousedown事件触发时停止调用autoRotation。
6.根据权利要求1所述一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：构建自动旋转为移动端，移动端包含有手机端或者平板端，利用移动设备自带的陀螺仪传感器，通过旋转手机调整场景视角；
构建自动旋转移动端的步骤为：
在window中监听orientation事件，获取陀螺仪的alpha,beta,gamma参数；
在每次render过程中将获取的alpha,beta,gamma参数赋值给camera.rotation可以实现camera的自动旋转。
7.根据权利要求1所述一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：实现虚拟现实分屏观看的步骤为：
调用THREE.PerspectiveCamera创建两个cameraLeft，cameraRight；
根据Anaglyph 3D和Parallax barrier理论修正cameraLeft和cameraRight投影矩阵；
在render时将普通camera上的matrixWorld拷贝到cameraLeft与cameraRight以确保三个相机同步；
重写render函数，调用WebGLRender对象，传入cameraLeft和scene两个参数，渲染到画布的左半边，然后调用webGLRender对象，传入cameraRight和scene两个参数，渲染到画布的右半边，形成双目的效果。
8.根据权利要求1所述一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：分屏模式下实现点击效果的步骤为：
重新修改之前的射线代码，添加检测设备的方法；
如果检测设备是电脑端，则保持代码不变；
如果检测设备是手机，则将射线的发射点由mouse的点击位置修改为camera的注视点，模拟从视野正中心点击的动作；
与电脑端相同，当射线接触到按钮时判定按钮被点击。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810872808.7A CN109242976A (zh) | 2018-08-02 | 2018-08-02 | 一种基于WebGL虚拟现实自动旋转展示的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810872808.7A CN109242976A (zh) | 2018-08-02 | 2018-08-02 | 一种基于WebGL虚拟现实自动旋转展示的方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109242976A true CN109242976A (zh) | 2019-01-18 |
Family
ID=65072859
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810872808.7A Pending CN109242976A (zh) | 2018-08-02 | 2018-08-02 | 一种基于WebGL虚拟现实自动旋转展示的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109242976A (zh) |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110910515A (zh) * | 2019-12-02 | 2020-03-24 | 杭州安恒信息技术股份有限公司 | 一种三维场景中物体自转及缩放的实现方法、装置及设备 |
| CN111145343A (zh) * | 2019-12-30 | 2020-05-12 | 广东省实验动物监测所 | 一种离体心脏灌流三维显示方法及系统 |
| CN111586304A (zh) * | 2020-05-25 | 2020-08-25 | 重庆忽米网络科技有限公司 | 一种基于5g及vr技术的全景摄像系统及方法 |
| CN111800544A (zh) * | 2020-07-03 | 2020-10-20 | 中图云创智能科技(北京)有限公司 | 一种全景动态屏保技术 |
| CN112037341A (zh) * | 2020-08-26 | 2020-12-04 | 北京掌中飞天科技股份有限公司 | 基于Web前端处理VR全景交互功能的方法及装置 |
| CN112184920A (zh) * | 2020-10-12 | 2021-01-05 | 中国联合网络通信集团有限公司 | 基于ar的滑雪盲区显示方法、装置及存储介质 |
| CN112464126A (zh) * | 2020-12-14 | 2021-03-09 | 厦门市美亚柏科信息股份有限公司 | 一种基于Threejs生成全景图表的方法、终端设备及存储介质 |
| CN112596655A (zh) * | 2020-12-28 | 2021-04-02 | 深圳壹账通创配科技有限公司 | 全景图展示及操作方法、装置、计算机设备及存储介质 |
| CN112650418A (zh) * | 2021-01-18 | 2021-04-13 | 海信视像科技股份有限公司 | 一种显示设备 |
| CN113282741A (zh) * | 2021-03-24 | 2021-08-20 | 北京明略软件系统有限公司 | 知识图谱可视化方法、装置、设备及计算机可读介质 |
| CN117793325A (zh) * | 2024-02-26 | 2024-03-29 | 南京维赛客网络科技有限公司 | 步进式漫游中全景图的切换方法、系统及存储介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106325517A (zh) * | 2016-08-29 | 2017-01-11 | 袁超 | 一种基于虚拟现实的目标对象触发方法、系统和穿戴设备 |
| CN106897108A (zh) * | 2017-01-20 | 2017-06-27 | 华南理工大学 | 一种基于WebVR的虚拟现实全景漫游的实现方法 |
| CN107679188A (zh) * | 2017-09-30 | 2018-02-09 | 东莞市同立方智能科技有限公司 | 一种在网页中加载3d模型的方法 |
| US20180130122A1 (en) * | 1999-08-06 | 2018-05-10 | Catherine G. Lin-Hendel | System and method for constructing and displaying active virtual reality cyber malls, show rooms, galleries, stores, museums, and objects within |
| CN108038726A (zh) * | 2017-12-11 | 2018-05-15 | 北京小米移动软件有限公司 | 物品展示方法及装置 |
-
2018
- 2018-08-02 CN CN201810872808.7A patent/CN109242976A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180130122A1 (en) * | 1999-08-06 | 2018-05-10 | Catherine G. Lin-Hendel | System and method for constructing and displaying active virtual reality cyber malls, show rooms, galleries, stores, museums, and objects within |
| CN106325517A (zh) * | 2016-08-29 | 2017-01-11 | 袁超 | 一种基于虚拟现实的目标对象触发方法、系统和穿戴设备 |
| CN106897108A (zh) * | 2017-01-20 | 2017-06-27 | 华南理工大学 | 一种基于WebVR的虚拟现实全景漫游的实现方法 |
| CN107679188A (zh) * | 2017-09-30 | 2018-02-09 | 东莞市同立方智能科技有限公司 | 一种在网页中加载3d模型的方法 |
| CN108038726A (zh) * | 2017-12-11 | 2018-05-15 | 北京小米移动软件有限公司 | 物品展示方法及装置 |
Non-Patent Citations (3)
| Title |
|---|
| LITTLE山林: "开启自动旋转", 《PANO2VR中文教程网，HTTPS://WWW.PANO2VR8.COM/%E5%BC%80%E5%90%AF%E8%87%AA%E5%8A%A8%E6%97%8B%E8%BD%AC/》 * |
| SOAANYIP: "WebVR-Boilerplate-CN", 《GITHUB,WEBVR-BOILERPLATE-CN项目》 * |
| 夏金瑶: "基于WebGL的EAST可视化系统", 《中国博士学位论文全文数据库，工程科技Ⅱ辑》 * |
Cited By (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110910515B (zh) * | 2019-12-02 | 2023-04-25 | 杭州安恒信息技术股份有限公司 | 一种三维场景中物体自转及缩放的实现方法、装置及设备 |
| CN110910515A (zh) * | 2019-12-02 | 2020-03-24 | 杭州安恒信息技术股份有限公司 | 一种三维场景中物体自转及缩放的实现方法、装置及设备 |
| CN111145343A (zh) * | 2019-12-30 | 2020-05-12 | 广东省实验动物监测所 | 一种离体心脏灌流三维显示方法及系统 |
| CN111586304A (zh) * | 2020-05-25 | 2020-08-25 | 重庆忽米网络科技有限公司 | 一种基于5g及vr技术的全景摄像系统及方法 |
| CN111586304B (zh) * | 2020-05-25 | 2021-09-14 | 重庆忽米网络科技有限公司 | 一种基于5g及vr技术的全景摄像系统及方法 |
| CN111800544A (zh) * | 2020-07-03 | 2020-10-20 | 中图云创智能科技(北京)有限公司 | 一种全景动态屏保技术 |
| CN112037341A (zh) * | 2020-08-26 | 2020-12-04 | 北京掌中飞天科技股份有限公司 | 基于Web前端处理VR全景交互功能的方法及装置 |
| CN112184920A (zh) * | 2020-10-12 | 2021-01-05 | 中国联合网络通信集团有限公司 | 基于ar的滑雪盲区显示方法、装置及存储介质 |
| CN112184920B (zh) * | 2020-10-12 | 2023-06-06 | 中国联合网络通信集团有限公司 | 基于ar的滑雪盲区显示方法、装置及存储介质 |
| CN112464126A (zh) * | 2020-12-14 | 2021-03-09 | 厦门市美亚柏科信息股份有限公司 | 一种基于Threejs生成全景图表的方法、终端设备及存储介质 |
| CN112464126B (zh) * | 2020-12-14 | 2022-07-15 | 厦门市美亚柏科信息股份有限公司 | 一种基于Threejs生成全景图表的方法、终端设备及存储介质 |
| CN112596655A (zh) * | 2020-12-28 | 2021-04-02 | 深圳壹账通创配科技有限公司 | 全景图展示及操作方法、装置、计算机设备及存储介质 |
| CN112650418A (zh) * | 2021-01-18 | 2021-04-13 | 海信视像科技股份有限公司 | 一种显示设备 |
| CN112650418B (zh) * | 2021-01-18 | 2022-11-29 | 海信视像科技股份有限公司 | 一种显示设备 |
| CN113282741A (zh) * | 2021-03-24 | 2021-08-20 | 北京明略软件系统有限公司 | 知识图谱可视化方法、装置、设备及计算机可读介质 |
| CN117793325A (zh) * | 2024-02-26 | 2024-03-29 | 南京维赛客网络科技有限公司 | 步进式漫游中全景图的切换方法、系统及存储介质 |
| CN117793325B (zh) * | 2024-02-26 | 2024-04-19 | 南京维赛客网络科技有限公司 | 步进式漫游中全景图的切换方法、系统及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109242976A (zh) | 一种基于WebGL虚拟现实自动旋转展示的方法 | |
| CN106210861B (zh) | 显示弹幕的方法及系统 | |
| CN105404441B (zh) | 可视化相同环境的表面数据和全景图像数据的方法 | |
| CN109064542B (zh) | 三维模型表面空洞填补方法和装置 | |
| CN104349155B (zh) | 模拟立体图像显示方法及显示设备 | |
| CN101189643A (zh) | 3d图像生成和显示系统 | |
| CN104243961A (zh) | 多视角影像的显示系统及方法 | |
| CN110728755B (zh) | 场景间漫游、模型拓扑创建、场景切换方法及系统 | |
| Fender et al. | Optispace: Automated placement of interactive 3d projection mapping content | |
| JP2008520052A5 (zh) | ||
| CN108043027B (zh) | 存储介质、电子装置、游戏画面的显示方法和装置 | |
| CN106780759A (zh) | 基于图片构建场景立体全景图的方法、装置及vr系统 | |
| WO2023207452A1 (zh) | 基于虚拟现实的视频生成方法、装置、设备及介质 | |
| CN104616342A (zh) | 序列帧与全景的相互转换方法 | |
| Vangorp et al. | Perception of visual artifacts in image‐based rendering of façades | |
| US20230206511A1 (en) | Methods, systems, and media for generating an immersive light field video with a layered mesh representation | |
| JP4996922B2 (ja) | 立体映像化 | |
| Pietroszek et al. | Volumetric capture for narrative films | |
| CN101090460A (zh) | 一种在多幅全景图之间切换的方法 | |
| Takatori et al. | Large-scale projection-based immersive display: The design and implementation of largespace | |
| Pietroszek | Volumetric filmmaking | |
| CN108510433B (zh) | 空间展示方法、装置及终端 | |
| Li et al. | Extending 6-dof vr experience via multi-sphere images interpolation | |
| JP7296735B2 (ja) | 画像処理装置、画像処理方法及びプログラム | |
| CN112256317A (zh) | 一种虚拟现实沉浸式大屏追踪系统的快速构建方法、介质及设备 |
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 | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20190118 |