cesium 渐变虚线效果 PolylineDashMaterialProperty

cesium中有虚线材质PolylineDashMaterialProperty,可以在这个材质的基础上结合uv设置每个顶点的透明度,就能实现渐变的效果了。

一、原理:在glsl中结合uv设置每个顶点的透明度

vec2 st = materialInput.st;
material.alpha = fragColor.a * (1.0 - st.s);

二、完整代码,扩展PolylineDashMaterialProperty材质

const defaultColor = Cesium.Color.WHITE;
const defaultGapColor = Cesium.Color.TRANSPARENT;
const defaultDashLength = 16.0;
const defaultDashPattern = 255.0;/*** A {@link MaterialProperty} that maps to polyline dash {@link Material} uniforms.* @alias GradientPolylineDashMaterial* @constructor** @param {Object} [options] Object with the following properties:* @param {Cesium.Property|Cesium.Color} [options.color=Cesium.Color.WHITE] A Cesium.Property specifying the {@link Cesium.Color} of the line.* @param {Cesium.Property|Cesium.Color} [options.gapColor=Cesium.Color.TRANSPARENT] A Cesium.Property specifying the {@link Cesium.Color} of the gaps in the line.* @param {Cesium.Property|Number} [options.dashLength=16.0] A numeric Cesium.Property specifying the length of the dash pattern in pixels.* @param {Cesium.Property|Number} [options.dashPattern=255.0] A numeric Cesium.Property specifying a 16 bit pattern for the dash*/
function GradientPolylineDashMaterial(options) {options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);this._definitionChanged = new Cesium.Event();this._color = undefined;this._colorSubscription = undefined;this._gapColor = undefined;this._gapColorSubscription = undefined;this._dashLength = undefined;this._dashLengthSubscription = undefined;this._dashPattern = undefined;this._dashPatternSubscription = undefined;this.color = options.color;this.gapColor = options.gapColor;this.dashLength = options.dashLength;this.dashPattern = options.dashPattern;
}Object.defineProperties(GradientPolylineDashMaterial.prototype, {/*** Gets a value indicating if this property is constant.  A property is considered* constant if getValue always returns the same result for the current definition.* @memberof GradientPolylineDashMaterial.prototype* @type {Boolean}* @readonly*/isConstant: {get: function () {return (Cesium.Property.isConstant(this._color) &&Cesium.Property.isConstant(this._gapColor) &&Cesium.Property.isConstant(this._dashLength) &&Cesium.Property.isConstant(this._dashPattern));},},/*** Gets the event that is raised whenever the definition of this property changes.* The definition is considered to have changed if a call to getValue would return* a different result for the same time.* @memberof GradientPolylineDashMaterial.prototype* @type {Event}* @readonly*/definitionChanged: {get: function () {return this._definitionChanged;},},/*** Gets or sets the Cesium.Property specifying the {@link Cesium.Color} of the line.* @memberof GradientPolylineDashMaterial.prototype* @type {Cesium.Property|undefined}*/color: Cesium.createPropertyDescriptor("color"),/*** Gets or sets the Cesium.Property specifying the {@link Cesium.Color} of the gaps in the line.* @memberof GradientPolylineDashMaterial.prototype* @type {Cesium.Property|undefined}*/gapColor: Cesium.createPropertyDescriptor("gapColor"),/*** Gets or sets the numeric Cesium.Property specifying the length of a dash cycle* @memberof GradientPolylineDashMaterial.prototype* @type {Cesium.Property|undefined}*/dashLength: Cesium.createPropertyDescriptor("dashLength"),/*** Gets or sets the numeric Cesium.Property specifying a dash pattern* @memberof GradientPolylineDashMaterial.prototype* @type {Cesium.Property|undefined}*/dashPattern: Cesium.createPropertyDescriptor("dashPattern"),
});/*** Gets the {@link Material} type at the provided time.** @param {JulianDate} time The time for which to retrieve the type.* @returns {String} The type of material.*/
GradientPolylineDashMaterial.prototype.getType = function (time) {return "GradientPolylineDash";
};/*** Gets the value of the property at the provided time.** @param {JulianDate} time The time for which to retrieve the value.* @param {Object} [result] The object to store the value into, if omitted, a new instance is created and returned.* @returns {Object} The modified result parameter or a new instance if the result parameter was not supplied.*/
GradientPolylineDashMaterial.prototype.getValue = function (time, result) {if (!Cesium.defined(result)) {result = {};}result.color = Cesium.Property.getValueOrClonedDefault(this._color,time,defaultColor,result.color);result.gapColor = Cesium.Property.getValueOrClonedDefault(this._gapColor,time,defaultGapColor,result.gapColor);result.dashLength = Cesium.Property.getValueOrDefault(this._dashLength,time,defaultDashLength,result.dashLength);result.dashPattern = Cesium.Property.getValueOrDefault(this._dashPattern,time,defaultDashPattern,result.dashPattern);return result;
};/*** Compares this property to the provided property and returns* <code>true</code> if they are equal, <code>false</code> otherwise.** @param {Cesium.Property} [other] The other property.* @returns {Boolean} <code>true</code> if left and right are equal, <code>false</code> otherwise.*/
GradientPolylineDashMaterial.prototype.equals = function (other) {return (this === other || //(other instanceof GradientPolylineDashMaterial &&Cesium.Property.equals(this._color, other._color) &&Cesium.Property.equals(this._gapColor, other._gapColor) &&Cesium.Property.equals(this._dashLength, other._dashLength) &&Cesium.Property.equals(this._dashPattern, other._dashPattern)));
};Cesium.Material._materialCache.addMaterial("GradientPolylineDash", {fabric: {type: "GradientPolylineDash",uniforms: {color: defaultColor,gapColor: defaultGapColor,dashLength: defaultDashLength,dashPattern: defaultDashPattern},source:`uniform vec4 color;uniform vec4 gapColor;uniform float dashLength;uniform float dashPattern;varying float v_polylineAngle;const float maskLength = 16.0;mat2 rotate(float rad) {float c = cos(rad);float s = sin(rad);return mat2(c, s,-s, c);}czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);vec2 pos = rotate(v_polylineAngle) * gl_FragCoord.xy;// Get the relative position within the dash from 0 to 1float dashPosition = fract(pos.x / (dashLength * czm_pixelRatio));// Figure out the mask index.float maskIndex = floor(dashPosition * maskLength);// Test the bit mask.float maskTest = floor(dashPattern / pow(2.0, maskIndex));vec4 fragColor = (mod(maskTest, 2.0) < 1.0) ? gapColor : color;if (fragColor.a < 0.005) {   // matches 0/255 and 1/255discard;}fragColor = czm_gammaCorrect(fragColor);material.emission = fragColor.rgb;vec2 st = materialInput.st;material.alpha = fragColor.a * (1.0 - st.s);return material;}`},translucent: function translucent() {return true;}
});// 写到Cesium对象上,就可以像其他MaterialProperty一样使用了
Cesium.Material.GradientDashPolyline = 'GradientPolylineDash'
Cesium.GradientPolylineDashMaterialProperty = GradientPolylineDashMaterial

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/26289.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mongodb在UPDATE操作中使用$pull操作

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第68篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…

链表题目之指定区间处理

前言 链表中有一些题目是需要知道并且记住对应的技巧的&#xff0c;有一些题目就是基本的链表技巧手动模拟推演注意细节等。 对于需要知道并且记住对应技巧的题目会有专门的一栏进行讲解&#xff0c;此类题目主要有&#xff1a;相交链表、环形链表、回文链表等&#xff0c;这些…

LeetCode | 27.移除元素

这道题的思路和26题一模一样&#xff0c;由于要在元素组中修改&#xff0c;我们可以设置一个index表示目前要修改原数组的第几位&#xff0c;由于遍历&#xff0c;访问原数组永远会在我们修改数组之前&#xff0c;所以不用担心数据丢失的问题&#xff0c;一次遍历数组&#xff…

18. 四数之和 - 力扣

1. 题目 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#xff09;&#xff1a; 0 …

LVS+Keepalived NGINX+Keepalived 高可用群集实战部署

Keepalived及其工作原理 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案&#xff0c;可以解决静态路由出现的单点故障问题。 VRRP协议&#xff08;虚拟路由冗余协议&#xff09; 是针对路由器的一种备份解决方案由多台路由器组成一个热备组&#xff0c;通过共用的…

五、LVS原理

目录 5.1 LVS 相关原理 5.1.1 LVS集群的体系结构以及特点 5.1.1.1 LVS简介 5.1.1.2 LVS体系结构 5.1.1.3 LVS相关术语 5.1.1.4 LVS工作模式 5.1.1.5 LVS调度算法 5.1.2 LVS-DR集群介绍 5.1.2.1 LVS-DR模式工作原理 5.1.2.2 LVS-DR模式应用特点 5.1.2.3 LVS-DR模式ARP抑制 5.1…

VCS基本仿真

这里记录三种仿真方式&#xff1a; 第一种是将verilog文件一个一个敲在终端上进行仿真&#xff1b; 第二种是将多个verilog文件的文件路径整理在一个文件中&#xff0c;然后进行仿真&#xff1b; 第三种是利用makefile文件进行仿真&#xff1b; 以8位加法器为例&#xff1a; …

一二三应用开发平台应用开发示例(2)——创建应用、模块、实体及配置模型

创建应用 文档管理系统对于开发平台是一个业务应用。 业务应用是通过平台内置的数据字典来维护的&#xff0c;因此访问系统管理模块下的数据字典管理功能&#xff0c;在实体配置分组下找到“应用编码”&#xff0c;点击行记录上的“字典项”。 在打开的新窗口中&#xff0c;在…

超详解——Python 元组详解——小白篇

目录 1. 元组简介 创建元组 2. 元组常用操作 访问元组元素 切片操作 合并和重复 成员操作符 内置函数 解包元组 元组方法 3. 默认集合类型 作为字典的键 作为函数参数 作为函数的返回值 存储多种类型的元素 4.元组的优缺点 优点 缺点 5.元组的使用场景 数据…

如何降低pcdn的延迟?

要降低P2P CDN的延迟&#xff0c;可以采取以下操作&#xff1a; 一&#xff0e;优化网络连接&#xff1a; 1、使用有线网络连接替代无线连接&#xff0c;因为有线连接通常提供更稳定的数据传输。 2、升级家庭或企业路由器&#xff0c;选择性能更好的路由器以提高网络传输速度…

6月11号作业

思维导图 #include <iostream> using namespace std; class Animal { private:string name; public:Animal(){}Animal(string name):name(name){//cout << "Animal&#xff1b;有参" << endl;}virtual void perform(){cout << "讲解员的…

【FineReport】帆软调用服务器的kettle作业

1、编写自定义函数并编译 package com.fr.function;import ch.ethz.ssh2.ChannelCondition; import ch.ethz.ssh2.Connection; import ch.ethz.ssh2.Session; import ch.ethz.ssh2.StreamGobbler; import com.fr.script.AbstractFunction;import java.io.BufferedReader; impo…

【web APIs】快速上手Day02

文章目录 Web APIs - 第2天事件事件监听案例一 :京东点击关闭顶部广告案例二&#xff1a;随机点名案例拓展知识-事件监听版本 双击事件 事件类型鼠标事件综合案例-轮播图完整版 焦点事件综合案例-小米搜索框案例 键盘事件文本事件 事件对象综合案例-按下回车发布评论 环境对象回…

算法day27

第一题 515. 在每个树行中找最大值 首先是遍历每层的节点&#xff0c;将每一层最大值的节点的值保留下来&#xff0c;最后将所有层的最大值的表返回&#xff1b;具体的遍历每层节点的过程如上一篇故事&#xff1b; 综上所述&#xff0c;代码如下&#xff1a; /*** Definition …

数据结构与算法题目集(中文) 6-3 求链表的表长

该代码使用循环遍历链表来计算链表的长度。代码首先定义了一个整数变量i用于计数&#xff0c;并初始化为0。然后进入一个while循环&#xff0c;条件为链表L非空。在循环中&#xff0c;通过L L->Next来遍历链表中的每一个节点&#xff0c;并将计数变量i递增。最终返回计数变…

2024海南省大数据教师培训-Hadoop集群部署

前言 本文将详细介绍Hadoop分布式计算框架的来源&#xff0c;架构和应用场景&#xff0c;并附上最详细的集群搭建教程&#xff0c;能更好的帮助各位老师和同学们迅速了解和部署Hadoop框架来进行生产力和学习方面的应用。 一、Hadoop介绍 Hadoop是一个开源的分布式计算框架&…

文献解读-农业系列-第七期|《高粱驯化的基因组足迹和多种最终用途的育种选择》

关键词&#xff1a;高粱基因分析&#xff1b;基因组变异检测&#xff1b;全基因组重测序&#xff1b; 文献简介 标题&#xff08;英文&#xff09;&#xff1a;Genomic footprints of sorghum domestication and breeding selection for multiple end uses标题&#xff08;中文…

【Linux系统化学习】传输层——TCP协议

目录 预备知识 全双工协议 协议缓冲区 TCP协议 TCP协议格式 六个标志位 两个问题 确认应答机制 流量控制 超时重传机制 连接管理机制 CLOSE_WAIT状态 TIME_WAIT状态 滑动窗口 拥塞控制 延迟应答 捎带应答 粘包问题 TCP的异常情况 TCP小结 TCP/UDP协议对比…

MAC认证

简介 MAC认证是一种基于接口和MAC地址对用户的网络访问权限进行控制的认证方法&#xff0c;它不需要用户安装任何客户端软件。设备在启动了MAC认证的接口上首次检测到用户的MAC地址以后&#xff0c;即启动对该用户的认证操作。认证过程中&#xff0c;不需要用户手动输入用户名…

成都跃享未来教育抖音小店深度解析靠谱与否

在如今网络购物日益繁荣的时代&#xff0c;抖音小店以其独特的平台优势和庞大的用户基础&#xff0c;吸引了越来越多的商家入驻。成都跃享未来教育咨询有限公司便是其中之一&#xff0c;它的抖音小店究竟靠不靠谱呢&#xff1f;今天&#xff0c;我们就来一起揭开这个谜底。 首…