Cesium自定义电子围栏特效材质

1.new Cesium.Viewer中添加

requestWebgl1: true,

2. 编写材质,主要分三步

(1)定义MaterialProperty

(2)设置材质

(3)添加材质

//定义材质对象及变量
function DynamicWallMaterialProperty(color, duration) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;    
    this._time = (new Date()).getTime();

    this.color = color;
    this.duration = duration;
  }

  //Cesium.MaterialProperty是一个抽像类(https://cesium.com/learn/cesiumjs/ref-doc/MaterialProperty.html),
  //必须定义isConstant 、definitionChanged、equals()、getType()、getValue()
  //定义或修改材质属性
  Object.defineProperties(DynamicWallMaterialProperty.prototype, {
    isConstant: {
      get: function () {
        return false;
      }
    },
    definitionChanged: {
      get: function () {
        return this._definitionChanged;
      }
    },
    color: Cesium.createPropertyDescriptor('color')
  });

  //定义材质对象方法getType
  DynamicWallMaterialProperty.prototype.getType = function (time) {
    return 'DynamicWall';
  }

   //定义材质对象方法getValue,给下文的uniforms附值
  DynamicWallMaterialProperty.prototype.getValue = function (time, result) {
    if (!Cesium.defined(result)) {
      result = {};
    }
    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
    result.image = Cesium.Material.DynamicWallImage;
    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    return result;
  }

  //定义材质对象方法equals
  DynamicWallMaterialProperty.prototype.equals = function (other) {
    return this === other || (other instanceof DynamicWallMaterialProperty && Property.equals(this._color, other._color))
  };

  Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
  Cesium.Material.DynamicWallType = 'DynamicWall';
  Cesium.Material.DynamicWallImage = "src/assets/imgs/color.png";//图片
  Cesium.Material.DynamicWallSource =
    `czm_material czm_getMaterial(czm_materialInput materialInput)
            {
                float time = czm_frameNumber/100.0;
                czm_material material = czm_getDefaultMaterial(materialInput);
                vec2 st = materialInput.st;
                vec4 colorImage = texture2D(image, vec2(fract(1.0*st.t - time), st.t));
                material.alpha = colorImage.a * color.a;
                material.diffuse = (colorImage.rgb+color.rgb)/2.0;
                return material;
            }`      //由上到下


  //添加自定义材质
  Cesium.Material._materialCache.addMaterial(Cesium.Material.DynamicWallType, {
    fabric: {
      //纹理类型
      type: Cesium.Material.DynamicWallType,
      //传递给着色器的外部属性
      uniforms: {
        color: new Cesium.Color(0.0, 0.0, 0.0, 1),
        image: Cesium.Material.DynamicWallImage,
        time: 0
      },
      //纹理资源
      source: Cesium.Material.DynamicWallSource
    },
    //是否透明
    translucent: function (material) {
      return true;
    }
  })

  
export default DynamicWallMaterialProperty;

3.使用材质

import DynamicWallMaterialProperty from "../materials/DynamicWallMaterial.js";

//...

function CustomMaterialTest() {
  
  var dynamicWall = window.Viewer.entities.add({
    wall: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        118.286419, 31.864436, 20000.0,
        119.386419, 31.864436, 20000.0,
        119.386419, 32.864436, 20000.0,
        118.286419, 32.864436, 20000.0,
        118.286419, 31.864436, 20000.0,
      ]),
      material: new DynamicWallMaterialProperty(Cesium.Color.fromBytes(255, 200, 10).withAlpha(0.8), 30),
    }
  })
  window.Viewer.flyTo(dynamicWall)
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入浅出Prometheus架构原理

目录 1 Prometheus简介 2 Prometheus 的优势 2.1 Prometheus 适用于什么场景 2.2 Prometheus 不适合什么场景 3 Prometheus 的架构 4 Prometheus 的组件 4.1 组件介绍 4.1.1 Prometheus Server 4.1.2 Exporter 4.1.3 Push Gateway 4.1.4 Grafana 4.1.5 Alert…

Python批量读取大量nc格式文件并导出全部时间信息

本文介绍基于Python语言,逐一读取大量.nc格式的多时相栅格文件,导出其中所具有的全部时间信息的方法。 .nc是NetCDF(Network Common Data Form)文件的扩展名,表示一种常用的科学数据存储格式。NetCDF是一种自描述的、可…

Alibaba Cloud Linux镜像操作系统超详细测评!兼容CentOS

Alibaba Cloud Linux是基于龙蜥社区OpenAnolis龙蜥操作系统Anolis OS的阿里云发行版,针对阿里云服务器ECS做了大量深度优化,Alibaba Cloud Linux由阿里云官方免费提供长期支持和维护LTS,Alibaba Cloud Linux完全兼容CentOS/RHEL生态和操作方式…

【基础篇】十二、引用计数法 可达性分析算法

文章目录 1、Garbage Collection2、方法区的回收3、堆对象回收4、引用计数法5、可达性分析算法6、查看GC Root对象 1、Garbage Collection C/C,无自动回收机制,对象不用时需要手动释放,否则积累导致内存泄漏: Java、C#、Python、…

跟着仙凡兄学习 ros2 ubuntu与windows的安装(本人小白开始,一步一步跟着坑走,最后都成功的)

