Cesium自定义Shader实现流动尾线

news/2024/7/10 2:22:05 标签: cesium, vue, javascript

目录

  • 项目地址
  • 实现效果
  • 核心代码

项目地址

https://github.com/zhengjie9510/webgis-demo

实现效果

核心代码

javascript">class SpriteLineMaterialProperty {
  constructor(options) {
    this._definitionChanged = new Cesium.Event();
    this._speed = undefined
    this._color = undefined
    this.speed = options.speed
    this.color = options.color
  }
  get isConstant() {
    return false;
  }

  get definitionChanged() {
    return this._definitionChanged;
  }
  // eslint-disable-next-line
  getType(time) {
    return Cesium.Material.SpriteLineMaterialType;
  }

  getValue(time, result) {
    if (!Cesium.defined(result)) {
      result = {};
    }
    result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.RED, result.color);
    result.speed = Cesium.Property.getValueOrDefault(this._speed, time, 10, result.speed);
    return result;
  }

  equals(other) {
    return (this === other ||
      (other instanceof SpriteLineMaterialProperty &&
        Cesium.Property.equals(this._color, other._color) &&
        Cesium.Property.equals(this._speed, other._speed)))
  }
}
Object.defineProperties(SpriteLineMaterialProperty.prototype, {
  speed: Cesium.createPropertyDescriptor('speed'),
  color: Cesium.createPropertyDescriptor('color')
})
Cesium.SpriteLineMaterialProperty = SpriteLineMaterialProperty
Cesium.Material.SpriteLineMaterialType = 'SpriteLineMaterialType';
Cesium.Material.SpriteLineMaterialSource = `
  uniform vec4 color;  
  const float pi = 3.1415926;
  czm_material czm_getMaterial(czm_materialInput materialInput)
  {
    czm_material material = czm_getDefaultMaterial(materialInput);
    float time = fract( czm_frameNumber * speed / 1000.0);
    vec2 st = materialInput.st;
    material.diffuse = color.rgb;
    material.alpha = 1.0 - fract(st.s * 2.0 + time);
    return material;
  }
  `
Cesium.Material._materialCache.addMaterial(Cesium.Material.SpriteLineMaterialType, {
  fabric: {
    type: Cesium.Material.SpriteLineMaterialType,
    uniforms: {
      color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
      speed: 5.0
    },
    source: Cesium.Material.SpriteLineMaterialSource
  },
  // eslint-disable-next-line
  translucent: function (material) {
    return true;
  }
})


http://www.niftyadmin.cn/n/5454191.html

相关文章

Swagger3探索之游龙入海

引言 后端开发中常用的接口调用工具一般使用Postman、ApiPost工具&#xff0c;但后期需要与前端联调&#xff0c;要补充接口文档花费大量时间&#xff0c;此时Swagger3应运而生&#xff0c;大大提高沟通交流的效率。 引用依赖 <!-- Swagger3 调用方式 http://ip:port/swa…

SpringBoot2.6.3 + knife4j-openapi3

1.引入项目依赖&#xff1a; <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-openapi3-spring-boot-starter</artifactId><version>4.5.0</version> </dependency> 2.新增配置文件 import io.swag…

Mysql数据库:基础SQL语言详解

目录 一、数据库的基础操作 1、数据库的基本查看和切换 1.1 查看数据库信息 1.2 切换数据库 1.3 查看数据库中的表信息 1.4 查看数据库或数据库中表的结构&#xff08;字段&#xff09; 1.5 数据类型 1.5.1 整数型 1.5.2 浮点型(float和double) 1.5.3 定点数 1.5.4…

函数 GetMemoryType 的理解

从开始接触Vulkan&#xff0c;有个函数一直不解&#xff0c;今日做一个记录&#xff1a; /*** Get the index of a memory type that has all the requested property bits set** param typeBits Bit mask with bits set for each memory type supported by the resource to r…

一、CentOS基础命令(2.系统与用户操作)

文章目录 2、用户管理&#xff08;1.&#xff09;useradd - 创建新用户&#xff08;2.&#xff09;userdel - 删除用户&#xff08;3.&#xff09;usermod - 修改用户属性&#xff08;4.&#xff09;passwd - 管理用户密码&#xff08;5.&#xff09;groupadd - 创建用户组&…

AABB包围盒高质量阴影

摄像机代码 using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; using UnityEngine; using UnityEngine.Rendering;public class UpdateAABBScript : MonoBehaviour {public LayerMask layerMask = ~0;private Bounds bounds = new Bo…

【前端】-

相对路径和绝对路径是描述文件位置的两种方式。 1. 相对路径&#xff1a;相对于自己的目标文件的位置&#xff0c;以引用文件之间网页所在位置为参考基础&#xff0c;而建立出的目录路径。因此&#xff0c;当保存于不同目录的网页引用同一个文件时&#xff0c;所使用的路径将不…

设置mysql 数据库和表 的编码方式UTF-8

要设置 MySQL 数据库表和字段的编码方式为 UTF-8&#xff0c;可以使用下面的SQL语句&#xff1a; 1. 设置数据库默认编码为 UTF-8&#xff1a; ALTER DATABASE your_database_name CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;2. 创建表时指定编码为 UTF-8&#xff1a…