cesium 自定义贴图，shadertoy移植教程。

1.前言

cesium中提供了一些高级的api，可以自己写一些shader来制作炫酷的效果。
ShaderToy 是一个可以在线编写、测试和分享图形渲染着色器的网站。它提供了一个图形化的编辑器，可以让用户编写基于 WebGL 的 GLSL 着色器代码，并实时预览渲染结果。

ShaderToy 支持多种渲染效果，包括 2D 和 3D 图形、粒子系统、动画等。用户可以通过调整着色器代码中的参数来实现各种不同的视觉效果。
此外，ShaderToy 还提供了一个社区功能，用户可以分享自己的着色器作品，并与其他用户进行交流和学习。这个社区中有很多优秀的着色器作品，涵盖了各种不同的主题和风格。
总之，ShaderToy 是一个非常有趣和实用的工具，它为图形学爱好者提供了一个学习和创作的平台，同时也为 WebGL 开发者提供了一个快速测试和演示的工具。
现在我们抽取一个简单的额shadertoy例子在cesium中实现。

2.效果图

在这里插入图片描述

3.示例代码

const viewer = new Cesium.Viewer("cesiumContainer");
/** @Description: 电弧球体效果（参考开源代码）* @Version: 1.0* @Author: Julian* @Date: 2022-03-04 15:57:40* @LastEditors: Julian* @LastEditTime: 2022-03-04 16:20:31*/
class EllipsoidElectricMaterialProperty {constructor(options) {this._definitionChanged = new Cesium.Event();this._color = undefined;this._speed = undefined;this.color = options.color;this.speed = options.speed;}get isConstant() {return false;}get definitionChanged() {return this._definitionChanged;}getType(time) {return Cesium.Material.EllipsoidElectricMaterialType;}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 EllipsoidElectricMaterialProperty &&Cesium.Property.equals(this._color, other._color) &&Cesium.Property.equals(this._speed, other._speed)));}
}Object.defineProperties(EllipsoidElectricMaterialProperty.prototype, {color: Cesium.createPropertyDescriptor('color'),speed: Cesium.createPropertyDescriptor('speed')
});Cesium.EllipsoidElectricMaterialProperty = EllipsoidElectricMaterialProperty;
Cesium.Material.EllipsoidElectricMaterialProperty = 'EllipsoidElectricMaterialProperty';
Cesium.Material.EllipsoidElectricMaterialType = 'EllipsoidElectricMaterialType';
Cesium.Material.EllipsoidElectricMaterialSource =`#define UVScale 			 0.4
#define Speed				 0.6#define FBM_WarpPrimary		-0.24
#define FBM_WarpSecond		 0.29
#define FBM_WarpPersist 	 0.78
#define FBM_EvalPersist 	 0.62
#define FBM_Persistence 	 0.5
#define FBM_Lacunarity 		 2.2
#define FBM_Octaves 		 5
//fork from Dave Hoskins
//https://www.shadertoy.com/view/4djSRW
vec4 hash43(vec3 p)
{vec4 p4 = fract(vec4(p.xyzx) * vec4(1031, .1030, .0973, .1099));p4 += dot(p4, p4.wzxy+19.19);return -1.0 + 2.0 * fract(vec4((p4.x + p4.y)*p4.z, (p4.x + p4.z)*p4.y,(p4.y + p4.z)*p4.w, (p4.z + p4.w)*p4.x));
}//offsets for noise
const vec3 nbs[] = vec3[8] (vec3(0.0, 0.0, 0.0),vec3(0.0, 1.0, 0.0),vec3(1.0, 0.0, 0.0),vec3(1.0, 1.0, 0.0),vec3(0.0, 0.0, 1.0),vec3(0.0, 1.0, 1.0),vec3(1.0, 0.0, 1.0),vec3(1.0, 1.0, 1.0)
);//'Simplex out of value noise', forked from: https://www.shadertoy.com/view/XltXRH
//not sure about performance, is this faster than classic simplex noise?
vec4 AchNoise3D(vec3 x)
{vec3 p = floor(x);vec3 fr = smoothstep(0.0, 1.0, fract(x));vec4 L1C1 = mix(hash43(p+nbs[0]), hash43(p+nbs[2]), fr.x);vec4 L1C2 = mix(hash43(p+nbs[1]), hash43(p+nbs[3]), fr.x);vec4 L1C3 = mix(hash43(p+nbs[4]), hash43(p+nbs[6]), fr.x);vec4 L1C4 = mix(hash43(p+nbs[5]), hash43(p+nbs[7]), fr.x);vec4 L2C1 = mix(L1C1, L1C2, fr.y);vec4 L2C2 = mix(L1C3, L1C4, fr.y);return mix(L2C1, L2C2, fr.z);
}vec4 ValueSimplex3D(vec3 p)
{vec4 a = AchNoise3D(p);vec4 b = AchNoise3D(p + 120.5);return (a + b) * 0.5;
}//my FBM
vec4 FBM(vec3 p)
{vec4 f, s, n = vec4(0.0);float a = 1.0, w = 0.0;for (int i=0; i<FBM_Octaves; i++){n = ValueSimplex3D(p);f += (abs(n)) * a;	//billowed-likes += n.zwxy *a;a *= FBM_Persistence;w *= FBM_WarpPersist;p *= FBM_Lacunarity;p += n.xyz * FBM_WarpPrimary *w;p += s.xyz * FBM_WarpSecond;p.z *= FBM_EvalPersist +(f.w *0.5+0.5) *0.015;}return f;
}czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);vec2 st = materialInput.st;vec4 fbm = (FBM(vec3(st, czm_frameNumber * speed +100.0)));float explosionGrad = (dot(fbm.xyzw, fbm.yxwx)) *0.5;explosionGrad = pow(explosionGrad, 1.3);explosionGrad = smoothstep(0.0,1.0,explosionGrad);#define color0 vec3(1.2,0.0,0.0)#define color1 vec3(0.9,0.7,0.3)material.diffuse = explosionGrad * mix(color0, color1, explosionGrad) *1.2 +0.05;;material.alpha = 1.0;return material;}`;Cesium.Material._materialCache.addMaterial(Cesium.Material.EllipsoidElectricMaterialType, {fabric: {type: Cesium.Material.EllipsoidElectricMaterialType,uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),speed: 10.0},source: Cesium.Material.EllipsoidElectricMaterialSource},translucent: function(material) {return true;}
});
const entity=viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(113.9236839, 22.528061),ellipsoid: {radii: new Cesium.Cartesian3(1000.0, 1000.0, 1000.0),material: new Cesium.EllipsoidElectricMaterialProperty({color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),speed: 0.01})}
});
viewer.flyTo(entity);