目 录 1 ROS安装的步骤 2 1.1 ROS UBUNTU安装 2 1.1.1 环境配置:UBUNTU20.04 2 1.1.2 设置编码 2 1.1.3 添加ROS2 APT仓库 3 1.1.4 接下来可以安装ROS2了 3 1.1.5 创建 COLCON 工作区并下载教程 3 1.1.6 设置环境 4 1.1.7 双环境设置 4 1.1.8 验证之一 5 1.2 ROS2 W…

《剑指offer》数学第二题:求1+2+3+...+n

题目描述: 求123...n,要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句(A?B:C)。思路: 我们可以用递归和短路运算符来进行运算,具体代码如下。 代码实现: pac…

基于知识图谱的图神经网络推理

基于知识图谱的图神经网络推理 - 知乎导读 本次分享题目为基于知识图谱的图神经网络推理,首先会介绍知识图谱相关的背景。第二部分GNN for KG会以CompGCN为基础,介绍将图神经网络迁移到知识图谱上面的工作。第三部分主要介绍针对知识图谱所设计的GNN…ht…

开启Android学习之旅-1

最近在学习《第一行代码 Android》,两天看书把所有代码都敲了一遍。由于之前没有接触过 Kotlin,导致了囫囵吞枣,跟着书会敲,离开就忘了。Android 大佬开发的各种框架、控件好像大部分都用了 Kotlin。看他们的源码,理解…

齐次和非齐次线性方程组和非线性方程组的求解

1.非齐次线性方程组的求解 AXb为非齐次线性方程组的向量表示 求解方法1就是上面所述,其中求解方法2解决求解方法1中ATA不可逆或括号中计算过程过于麻烦的问题。 2.齐次线性方程组的求解 AX0为齐次线性方程组的向量表示 当p>q的时候 A进行SVD分解后的V矩阵正好…

Linux的LVM与磁盘配额

一.LVM 1.什么是LVM Logical Volume Manager 逻辑卷管理 能够在保持现有数据不变的情况下,动态调整磁盘容量,从而提高磁盘管理的灵活性 /boot 分区用于存放引导文件,不能基于LVM创建 解释:就是将多个不同的物理卷组合在一起形…

iOS手机查看蓝牙底层日志

文章目录 一、需要的环境二、在iOS设备上安装Profiles文件三、安装Xcode四、安装packetLogger五、启动蓝牙数据包分析 参考文档:A New Way to Debug iOS Bluetooth Applications 一、需要的环境 iOS 13 device and cableMac computer/laptopApple Developer Progr…

大数据情况下如何保证企业数据交换安全

数据交换是指在网络或其他方式下,不同主体按照规定的规则和标准实现数据的共享、传输和处理的过程。大数据时代的到来使得数据交换的重要性更为凸显,大数据带来了海量、多样、高速、低价值密度等特点,也带来了更多的价值挖掘和应用场景。 保障…

大模型日报-20240104

文生视频下一站,Meta已经开始视频生视频了 https://mp.weixin.qq.com/s/OEzex40EtaeG0sKDvxdY7Q 文本指导的视频到视频(V2V)合成在各个领域具有广泛的应用,例如短视频创作以及更广泛的电影行业。扩散模型已经改变了图像到图像&am…

听GPT 讲Rust源代码--compiler(6)

File: rust/compiler/rustc_index/src/idx.rs 在Rust的源代码中,idx.rs文件位于rust/compiler/rustc_index/src/目录下,它定义了用于索引访问的Idx trait。以下是该文件的详细介绍: Idx是一个基本的整数索引类型,它用于支持Rust编…

什么是员工监控?你需要知道的一切

一般来说,员工监控是一种增强员工效率的授权方法,不仅可以更好地了解何时,还可以更好地了解如何进行。无论您的员工是远程、混合还是办公室优先,员工监控始终有助于提高生产力。 长期以来,传统的员工监控一直与监督和…

MATLAB中./和/,.*和*,.^和^的区别

MATLAB中./和/,.*和*,.^ 和^ 的区别 MATLAB中./和/,.*和*,.^ 和^ 的区别./ 和 / 的区别.//实验实验结果 .* 和 * 的区别.**实验实验结果 .^ 和^ 的区别.^n^n实验运行结果 MATLAB中./和/,.和,.^ 和^ 的区别 …

FFmpeg安装保姆级教程

在上一篇文章《IOS:Safari无法播放MP4(H.264编码)》里我们使用了FFmpeg来设置MP4的Profile和Level值,从而转换出适合IOS Safari上播放的MP4文件。本文接着介绍一下FFmpeg的安装: 一、安装过程 (1&#xf…

FFmpeg之——获取上传视频的尺寸(长、宽)

获取上传视频的尺寸: 获取视频尺寸通常需要借助第三方库FFmpeg。 首先,确保你的系统中已安装了FFmpeg,并且FFmpeg的可执行文件路径已经添加到你的系统环境变量中。 1.官网下载ffmpeg 进入 链接: ffmpeg官网 网址,点击下载wind…

threejs官方demo解析(一)

官网效果图&#xff1a; demo代码及我添加的注释&#xff1a; <!DOCTYPE html> <html lang"en"><head><title>three.js webgl - animation - keyframes</title><meta charset"utf-8"><meta name"viewport&qu…

Apache HTTPD 换行解析漏洞(CVE-2017-15715)详解

Apache HTTPD 换行解析漏洞&#xff08;CVE-2017-15715&#xff09; 1.cd到CVE-2017-15715 cd vulhub/httpd/CVE-2017-15715 2.运行docker-compose build docker-compose build 3.运行docker-compose up -d 4.查看docker-compose ps 5.访问 出现这个表示安装成功 6.漏洞复现…