CN107680151A

CN107680151A - 增强Web3D中的指示性动画实现能力的方法及其应用

Info

Publication number: CN107680151A
Application number: CN201710902471.5A
Authority: CN
Inventors: 曹阳
Original assignee: Qianxun Position Network Co Ltd
Current assignee: Qianxun Position Network Co Ltd
Priority date: 2017-09-27
Filing date: 2017-09-27
Publication date: 2018-02-09

Abstract

一种增强Web3D中的指示性动画实现能力的方法，其特征在于通过Dom元素屏幕坐标和实体空间三维坐标动态绑定，将HTML5+CSS3构建指示性动画应用在web3D场景。本发明的方法通过引入HTML5+CSS3便捷的动画机制来提高WebGL3D应用中指示性动画开发效率和呈现效果，实现了在无人机监管实时呈现动画效果中的应用。

Description

增强Web3D中的指示性动画实现能力的方法及其应用

技术领域

本发明涉及一种动画呈现技术，尤其涉及一种增强Web3D中的指示性动画实现能力的方法，以及应用。

背景技术

随着新一代Web标准推出，canvas作为HTML5标签元素，使前端可以在不安装插件前提下实现2D图形绘制和动画创建。WebGL将JavaScript和OpenGL ES 2.0结合在一起，通过双向绑定为HTML5Canvas提供GPU 3D渲染加速，使浏览器端具备构建无插件跨平台复杂web3D应用的能力。近年来，基于WebGL开发的web3D应用呈现出井喷式增长，在地质救灾、智能家居、网页游戏、互联网销售等领域都发挥着越来越大的价值。

几乎在所有web3D应用场景中，指示性动画都扮演着重要的辅助角色，如地质救灾中危险区域告警动画、网页游戏中道具发光动画以及单车、汽车、无人机等移动设备实时位置提示动画等。然而因为WebGL接口较底层，需要熟悉计算机图形学相关知识体系才能从事开发，基于WebGL开发指示性动画存在实现复杂度高、上手难度大且开发周期长等问题。

动画属性作为CSS3新引入的几个重要特性之一，与传统JavaScript驱动的动画实践比较，它可提供更好的呈现性能。同时基于简单易用的语法规则，CSS3只需写数行代码即可高效便捷的实现一些复杂动画效果，目前在web2D应用中大部分指示性动画都可以通过CSS3动画属性来实现。

题为《基于WebGL和HTML5的网页3D动画的设计和实现》的文章，通过描述WebGL的工作流程公开了如何基于WebGL和HTML5实现网页3D动画效果。通过论证得出WebGL构建Web交互式三维动画存在两大优势：第一它通过Html脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持；第二它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的，可移植性好。

现有技术构建web3D应用中指示性动画几乎全部采用以WebGL为主的3D引擎来实现。WebGL作为OpenGL ES 2.0和JavaScript结合的产物，继承了openGL在3D应用领域强大的动画制作能力，但WebGL的接口非常底层、封装度极低，使用者想基于WebGL实现指示性动画需要熟悉openGL整个渲染着色机制以及与JavaScript、HTML5canvas协作的数据处理流程，同时WebGL大部分接口直接继承于openGL，这要求使用者对计算机图形学相关知识体系有深刻了解。综上可知，使用WebGL实现指示性动画存在技术门槛高、实现复杂度高以及开发周期长等问题。

发明内容

本发明的一个目的在于提供了一种增强Web3D中的指示性动画实现能力的方法，解决基于WebGL实现指示性动画存在实现复杂度高、上手难度大且开发周期长等问题。

本发明的另一个目的在于提供了一种增强Web3D中的指示性动画实现能力的方法在无人机闯入禁飞区告警场景下的应用。

WebGL的出现使浏览器端具备开发复杂web3D应用的能力，在3D应用中指示性动画(如危险告警、位置标注、状态提示等)具有重要应用价值。由于接口较底层且需要开发者具备计算机图形学相关知识背景，本发明通过引入HTML5+CSS3便捷的动画机制来提高WebGL3D应用中指示性动画开发效率和呈现效果。

本发明增强Web3D中的指示性动画实现能力的方法，通过Dom元素屏幕坐标和实体空间三维坐标动态绑定，将HTML5+CSS3指示性动画构建能力应用在web3D场景，还将HTML5+CSS3动画在三维场景中实现视觉遮挡效果的呈现。

一种增强Web3D中的指示性动画实现能力的方法，包括

步骤S1：使用HTML5+CSS3动画创建指示性动画；

步骤S2：换算三维空间坐标和二维屏幕坐标之间对应关系，实现指示性动画和三维空间实体位置关联；