sandcastle demo

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

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

相关文章

ajax和Axios快速入门

ajax和Axios快速入门

什么是ajax 概念&#xff1a; Asynchronous JavaScript And XML&#xff0c;异步的JavaScrip和XML&#xff0c;重点在异步。 作用&#xff1a; 1&#xff0c;数据交互&#xff0c;可以通过ajax给服务器发送请求&#xff0c;并获取服务器响应的数据。 2&#xff0c;异步交互&am…
阅读更多...
LeetCode2961双模幂运算(相关话题:快速幂)

LeetCode2961双模幂运算(相关话题:快速幂)

题目描述 给你一个下标从 0 开始的二维数组 variables &#xff0c;其中 variables[i] [ai, bi, ci, mi]&#xff0c;以及一个整数 target 。 如果满足以下公式&#xff0c;则下标 i 是 好下标&#xff1a; 返回一个由 好下标 组成的数组&#xff0c;顺序不限 。 示例 &…
阅读更多...
力扣日记12.13-【二叉树篇】从中序与后序遍历序列构造二叉树

力扣日记12.13-【二叉树篇】从中序与后序遍历序列构造二叉树

力扣日记&#xff1a;【二叉树篇】从中序与后序遍历序列构造二叉树 日期&#xff1a;2023.12.13 参考&#xff1a;代码随想录、力扣 106. 从中序与后序遍历序列构造二叉树 题目描述 难度&#xff1a;中等 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二…
阅读更多...
OpenCV极坐标变换函数warpPolar的使用

