CN112102450B - 一种基于WebGL三维地图的跑马灯特效通用方法 - Google Patents
一种基于WebGL三维地图的跑马灯特效通用方法 Download PDFInfo
- Publication number
- CN112102450B CN112102450B CN202011289627.5A CN202011289627A CN112102450B CN 112102450 B CN112102450 B CN 112102450B CN 202011289627 A CN202011289627 A CN 202011289627A CN 112102450 B CN112102450 B CN 112102450B
- Authority
- CN
- China
- Prior art keywords
- marquee
- special effect
- texture
- shader
- webgl
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/20—3D [Three Dimensional] animation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/005—General purpose rendering architectures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/04—Texture mapping
-
- 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
- G06T17/05—Geographic models
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Computer Graphics (AREA)
- Geometry (AREA)
- Software Systems (AREA)
- Remote Sensing (AREA)
- Processing Or Creating Images (AREA)
- Image Generation (AREA)
Abstract
本发明提供一种基于WebGL三维地图的跑马灯特效通用方法，包括以下：创建跑马灯特效构造模块，并设计跑马灯特效参数；根据所述构造模块、跑马灯特效参数，利用跑马灯特效着色器设计跑马灯纹理动画；将所述跑马灯纹理动画添加至内置缓存纹理；根据内置缓存纹理，在WebGL三维地图中实现跑马灯特效。本发明提供的有益效果是：重点解决了跑马灯特效中纹理运动的关键问题。通过片元着色器让纹理运动起来，再将其添加到系统的内置纹理缓存中，就能在三维地图中使用跑马灯特效，弥补了三维地图特效在这一方面的缺失，丰富了现有三维地图特效。
Description
技术领域
本发明涉及三维数据显示领域，尤其涉及一种基于WebGL三维地图的跑马灯特效通用方法。
背景技术
WebGL是一种3D绘图标准，它把Javascript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以直接为浏览器提供3D加速渲染，这样Web开发人员就可以借助系统显卡在浏览器里更流畅地展示3D场景和模型，还可以创建更复杂的导航和数据视觉化。
WebGL为HTML5Canvas提供硬件3D加速渲染，开发人员可以借助系统显卡在浏览器里更流畅地展示3D场景和模型。目前基于WebGL设计的3D画面有很多，其中包括了云层特效、雨水特效、水波纹特效和粒子喷射特效等。
现存webgl三维地图中缺乏跑马灯特效，所以跑马灯特效弥补了webgl三维地图中特效的不足。动态的跑马灯特效能对数据进行清晰明了的展示，是三维地图可视化中不可缺少的一部分。
发明内容
有鉴于此，为了解决现有技术中的不足，本发明提出一种基于WebGL三维地图的跑马灯特效通用方法。本发明实际要解决的技术问题是：如何实现WebGL在浏览器中的跑马灯特效。
本发明提出的一种基于WebGL三维地图的跑马灯特效通用方法，具体包括以下：
S101：创建跑马灯特效构造模块，并设计跑马灯特效参数；
S102：根据所述构造模块、跑马灯特效参数，利用跑马灯特效着色器设计跑马灯纹理动画；
S103：将所述跑马灯纹理动画添加至内置缓存纹理；
S104：根据内置缓存纹理，在WebGL三维地图中实现跑马灯特效。
进一步地，步骤S101具体为：在WebGL中增加一个全新的跑马灯特效构造函数，所述跑马灯特效参数，包括跑马灯贴图纹理路径、颜色、运动速度、纹理重复次数、运动方向和亮度。
进一步地，步骤S102中，所述跑马灯特效着色器的预设参数包括颜色、贴图纹理和时间三个参数。
进一步地，所述跑马灯特效着色器设计跑马灯纹理动画，具体过程为：
S201：构造一个输入材质对象material为空的跑马灯特效着色器；
S202：利用跑马灯特效着色器材质获取模块获取着色器的输入材质对象material；
S203：将所述输入材质对象material的坐标与所述纹理重复次数相乘得到纹理重复的坐标；
S204：调用所述跑马灯贴图纹理路径和运动方向，结合跑马灯特效着色器的时间参数，实现跑马灯纹理运动。
进一步地，步骤S201中，所述输入材质对象material还被进行属性填充，具体过程为：
S301：调用跑马灯特效着色器的贴图纹理参数、颜色参数、跑马灯特效参数中的亮度参数，并将贴图纹理参数、颜色参数、亮度参数相乘，得到输入材质对象material的漫反射光强度；
S302：将所述贴图纹理参数与颜色参数中的透明度相乘，得到输入材质对象material的透明度；
S303：所述输入材质对象material的漫反射光强度和透明度，构成完整的输入材质对象属性，从而得到一个完整的跑马灯特效着色器。
进一步地，步骤S103中，将所述跑马灯纹理动画添加至内置缓存纹理，具体为：
S401：调用所述完整的跑马灯特效着色器；
S402：使用fabric描述跑马灯纹理动画；
S403：利用接口将跑马灯纹理动画添加到内置缓存纹理；
S404：输出跑马灯特效的构造函数。
步骤S104中根据内置缓存纹理，在WebGL三维地图中实现跑马灯特效，具体为：
在WebGL三维地图中添加几何对象，设计几何对象的坐标、大小及材质，材质即为跑马灯纹理动画；设置对应的跑马灯特效参数，实现跑马灯特效。
本发明提供的有益效果是：重点解决了跑马灯特效中纹理运动的关键问题。通过片元着色器让纹理运动起来，再将其添加到系统的内置纹理缓存中，就能在三维地图中使用跑马灯特效，弥补了三维地图特效在这一方面的缺失，丰富了现有三维地图特效。
附图说明
图1是本发明一种基于WebGL三维地图的跑马灯特效通用方法流程图；
图2是本发明跑马灯纹理运动设计的流程图；
图3是本发明输入材质对象属性设计的流程图；
图4是本发明将跑马灯纹理动画添加至内置缓存纹理的流程图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地描述。
请参考图1，一种基于WebGL三维地图的跑马灯特效通用方法，包括以下：
S101：创建跑马灯特效构造模块，并设计跑马灯特效参数；
在WebGL中增加一个全新的跑马灯特效构造函数，所述跑马灯特效参数，包括跑马灯贴图纹理路径、颜色、运动速度、纹理重复次数、运动方向和亮度。
所述跑马灯贴图纹理路径，具体指的是跑马灯特效的纹理贴图，在本地端计算机存储的路径，比如为操作系统桌面，或者某个磁盘的某个文件夹，该文件夹专门存放有各式各样的跑马灯纹理贴图，本发明实施例中，采用的跑马灯纹理贴图为圆形贴图，另外在一些其他实施例中，还可以选用的纹理贴图为其他类型的跑马灯图片，这里不作限制。
所述颜色，指跑马灯特效的显示颜色，可以根据实际需求进行自定义颜色，本发明实施例中，颜色参数设置为绿色。
所述运动速度，指跑马灯特效滚动的速度，运动速度快，则跑马灯特效显示一轮时间短，反之显示时间长；运动速度可以根据实际需要进行合适调整。在本实施例中，运动速度具体设置为1000。
所述纹理重复次数，具体指：贴图纹理在地图二维坐标的x方向或是y方向的重复次数。在本实施例中，纹理重复次数设置为new Cartesian2(10.0, 1.0)，表示纹理在x方向重复十次，在y方向不重复。
所述运动方向，包括x方向和y方向；基于显示地图二维坐标而言，横向水平即为x方向，纵向竖直即为y方向；本发明实施例中，运动方向设置为x方向。
所述亮度，具体指跑马灯显示时的亮度，其取值为：1.0，越高表示显示亮度越大，本实施例中可以根据实际需要进行合适调整。
S102：根据所述构造模块、跑马灯特效参数，利用跑马灯特效着色器设计跑马灯纹理动画；
请参考图2，所述跑马灯特效着色器设计跑马灯纹理动画，具体过程为：
S201：构造一个输入材质对象material为空的跑马灯特效着色器；
所述跑马灯特效着色器的预设参数包括颜色、贴图纹理和时间三个参数。输入材质对象material在构造时，其具体的属性为空，需要进行属性填充。
着色器的颜色参数表示跑马灯的显示颜色，贴图纹理表示跑马灯中的贴图纹理，时间表示跑马灯运动的具体时间，运用当前时间与跑马灯动画开始的时间相减，接着求差值对运动速度的余数，得到的结果除以运动速度，就得到时间。
S202：利用跑马灯特效着色器材质获取模块获取着色器的输入材质对象material；
本实施例中，跑马灯特效着色器材质获取模块采用的为czm_getMaterial方法，该方法用于获取跑马灯特效着色器的输入材质对象material；所述输入材质对象material具体为具有默认值的默认材质，其中包括了二维纹理坐标。
S203：将所述输入材质对象material的坐标与所述纹理重复次数相乘得到纹理重复的坐标；
本实施例中，输入材质对象material的坐标为二维纹理坐标，纹理重复次数为newCartesian2(10.0, 1.0)，相乘后得到纹理重复的二维纹理坐标，该结果即为纹理重复的坐标。
请参考图3，获取纹理重复的坐标后，需要对输入材质对象material进行属性上的填充，包括其漫反射光强度和透明度，计算过程具体为：
S301：调用跑马灯特效着色器的贴图纹理参数、颜色参数、跑马灯特效参数中的亮度参数，并将贴图纹理参数、颜色参数、亮度参数相乘，得到输入材质对象material的漫反射光强度；
S302：将所述贴图纹理参数与颜色参数中的透明度相乘，得到输入材质对象material的透明度；
S303：所述输入材质对象material的漫反射光强度和透明度，构成完整的输入材质对象属性，从而得到一个完整的跑马灯特效着色器。
获得了输入材质对象的漫反射光强度和透明度以后，将该对象返回到czm_getMaterial方法，得到一个完整的跑马灯特效着色器。
S204：调用所述跑马灯贴图纹理路径和运动方向，结合跑马灯特效着色器的时间参数，实现跑马灯纹理运动。
调用跑马灯特效参数中的纹理贴图路径和运动方向，判断纹理是在x或y方向重复后，结合在着色器中定义的时间参数，通过着色器的内建函数texture2D来获取对应位置的贴图纹理，随着时间的变化，纹理坐标也随之变化，以此来实现纹理运动。
S103：将所述跑马灯纹理动画添加至内置缓存纹理；
请参考图4，图4本发明将跑马灯纹理动画添加至内置缓存纹理的流程图，本发明实施例中具体流程如下：
S401：利用fabric中的source来调用跑马灯特效着色器调用所述完整的跑马灯特效着色器；
fabric是用于描述Cesium中的材质的JSON模式，source是fabric的属性，在source属性中，根据名称访问相应的着色器。
S402：使用fabric描述跑马灯纹理动画；
fabric属性包括type、uniforms、source，type表示跑马灯特效的类型，将跑马灯特效的材质缓存到cesium的材质中，以后再调用跑马灯特效时，就可以直接引用该材质，就如同内置材质一样；uniform是一种输入参数变量，在创建材质时或者创建材质后修改，跑马灯特效的uniform包括了所有的跑马灯特效参数，在创建跑马灯特效材质时设置；source用于调用跑马灯特效着色器来实现跑马灯特效。
S403：利用接口将跑马灯纹理动画添加到内置缓存纹理；
本发明实施例中，通过addMaterial接口，将跑马灯纹理动画添加到内置缓存纹理。在一些其他实施例中，也可以采用具有相同功能的其他接口。
S404：输出跑马灯特效的构造函数。
这里，输出的构造函数，即为构造完毕的完整的带有特效的跑马灯特效构造函数。
S104：根据内置缓存纹理，在WebGL三维地图中实现跑马灯特效。
在WebGL三维地图中添加几何对象，设计几何对象的坐标、大小及材质，材质即为跑马灯纹理动画；设置对应的跑马灯特效参数，实现跑马灯特效。
以上仅为解释本发明用，并不用以进行限制。
本发明的解决的问题在于，基于webgl三维地图的跑马灯特效如何实现跑马灯的贴图和运动，其核心是怎么让纹理持续运动，以保证渲染出来的结果是动态的。
在本发明中主要利用着色器来实现跑马灯的运动效果，通过着色器的内建函数texture2D来获取对应位置的纹理，不断改变纹理位置来实现纹理运动。
本发明提供的有益效果是：重点解决了跑马灯特效中纹理运动的关键问题。通过片元着色器让纹理运动起来，再将其添加到系统的内置纹理缓存中，就能在三维地图中使用跑马灯特效，弥补了三维地图特效在这一方面的缺失，丰富了现有三维地图特效。
以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (3)
1.一种基于WebGL三维地图的跑马灯特效通用方法，其特征在于：具体包括以下步骤：
S101：创建跑马灯特效构造模块，并设计跑马灯特效参数；
S102：根据所述构造模块、跑马灯特效参数，利用跑马灯特效着色器设计跑马灯纹理动画；
S103：将所述跑马灯纹理动画添加至内置缓存纹理；
S104：根据内置缓存纹理，在WebGL三维地图中实现跑马灯特效；
步骤S101具体为：在WebGL中增加一个全新的跑马灯特效构造函数，所述跑马灯特效参数，包括跑马灯贴图纹理路径、颜色、运动速度、纹理重复次数、运动方向和亮度；
步骤S102中，所述跑马灯特效着色器的预设参数包括颜色、贴图纹理和时间三个参数；
所述跑马灯特效着色器设计跑马灯纹理动画，具体过程为：
S201：构造一个输入材质对象material为空的跑马灯特效着色器；
S202：利用跑马灯特效着色器材质获取模块获取着色器的输入材质对象material；
S203：将所述输入材质对象material的坐标与所述纹理重复次数相乘得到纹理重复的坐标；
S204：调用所述跑马灯贴图纹理路径和运动方向，结合跑马灯特效着色器的时间参数，实现跑马灯纹理运动；
步骤S201中，所述输入材质对象material还被进行属性填充，具体过程为：
S301：调用跑马灯特效着色器的贴图纹理参数、颜色参数、跑马灯特效参数中的亮度参数，并将贴图纹理参数、颜色参数、亮度参数相乘，得到输入材质对象material的漫反射光强度；
S302：将所述贴图纹理参数与颜色参数中的透明度相乘，得到输入材质对象material的透明度；
S303：所述输入材质对象material的漫反射光强度和透明度，构成完整的输入材质对象属性，从而得到一个完整的跑马灯特效着色器。
2.如权利要求1所述的基于WebGL三维地图的跑马灯特效通用方法，其特征在于：
步骤S103中，将所述跑马灯纹理动画添加至内置缓存纹理，具体为：
S401：调用所述完整的跑马灯特效着色器；
S402：使用fabric描述跑马灯纹理动画；
S403：利用接口将跑马灯纹理动画添加到内置缓存纹理；
S404：输出跑马灯特效的构造函数。
3.如权利要求2所述的基于WebGL三维地图的跑马灯特效通用方法，其特征在于：步骤S104中根据内置缓存纹理，在WebGL三维地图中实现跑马灯特效，具体为：
在WebGL三维地图中添加几何对象，设计几何对象的坐标、大小及材质，材质即为跑马灯纹理动画；设置对应的跑马灯特效参数，实现跑马灯特效。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011289627.5A CN112102450B (zh) | 2020-11-18 | 2020-11-18 | 一种基于WebGL三维地图的跑马灯特效通用方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011289627.5A CN112102450B (zh) | 2020-11-18 | 2020-11-18 | 一种基于WebGL三维地图的跑马灯特效通用方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112102450A CN112102450A (zh) | 2020-12-18 |
| CN112102450B true CN112102450B (zh) | 2021-02-02 |
Family
ID=73784658
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011289627.5A Active CN112102450B (zh) | 2020-11-18 | 2020-11-18 | 一种基于WebGL三维地图的跑马灯特效通用方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112102450B (zh) |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102591649A (zh) * | 2011-12-17 | 2012-07-18 | 无敌科技(西安)有限公司 | 一种以动画形式显示信息提示接口及其方法 |
| CN102955854B (zh) * | 2012-11-06 | 2015-11-25 | 搜游网络科技(北京)有限公司 | 一种基于html5协议的网页展现方法及装置 |
| CN103337089A (zh) * | 2013-06-26 | 2013-10-02 | 四川长虹电器股份有限公司 | 一种在3d空间中实现文字跑马灯效果的方法 |
| CN103413344A (zh) * | 2013-07-10 | 2013-11-27 | 深圳Tcl新技术有限公司 | 3d帧动画实现方法、装置及终端 |
| US10324736B2 (en) * | 2017-01-13 | 2019-06-18 | Zspace, Inc. | Transitioning between 2D and stereoscopic 3D webpage presentation |
| US11457289B2 (en) * | 2018-02-22 | 2022-09-27 | Microsoft Technology Licensing, Llc | Low latency broadcasting of game engine frames |
-
2020
- 2020-11-18 CN CN202011289627.5A patent/CN112102450B/zh active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN112102450A (zh) | 2020-12-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110443893B (zh) | 大规模建筑场景渲染加速方法、系统、装置和存储介质 | |
| CN112270756B (zh) | 一种应用于bim模型文件的数据渲染方法 | |
| US20230053462A1 (en) | Image rendering method and apparatus, device, medium, and computer program product | |
| US9852544B2 (en) | Methods and systems for providing a preloader animation for image viewers | |
| WO2022116659A1 (zh) | 一种体积云渲染方法、装置、程序和可读介质 | |
| US10347042B2 (en) | Importance sampling of sparse voxel octrees | |
| US9275493B2 (en) | Rendering vector maps in a geographic information system | |
| US9530242B2 (en) | Point and click lighting for image based lighting surfaces | |
| CN110544290A (zh) | 数据渲染方法及装置 | |
| CN113674389B (zh) | 场景渲染方法、装置、电子设备及存储介质 | |
| KR20070004878A (ko) | ３차원 장면 계층구조를 ２차원 합성 시스템으로 통합하기위한 데이터 구조, 방법 및 컴퓨터 판독가능 매체 | |
| CN113034657B (zh) | 游戏场景中光照信息的渲染方法、装置及设备 | |
| RU2680355C1 (ru) | Способ и система удаления невидимых поверхностей трёхмерной сцены | |
| US9483873B2 (en) | Easy selection threshold | |
| CN112860839A (zh) | 一种基于Unity3D的水环境质量实时监测方法及装置 | |
| CN114742931A (zh) | 渲染图像的方法、装置、电子设备及存储介质 | |
| CN112102450B (zh) | 一种基于WebGL三维地图的跑马灯特效通用方法 | |
| CN112001018A (zh) | 一种基于云渲染的高效虚拟仿真实验平台测试方法 | |
| She et al. | An efficient method for rendering linear symbols on 3D terrain using a shader language | |
| CN111681307B (zh) | 一种应用于三维软件的动态三维坐标轴的实现方法 | |
| CN115269756A (zh) | 一种在cesium中引入热力图的方法及系统 | |
| CN111932689B (zh) | 一种采用id像素图的三维对象快速选取方法 | |
| CN114022601A (zh) | 一种体积元素渲染方法、装置及设备 | |
| Seng et al. | Realistic real-time rendering of 3D terrain scenes based on OpenGL | |
| CN113487708B (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP01 | Change in the name or title of a patent holder |
Address after: 430000 Wuda science and Technology Park, Jiangxia Avenue, Miaoshan District, Donghu Development Zone, Wuhan City, Hubei Province Patentee after: Geospace Information Technology Co., Ltd. Address before: 430000 Wuda science and Technology Park, Jiangxia Avenue, Miaoshan District, Donghu Development Zone, Wuhan City, Hubei Province Patentee before: WUDA GEOINFORMATICS Co.,Ltd. |
|
| CP01 | Change in the name or title of a patent holder |