步骤S3：单独或同时进行如下操作：

步骤S31：动画属性的实时监测，具体方法如：实时检测空间实体以及三维相机位置变化情况，同步更新指示性动画屏幕坐标位置，并结合应用场景调整动画属性信息，包括：但不限于尺寸、频率和颜色等；

步骤S32：动画视觉遮挡实时监测；具体方法如：通过模拟单一事件，对三维空间实体可见性进行判断，解决其所关联的指示性动画视觉遮挡；

步骤S33：动画在屏幕的溢出实时监测；在对指示性动画屏幕坐标进行更新前，判断移动的位置是否溢出屏幕范围，若溢出屏幕则指示性动画设为不可见，若未溢出屏幕指示性动画设为可见，以规避屏幕溢出滚动条以及屏幕抖动问题。

本发明提供的方法，利用HTML5+CSS3强大便捷的动画制作能力弥补前端三维应用中以WebGL为代表的三维引擎构建指示性动画实现复杂度高、上手难度大且开发周期长等问题，实现了在无人机监管实时呈现动画效果中的应用。

附图说明

图1为本发明增强Web3D中的指示性动画实现能力的方法流程图；

图2为本发明提供的方法用于无人机闯入禁飞区告警的动画渐变效果示意图；

图3a为无人机告警的动画和无人机三维实体空间位置关联结果图；

图3b为图3a局部放大效果图；

图4a为无人机监管中未使用本发明方法的场景效果图；

图4b为无人机监管中使用本发明方法的场景效果图。

具体实施方式

下面结合附图对本发明网络RTK解算方法作进一步详细说明。

图1为本发明增强Web3D中的指示性动画实现能力的方法流程图，如图1所示，本发明增强Web3D中的指示性动画实现能力的方法包括：

步骤S1：使用HTML5+CSS3动画创建指示性动画；

步骤S3：单独或同时进行如下操作：

步骤S33：动画在屏幕的溢出实时监测；在对指示性动画屏幕坐标进行更新前，判断移动的位置是否溢出屏幕范围，若溢出屏幕….，若未溢出屏幕…，以规避屏幕溢出滚动条以及屏幕抖动问题。

步骤S1：HTML5+CSS3指示性动画构建，是通过CSS3引入了动画特性，使HTML5创建的dom元素样式随时间渐变。指示性动画创建步骤包括：1)通过HTML5创建div dom元素，作为承载CSS3动画容器；2)通过CSS3@keyframes规则以及animation属性构建指示性动画效果，通过元素选择器绑定到对应div容器上。具体动画样式风格以及渐变效果需结合特定应用场景设计，以无人机闯入禁飞区告警场景为例，经无人机告警动画经HTML5+CSS3指示性动画构建形成渐变效果示意图(参见图2)。

三维空间实体位置均由三维坐标表示，而基于HTML5+CSS3创建的指示性动画本质上属于dom元素，其位置由二维屏幕像素坐标表示。因此将指示性动画应用到三维场景首先要解决屏幕坐标和三维空间坐标之间的转换问题。目前WebGL以及由其衍生的其它三维引擎(如：cesium、three.js等)都提供了两种坐标之间的转换方法。

指示性动画与三维空间实体位置关联的步骤包括：1)建立指示性动画和三维空间实体之间的逻辑映射关系；2)通过前端三维引擎提供的坐标转换接口，实现三维实体空间坐标向二维屏幕坐标的转换；3)将转换后的屏幕坐标赋予指示性动画挂载的dom元素，完成其与对应实体的空间位置关联。以无人机监管应用场景为例，创建的指示性动画与三维空间实体位置关联的结果参见图3a和图3b。

基于HTML5+CSS3创建的指示性动画通过屏幕坐标与实体关联，三维场景下当进行相机缩放平移旋转等操作时或者三维实体空间位置动态变化时(如：飞行中的无人机)，实体在屏幕上的坐标也会相应发生变化，从而导致与之对应的指示性动画在视觉上出现位置偏离。

同时在一些特定应用场景中指示性动画的尺寸、频率、颜色等属性也会随着三维实体位置远近变化而变化，因此还应同步更新相关属性信息。

为消除这种偏离，需对动画属性的实时监测，实时同步二者屏幕位置，具体步骤包括：1)监听浏览器刷新动作，在每一次刷新前监测三维空间实体屏幕位置是否发生变化，如果发生变化，根据更新二维坐标，同步更新三维实体空间位置；2)实体屏幕位置发生变化时立即同步与之对应的指示性动画的属性，如：位置，尺寸、频率和颜色等。