OpenCV极坐标变换函数warpPolar的使用

学更好的别人&#xff0c; 做更好的自己。 ——《微卡智享》 本文长度为1702字&#xff0c;预计阅读4分钟 前言 前阵子在做方案时&#xff0c;得了几张骨钉的图片&#xff0c;骨科耗材批号效期管理一直是比较麻烦的&#xff0c;贴RFID标签成本太高&#xff0c;所以一般考虑还是…
阅读更多...
深入解析Spring Boot集成MyBatis的多种方式

深入解析Spring Boot集成MyBatis的多种方式

文章目录 1. 引言2. 传统的XML配置方式2.1 引入依赖2.2 配置数据源和MyBatis2.3 编写Mapper接口和XML映射文件2.4 使用Mapper 3. 注解配置方式3.1 引入依赖3.2 配置数据源和MyBatis3.3 编写Mapper接口3.4 使用Mapper 4. MyBatis动态SQL4.1 使用XML配置方式4.2 使用注解配置方式…
阅读更多...
Qt/C++视频监控安卓版/多通道显示视频画面/录像存储/视频播放安卓版/ffmpeg安卓

Qt/C++视频监控安卓版/多通道显示视频画面/录像存储/视频播放安卓版/ffmpeg安卓

一、前言 随着监控行业的发展&#xff0c;越来越多的用户场景是需要在手机上查看监控&#xff0c;而之前主要的监控系统都是在PC端&#xff0c;毕竟PC端屏幕大&#xff0c;能够看到的画面多&#xff0c;解码性能也强劲。早期的手机估计性能弱鸡&#xff0c;而现在的手机性能不…
阅读更多...
Facebook广告系统结构

Facebook广告系统结构

Facebook广告系统是一个复杂的大型系统&#xff0c;由多个组件和子系统相互配合工作&#xff0c;实现了广告的投放、拍卖、个性化推荐和效果评估等功能。下面小编讲讲Facebook广告系统的结构。 1、广告管理界面 广告管理界面是广告主与Facebook进行交互的入口&#xff0c;广告…
阅读更多...
如何在Docker部署draw.io流程图软件并实现公网远程访问

如何在Docker部署draw.io流程图软件并实现公网远程访问

前言 提到流程图&#xff0c;大家第一时间可能会想到Visio&#xff0c;不可否认&#xff0c;VIsio确实是功能强大&#xff0c;但是软件为收费&#xff0c;并且因为其功能强大&#xff0c;导致安装需要很多的系统内存&#xff0c;并且是不可跨平台使用。所以&#xff0c;今天给…
阅读更多...
c语言链表的基本操作

c语言链表的基本操作

在C语言中&#xff0c;链表是一种常见的数据结构&#xff0c;它由一系列节点组成&#xff0c;每个节点包含一个数据元素和一个指向下一个节点的指针。链表的基本操作包括创建、插入、删除和遍历等。 下面是一个简单的链表节点结构体定义&#xff1a; struct Node { int da…
阅读更多...
Leaflet.Graticule源码分析以及经纬度汉化展示

Leaflet.Graticule源码分析以及经纬度汉化展示

目录 前言 一、源码分析 1、类图设计 2、时序调用 3、调用说明 二、经纬度汉化 1、改造前 2、汉化 3、改造效果 总结 前言 在之前的博客基于Leaflet的Webgis经纬网格生成实践中&#xff0c;已经深入介绍了Leaflet.Graticule的实际使用方法和进行了简单的源码分析。认…
阅读更多...
C语言之函数式宏

C语言之函数式宏

目录 函数和数据类型 函数式宏 函数和函数式宏 函数式宏和对象式宏 不带参数的函数式宏 函数式宏和逗号运算符 函数式宏和函数类似并且比函数更加灵活&#xff0c;下面我们就来学习函数式宏的相关内容。 函数和数据类型 我们来编写一个程序&#xff0c;它能计算出所读取…
阅读更多...
『PyTorch』张量和函数之gather()函数

『PyTorch』张量和函数之gather()函数