深度是三维空间很重要的属性，在三维空间中同一方向远处实体将会被近处实体遮挡，WebGL采用深度检测机制来解决远近物体视觉遮挡问题，使三维呈现更符合认知同时简化冗余重绘开销。由于指示性动画本身属于二维dom元素，无法直接使用WebGL的深度检测机制来解决遮挡问题，这里通过指示性动画所关联的三维实体可见性来间接解决其遮挡问题。具体步骤包括：1)开启WebGL深度检测机制；2)换算三维实体屏幕坐标；3)输入步骤2)的屏幕坐标，模拟屏幕点击选择事件；4)当三维实体被选中则表示未遮挡，其对应的指示性动画Dom元素设置为可见，反之设置为隐藏。以无人机监管应用场景为例，图4a为无人机监管中未使用本发明方法的场景效果图，图4b为无人机监管中使用本发明方法的场景效果图。图4a中，无人机虽然被建筑物遮挡仍在动画中被展示出来，这显然有悖于视觉上的感受。由于使用了本实施例的方法后，被建筑物遮挡的无人机，不在动画中展示，增强了动画的真实感受。

指示性动画和三维空间实体位置实时绑定后，当空间实体三维坐标超出屏幕范围时，指示性动画在做位置同步时获取的像素坐标溢出屏幕范围，网页会出现滚动条并伴随短暂晃动，当三维实体在屏幕边缘来回移动时，网页将频繁晃动，极大影响用户体验和浏览器刷新效率。因此在做指示性动画屏幕位置更新前需做范围溢出判断，当溢出屏幕范围时指示性动画设为不可见。

本实施例提供的方法而展示的各个效果图，可采用基于WebGL的三维开源框架Cesium、HTML5、CSS3以及基于ES6语法标准的JavaScript搭配完成，能够达到最佳实施效果。

以上已对本发明创造的较佳实施例进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明创造精神的前提下还可作出种种的等同的变型或替换，这些等同的变型或替换均包含在本申请权利要求所限定的范围内。

Claims

1.一种增强Web3D中的指示性动画实现能力的方法，其特征在于通过Dom元素屏幕坐标和实体空间三维坐标动态绑定，将HTML5+CSS3构建指示性动画应用在web3D场景。

2.根据权利要求1所述的增强Web3D中的指示性动画实现能力的方法，其特征在于还将HTML5+CSS3动画在三维场景中实现视觉遮挡效果的呈现。

3.一种增强Web3D中的指示性动画实现能力的方法，其特征在于包括：

步骤S1：使用HTML5+CSS3动画创建指示性动画；

步骤S3：单独或同时进行如下操作：

步骤S31：动画属性的实时监测；

步骤S32：动画视觉遮挡实时监测；

步骤S33：动画在屏幕的溢出实时监测。

4.根据权利要求3所述的增强Web3D中的指示性动画实现能力的方法，其特征在于创建所述的指示性动画包括：1)通过HTML5创建div dom元素，作为承载CSS3动画容器；2)通过CSS3@keyframes规则以及animation属性构建指示性动画效果，通过元素选择器绑定到对应div容器上。

5.根据权利要求3所述的增强Web3D中的指示性动画实现能力的方法，其特征在于所述的指示性动画与三维空间实体位置关联的步骤包括：1)建立指示性动画和三维空间实体之间的逻辑映射关系；2)通过前端三维引擎提供的坐标转换接口，实现三维实体空间坐标向二维屏幕坐标的转换；3)将转换后的屏幕坐标赋予指示性动画挂载的dom元素，完成其与对应实体的空间位置关联。

6.根据权利要求3所述的增强Web3D中的指示性动画实现能力的方法，其特征在于所述的动画属性的实时监测包括：1)监听浏览器刷新动作，在每一次刷新前监测三维空间实体屏幕位置是否发生变化，如果发生变化，根据更新二维坐标，同步更新三维实体空间位置；2)实体屏幕位置发生变化时立即同步与之对应的指示性动画的属性。

7.根据权利要求1所述的增强Web3D中的指示性动画实现能力的方法，其特征在于，所述的动画视觉遮挡实时监测包括：1)开启WebGL深度检测机制；2)换算三维实体屏幕坐标；3)输入步骤2)的屏幕坐标，模拟屏幕点击选择事件；4)当三维实体被选中则表示未遮挡，其对应的指示性动画Dom元素设置为可见，反之设置为隐藏。

8.根据权利要求1所述的增强Web3D中的指示性动画实现能力的方法，其特征在于，所述的动画在屏幕的溢出实时监测，在做指示性动画屏幕位置更新前需做范围溢出判断，当溢出屏幕范围时指示性动画设为不可见。