文章目录 PyTorch中的选择函数gather()函数 参考文献 PyTorch中的选择函数 gather()函数 import torch a torch.arange(1, 16).reshape(5, 3) """ result: a [[1, 2, 3],[4, 5, 6],[7, 8, 9],[10, 11, 12],[13, 14, 15]] """# 定义两个index…
阅读更多...
注册与回调

注册与回调

C 再谈谈注册(本质是建立映射)与回调 在之前的博文中&#xff0c; 我们探讨过映射的重要作用&#xff0c; 请直接看&#xff1a;http://blog.csdn.net/stpeace/article/details/39452203, 在那篇文章中&#xff0c; 我们是用STL中的map来做的&#xff0c; map建立的是key-value…
阅读更多...
ChatGLM-6B模型结构组件源码阅读

ChatGLM-6B模型结构组件源码阅读

一、前言 本文将介绍ChatGLM-6B的模型结构组件源码。 代练链接&#xff1a;https://huggingface.co/THUDM/chatglm-6b/blob/main/modeling_chatglm.py 二、激活函数 torch.jit.script def gelu_impl(x):"""OpenAIs gelu implementation."""r…
阅读更多...
云演 Can you getshell?

云演 Can you getshell?

1、扫目录&#xff0c;看看到upload.php,找到上传点 2、只让上传jpg gif png&#xff0c;上传图片写码 <?php eval($_POST[c]);?>这个码不行 换马 <script language"php">eval($_REQUEST[c])</script>3、蚁剑连接、得到flag
阅读更多...
【MyBatis-Plus】MyBatis进阶使用

【MyBatis-Plus】MyBatis进阶使用

目录 一、MyBatis-Plus简介 1.1 介绍 1.2 优点 1.3 结构 二、MyBatis-Plus基本使用 2.1 配置 2.2 代码生成 2.3 CRUD接口测试 三、MyBatis-Plus策略详解 3.1 主键生成策略 3.2 雪花ID生成器 3.3 字段自动填充策略 3.4 逻辑删除 四、MyBatis-Plus插件使用 4.1 乐…
阅读更多...
TrustZone之完成器：外围设备和内存

TrustZone之完成器：外围设备和内存

到目前为止，在本指南中，我们集中讨论了处理器，但TrustZone远不止是一组处理器功能。要充分利用TrustZone功能，我们还需要系统其余部分的支持。以下是一个启用了TrustZone的系统示例： 本节探讨了该系统中的关键组件以及它们在TrustZone中的作用。 完成器：外围设备…
阅读更多...
服务器数据恢复—raid5热备盘未激活崩溃导致上层oracle数据丢失的数据恢复案例

服务器数据恢复—raid5热备盘未激活崩溃导致上层oracle数据丢失的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌X系列服务器&#xff0c;4块SAS硬盘组建了一组RAID5阵列&#xff0c;还有1块磁盘作为热备盘使用。服务器上层安装的linux操作系统&#xff0c;操作系统上部署了一个基于oracle数据库的OA&#xff08;oracle已经不再为该OA系统提供后续服务…
阅读更多...
【c语言】【visual studio】动态内存管理，malloc,calloc,realloc详解。

【c语言】【visual studio】动态内存管理，malloc,calloc,realloc详解。

引言&#xff1a;随着大一期末的到来&#xff0c;想必许多学生都学到内存的动态管理这一部分了&#xff0c;看望这篇博客后&#xff0c;希望能解除你心中对这一章节的疑惑。 (・∀・(・∀・(・∀・*) 1.malloc详解 malloc的头文件是#include <sdtlib.h>,malloc - C Ref…
阅读更多...
Spring Cloud + Vue前后端分离-第5章 单表管理功能前后端开发

Spring Cloud + Vue前后端分离-第5章 单表管理功能前后端开发

Spring Cloud Vue前后端分离-第5章 单表管理功能前后端开发 完成单表的增删改查 控台单表增删改查的前后端开发&#xff0c;重点学习前后端数据交互&#xff0c;vue ajax库axios的使用等 通用组件开发:分页、确认框、提示框、等待框等 常用的公共组件:确认框、提示框、等待…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023