1721 lines
200 KiB
HTML
1721 lines
200 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<link rel="canonical" href="https://blog.csdn.net/weixin_43700915/article/details/142754373"/>
|
||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||
<meta name="renderer" content="webkit"/>
|
||
<meta name="force-rendering" content="webkit"/>
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<meta name="report" content='{"pid": "blog", "spm":"1001.2101"}'>
|
||
<meta name="referrer" content="always">
|
||
<meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="alternate" media="handheld" href="#" />
|
||
<meta name="shenma-site-verification" content="5a59773ab8077d4a62bf469ab966a63b_1497598848">
|
||
<meta name="applicable-device" content="pc">
|
||
<link href="https://g.csdnimg.cn/static/logo/favicon32.ico" rel="shortcut icon" type="image/x-icon" />
|
||
<title>Cesium进阶学习四、shadertoy（着色器）_cesium 着色器-CSDN博客</title>
|
||
|
||
<meta name="keywords" content="cesium 着色器">
|
||
<meta name="csdn-baidu-search" content='{"autorun":true,"install":true,"keyword":"cesium 着色器"}'>
|
||
<meta name="description" content="文章浏览阅读1.9k次，点赞23次，收藏12次。Cesium进阶学习着色器_cesium 着色器">
|
||
<link rel="stylesheet" type="text/css" href="https://csdnimg.cn/release/blogv2/dist/pc/css/detail_enter-62005624ac.min.css">
|
||
|
||
<link rel="stylesheet" type="text/css" href="https://csdnimg.cn/release/blogv2/dist/pc/themesSkin/skin-whitemove/skin-whitemove-2af9149bdc.min.css">
|
||
|
||
|
||
|
||
<meta name="toolbar" content='{"type":"0","fixModel":"1"}'>
|
||
|
||
|
||
|
||
<link rel="stylesheet" type="text/css" href="https://csdnimg.cn/public/sandalstrap/1.4/css/sandalstrap.min.css">
|
||
<style>
|
||
.MathJax, .MathJax_Message, .MathJax_Preview{
|
||
display: none
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
</head>
|
||
<body class="nodata " style="">
|
||
<div id="toolbarBox" style="min-height: 48px;"></div>
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/pc/css/blog_code-01256533b5.min.css">
|
||
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/chart-3456820cac.css" />
|
||
<link rel="stylesheet" href="https://g.csdnimg.cn/lib/swiper/6.0.4/css/swiper.css" />
|
||
|
||
|
||
<div class="main_father clearfix d-flex justify-content-center mainfather-concision" style="height:100%;">
|
||
<div class="container clearfix container-concision" id="mainBox">
|
||
|
||
<main>
|
||
|
||
<div class="blog-content-box">
|
||
<div class="article-header-box">
|
||
<div class="article-header">
|
||
<div class="article-title-box">
|
||
<h1 class="title-article" id="articleContentId">Cesium进阶学习四、shadertoy（着色器）</h1>
|
||
</div>
|
||
<div class="article-info-box">
|
||
<div class="up-time">最新推荐文章于 2024-10-15 11:50:42 发布</div>
|
||
<div class="article-bar-top">
|
||
<img class="article-type-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/original.png" alt="">
|
||
<div class="bar-content">
|
||
<a href="https://mall.csdn.net/vip" data-report-query="spm=3001.10404" data-report-click='{"spm":"3001.10404"}' data-report-view='{"spm":"3001.10404"}' class="article-vip-box" target="_blank"><img class="article-vip-img-new" src="https://csdnimg.cn/release/blogv2/dist/pc/img/identityVipNew.png" alt=""></a>
|
||
<a class="follow-nickName " href="https://blog.csdn.net/weixin_43700915" target="_blank" rel="noopener" title="Cesium进阶学习">Cesium进阶学习</a>
|
||
<img class="article-time-img article-heard-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCurrentTime2.png" alt="">
|
||
<span class="time blog-postTime" data-time="2024-10-08 11:41:08">最新推荐文章于 2024-10-15 11:50:42 发布</span>
|
||
<div class="read-count-box">
|
||
<img class="article-read-img article-heard-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/articleReadEyes2.png" alt="">
|
||
<span class="read-count">阅读量1.9k</span>
|
||
<a id="blog_detail_zk_collection" class="un-collection" data-report-click='{"mod":"popu_823","spm":"1001.2101.3001.4232","ab":"new"}'>
|
||
<img class="article-collect-img article-heard-img un-collect-status isdefault" style="display:inline-block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollect2.png" alt="">
|
||
<img class="article-collect-img article-heard-img collect-status isactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive2.png" alt="">
|
||
<span class="name">收藏</span>
|
||
<span class="get-collection">
|
||
12
|
||
</span>
|
||
</a>
|
||
<div class="read-count-box is-like">
|
||
<img class="article-read-img article-heard-img" style="display:none" id="is-like-imgactive-new" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2023Active.png" alt="">
|
||
<img class="article-read-img article-heard-img" style="display:block" id="is-like-img-new" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2023Black.png" alt="">
|
||
<span class="read-count" id="blog-digg-num">点赞数
|
||
23
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blog-tags-box">
|
||
<div class="tags-box artic-tag-box">
|
||
<span class="label">分类专栏：</span>
|
||
<a class="tag-link" href="https://blog.csdn.net/weixin_43700915/category_12801806.html" target="_blank" rel="noopener">Cesium进阶学习</a>
|
||
<span class="label">文章标签：</span>
|
||
<a rel="nofollow" data-report-query="spm=1001.2101.3001.4223" data-report-click='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"学习","ab":"new","extra":"{\"searchword\":\"学习\"}"}' data-report-view='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"学习","ab":"new","extra":"{\"searchword\":\"学习\"}"}' class="tag-link" href="https://so.csdn.net/so/search/s.do?q=%E5%AD%A6%E4%B9%A0&t=all&o=vip&s=&l=&f=&viparticle=&from_tracking_code=tag_word&from_code=app_blog_art" target="_blank" rel="noopener">学习</a>
|
||
<a rel="nofollow" data-report-query="spm=1001.2101.3001.4223" data-report-click='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"着色器","ab":"new","extra":"{\"searchword\":\"着色器\"}"}' data-report-view='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"着色器","ab":"new","extra":"{\"searchword\":\"着色器\"}"}' class="tag-link" href="https://so.csdn.net/so/search/s.do?q=%E7%9D%80%E8%89%B2%E5%99%A8&t=all&o=vip&s=&l=&f=&viparticle=&from_tracking_code=tag_word&from_code=app_blog_art" target="_blank" rel="noopener">着色器</a>
|
||
</div>
|
||
</div>
|
||
<div class="slide-content-box">
|
||
<div class="article-copyright">
|
||
<div class="creativecommons">
|
||
版权声明：本文为博主原创文章，遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener"> CC 4.0 BY-SA </a>版权协议，转载请附上原文出处链接和本声明。
|
||
</div>
|
||
<div class="article-source-link">
|
||
本文链接：<a href="https://blog.csdn.net/weixin_43700915/article/details/142754373" target="_blank">https://blog.csdn.net/weixin_43700915/article/details/142754373</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="operating">
|
||
<a class="href-article-edit slide-toggle">版权</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div id="blogHuaweiyunAdvert"></div>
|
||
<article class="baidu_pl">
|
||
<div id="article_content" class="article_content clearfix">
|
||
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
|
||
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-704d5b9767.css">
|
||
|
||
<div id="content_views" class="markdown_views prism-atom-one-light">
|
||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||
<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
|
||
</svg>
|
||
<p><strong>一、简介</strong><br /> <a href="https://www.shadertoy.com/" rel="nofollow">shadertoy</a>是一个基于webgl的分享Shader的开放平台，用户可以在上面根据既定规则分享自己编写的shader。在Cesium中要想实现一些酷炫的效果，唯一的一条路就是写shader，而shader的编写应该算是图形学中的难度天花板了。好在有很多shader大佬分享了自己编写的glsl效果，比如shadertoy网站上就是这些大牛们的作品，我们可以借鉴。<br /> <img src="https://img-blog.csdnimg.cn/img_convert/c1eeb7716326293e03113f99c49eda30.png#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p><strong>二、shadertoy着色器基本结构</strong></p>
|
||
<p>shadertoy上的shader是纯2d绘图，没有几何顶点这些概念，它的绘图方式和canvas绘图方式很像，它将整个canvas作为绘图的画布，所以输入参数fragCoord的x值范围是（0，画布的宽度），fragCoord的y值范围是（0，画布的高度），画布的宽高在定义的输入参数中是iResolution，所以fragCoord.x范围就是(0,iResolution.x),fragCoord.y范围就是(0,iResolution.y)。<br /> <img src="https://img-blog.csdnimg.cn/img_convert/8103ee5541c006dfb125fbe2e78ed87d.png#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p>如图所示，shadertoy上的shader示例最基本的着色器结构主要包括两个部分：<br /> a、输入参数的定义<br /> b、着色器的入口函数</p>
|
||
<p>1、输入参数，通过uniform来定义外部的输入值。</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;">uniform vec3 iResolution<span class="token punctuation">;</span> <span class="token comment">// 视口分辨率，即画布的宽高</span>
|
||
uniform <span class="token keyword">float</span> iTime<span class="token punctuation">;</span> <span class="token comment">// shader 的运行时间 秒</span>
|
||
uniform <span class="token keyword">float</span> iTimeDelta<span class="token punctuation">;</span> <span class="token comment">// 渲染时间 秒</span>
|
||
uniform <span class="token keyword">float</span> iFrameRate<span class="token punctuation">;</span> <span class="token comment">// shader 帧率</span>
|
||
uniform <span class="token keyword">int</span> iFrame<span class="token punctuation">;</span> <span class="token comment">// shader 帧率</span>
|
||
uniform <span class="token keyword">float</span> iChannelTime<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 频道运行时间 不管</span>
|
||
uniform vec3 iChannelResolution<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 频道分辨率 不管</span>
|
||
uniform vec4 iMouse<span class="token punctuation">;</span> <span class="token comment">// 鼠标坐标</span>
|
||
uniform samplerXX iChannel0<span class="token punctuation">.</span><span class="token number">.3</span><span class="token punctuation">;</span> <span class="token comment">// 输入的纹理 比如我们从一张图片上采用颜色</span>
|
||
uniform vec4 iDate<span class="token punctuation">;</span> <span class="token comment">// 日期 年月日 不管</span>
|
||
uniform <span class="token keyword">float</span> iSampleRate<span class="token punctuation">;</span> <span class="token comment">// 声音采样 不管</span>
|
||
</code></pre>
|
||
<p>2、入口函数mainImage</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;"><span class="token keyword">void</span> <span class="token function">mainImage</span><span class="token punctuation">(</span>out vec4 fragColor<span class="token punctuation">,</span> in vec2 fragCoord <span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
fragColor <span class="token operator">=</span> <span class="token function">vec4</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre>
|
||
<p>方法的第一个参数fragColor,是一个vec4类型的变量，表示最后输出的颜色值。<br /> 方法的第二个参数fragCoord，是一个vec2类型的变量，表示输入的像素坐标。</p>
|
||
<p><strong>三、在cesium中如何使用</strong></p>
|
||
<p>shadertoy上的着色器是在一个canvas画布上进行工作的，要移植到Cesium中，我们需要找一个载体来替代canvas。我们知道，Cesium绘制几何图形可以通过Entity和Primitive两种方式，那么只有Primitive+Appearance比较合适了,关于Primitive的使用及介绍，可以观看前面的章节。要将着色器移植到Cesium中，我们先来重点看看shadertoy上的shader着色器需要用到的参数。以下面这个例子讲解https://www.shadertoy.com/view/XdlSDs<br /> <img src="https://img-blog.csdnimg.cn/img_convert/71d7b7a8f35a02471424f5185d0ecbdb.png#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p>glsl代码：</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;"><span class="token keyword">void</span> <span class="token function">mainImage</span><span class="token punctuation">(</span>out vec4 fragColor<span class="token punctuation">,</span> in vec2 fragCoord <span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
vec2 p <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">2.0</span><span class="token operator">*</span>fragCoord<span class="token punctuation">.</span>xy<span class="token operator">-</span>iResolution<span class="token punctuation">.</span>xy<span class="token punctuation">)</span><span class="token operator">/</span>iResolution<span class="token punctuation">.</span>y<span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> tau <span class="token operator">=</span> <span class="token number">3.1415926535</span><span class="token operator">*</span><span class="token number">2.0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> a <span class="token operator">=</span> <span class="token function">atan</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>x<span class="token punctuation">,</span>p<span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> r <span class="token operator">=</span> <span class="token function">length</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">0.75</span><span class="token punctuation">;</span>
|
||
vec2 uv <span class="token operator">=</span> <span class="token function">vec2</span><span class="token punctuation">(</span>a<span class="token operator">/</span>tau<span class="token punctuation">,</span>r<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">//get the color</span>
|
||
<span class="token keyword">float</span> xCol <span class="token operator">=</span> <span class="token punctuation">(</span>uv<span class="token punctuation">.</span>x <span class="token operator">-</span> <span class="token punctuation">(</span>iTime <span class="token operator">/</span> <span class="token number">3.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">3.0</span><span class="token punctuation">;</span>
|
||
xCol <span class="token operator">=</span> <span class="token function">mod</span><span class="token punctuation">(</span>xCol<span class="token punctuation">,</span> <span class="token number">3.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 horColour <span class="token operator">=</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.25</span><span class="token punctuation">,</span> <span class="token number">0.25</span><span class="token punctuation">,</span> <span class="token number">0.25</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>xCol <span class="token operator"><</span> <span class="token number">1.0</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
|
||
|
||
horColour<span class="token punctuation">.</span>r <span class="token operator">+=</span> <span class="token number">1.0</span> <span class="token operator">-</span> xCol<span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>g <span class="token operator">+=</span> xCol<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>xCol <span class="token operator"><</span> <span class="token number">2.0</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
|
||
|
||
xCol <span class="token operator">-=</span> <span class="token number">1.0</span><span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>g <span class="token operator">+=</span> <span class="token number">1.0</span> <span class="token operator">-</span> xCol<span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>b <span class="token operator">+=</span> xCol<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
|
||
|
||
xCol <span class="token operator">-=</span> <span class="token number">2.0</span><span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>b <span class="token operator">+=</span> <span class="token number">1.0</span> <span class="token operator">-</span> xCol<span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>r <span class="token operator">+=</span> xCol<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// draw color beam</span>
|
||
uv <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">2.0</span> <span class="token operator">*</span> uv<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1.0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> beamWidth <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">0.7</span><span class="token operator">+</span><span class="token number">0.5</span><span class="token operator">*</span><span class="token function">cos</span><span class="token punctuation">(</span>uv<span class="token punctuation">.</span>x<span class="token operator">*</span><span class="token number">10.0</span><span class="token operator">*</span>tau<span class="token operator">*</span><span class="token number">0.15</span><span class="token operator">*</span><span class="token function">clamp</span><span class="token punctuation">(</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token number">5.0</span> <span class="token operator">+</span> <span class="token number">10.0</span><span class="token operator">*</span><span class="token function">cos</span><span class="token punctuation">(</span>iTime<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">10.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token function">abs</span><span class="token punctuation">(</span><span class="token number">1.0</span> <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token number">30.0</span> <span class="token operator">*</span> uv<span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 horBeam <span class="token operator">=</span> <span class="token function">vec3</span><span class="token punctuation">(</span>beamWidth<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
fragColor <span class="token operator">=</span> <span class="token function">vec4</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">(</span> horBeam<span class="token punctuation">)</span> <span class="token operator">*</span> horColour<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre>
|
||
<p>a、首先是fragCoord，前面介绍过，fragCoord表示当前处理的像素坐标，是一个vec2类型，fragCoord.x范围为(0,画布宽度),fragCoord.y范围为(0,画布高度)。<br /> b、其次是iResolution，iResolution代表的是当前画布的宽高，即绘图区域的尺寸，所以fragCoord.x范围就是(0,iResolution.x),fragCoord.y范围就是(0,iResolution.y)。<br /> c、然后我们还在代码中看到有个iTime，该参数代表当前运行的时间，一般用来实现动画，因为您会发现大多数shader的效果都是动态的。<br /> d、最后是输出结果fragColor,代表最后计算的颜色输出值，在Cesium中为out_FragColor。</p>
|
||
<p>接下来介绍在Cesium如何获取对应的参数：</p>
|
||
<p>a、fragCoord在Cesium有个gl_FragCoord与之对应，这是一个WebGL内置的变量。<br /> b、iResolution在Cesium有个czm_viewport与之对应，不过使用时采用zw分量即 czm_viewport.zw<br /> c、iTime在Cesium中没有对应的变量，我们可以通过变量的方式传递一个参数，然后在渲染时不断修改该值，不过这种方式略显麻烦，在Cesium中我们可以用float iTime=czm_frameNumber/100.来模拟，czm_frameNumber代表当前帧，是一个自增长的数值，所以可以用来模拟时间不断地增长。</p>
|
||
<p>接下来我们实操一下，在Cesium中实现该shader的效果：</p>
|
||
<p>1、首先我们创建一个Primitive并添加到sene中</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;">let xMin <span class="token operator">=</span> <span class="token number">115.894604</span><span class="token punctuation">,</span> yMin <span class="token operator">=</span> <span class="token number">39.516896</span><span class="token punctuation">,</span> xMax <span class="token operator">=</span> <span class="token number">117.431959</span><span class="token punctuation">,</span> yMax <span class="token operator">=</span> <span class="token number">40.630521</span><span class="token punctuation">;</span>
|
||
let rect <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>Rectangle</span><span class="token punctuation">(</span><span class="token class-name">Cesium<span class="token punctuation">.</span>Math</span><span class="token punctuation">.</span><span class="token function">toRadians</span><span class="token punctuation">(</span>xMin<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>Math</span><span class="token punctuation">.</span><span class="token function">toRadians</span><span class="token punctuation">(</span>yMin<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>Math</span><span class="token punctuation">.</span><span class="token function">toRadians</span><span class="token punctuation">(</span>xMax<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>Math</span><span class="token punctuation">.</span><span class="token function">toRadians</span><span class="token punctuation">(</span>yMax<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> rectangle <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>RectangleGeometry</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
rectangle<span class="token operator">:</span> rect<span class="token punctuation">,</span>
|
||
height<span class="token operator">:</span> <span class="token number">10000.0</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> geometry <span class="token operator">=</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>RectangleGeometry</span><span class="token punctuation">.</span><span class="token function">createGeometry</span><span class="token punctuation">(</span>rectangle<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
viewer<span class="token punctuation">.</span>scene<span class="token punctuation">.</span>primitives<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>Primitive</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
geometryInstances<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>GeometryInstance</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
geometry<span class="token operator">:</span> geometry
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>2、此时会发现什么也看不见，这是因为没有设置外观，我们创建一个默认的外观</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;">let appearance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>MaterialAppearance</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
material<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>Material</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
fabric<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
|
||
type<span class="token operator">:</span> <span class="token string">"Color"</span><span class="token punctuation">,</span>
|
||
uniforms<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
|
||
color<span class="token operator">:</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>Color</span><span class="token punctuation">.</span>RED
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
primitive<span class="token punctuation">.</span>appearance <span class="token operator">=</span> appearance<span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p><img src="https://img-blog.csdnimg.cn/img_convert/aa4fd912f61efc677780ff1378cd3d11.png#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p>3、接下来我们为外观添加片元着色器，并将shadertoy上的shader赋值给外观的片元着色器属性。</p>
|
||
<p>shadertoy上glsl代码：</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;"> fragmentShaderSource<span class="token operator">:</span> `
|
||
<span class="token keyword">void</span> <span class="token function">mainImage</span><span class="token punctuation">(</span> out vec4 fragColor<span class="token punctuation">,</span> in vec2 fragCoord <span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
vec2 p <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">2.0</span><span class="token operator">*</span>fragCoord<span class="token punctuation">.</span>xy<span class="token operator">-</span>iResolution<span class="token punctuation">.</span>xy<span class="token punctuation">)</span><span class="token operator">/</span>iResolution<span class="token punctuation">.</span>y<span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> tau <span class="token operator">=</span> <span class="token number">3.1415926535</span><span class="token operator">*</span><span class="token number">2.0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> a <span class="token operator">=</span> <span class="token function">atan</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>x<span class="token punctuation">,</span>p<span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> r <span class="token operator">=</span> <span class="token function">length</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">0.75</span><span class="token punctuation">;</span>
|
||
vec2 uv <span class="token operator">=</span> <span class="token function">vec2</span><span class="token punctuation">(</span>a<span class="token operator">/</span>tau<span class="token punctuation">,</span>r<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">//get the color</span>
|
||
<span class="token keyword">float</span> xCol <span class="token operator">=</span> <span class="token punctuation">(</span>uv<span class="token punctuation">.</span>x <span class="token operator">-</span> <span class="token punctuation">(</span>iTime <span class="token operator">/</span> <span class="token number">3.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">3.0</span><span class="token punctuation">;</span>
|
||
xCol <span class="token operator">=</span> <span class="token function">mod</span><span class="token punctuation">(</span>xCol<span class="token punctuation">,</span> <span class="token number">3.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 horColour <span class="token operator">=</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.25</span><span class="token punctuation">,</span> <span class="token number">0.25</span><span class="token punctuation">,</span> <span class="token number">0.25</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>xCol <span class="token operator"><</span> <span class="token number">1.0</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
|
||
|
||
horColour<span class="token punctuation">.</span>r <span class="token operator">+=</span> <span class="token number">1.0</span> <span class="token operator">-</span> xCol<span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>g <span class="token operator">+=</span> xCol<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>xCol <span class="token operator"><</span> <span class="token number">2.0</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
|
||
|
||
xCol <span class="token operator">-=</span> <span class="token number">1.0</span><span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>g <span class="token operator">+=</span> <span class="token number">1.0</span> <span class="token operator">-</span> xCol<span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>b <span class="token operator">+=</span> xCol<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
|
||
|
||
xCol <span class="token operator">-=</span> <span class="token number">2.0</span><span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>b <span class="token operator">+=</span> <span class="token number">1.0</span> <span class="token operator">-</span> xCol<span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>r <span class="token operator">+=</span> xCol<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// draw color beam</span>
|
||
uv <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">2.0</span> <span class="token operator">*</span> uv<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1.0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> beamWidth <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">0.7</span><span class="token operator">+</span><span class="token number">0.5</span><span class="token operator">*</span><span class="token function">cos</span><span class="token punctuation">(</span>uv<span class="token punctuation">.</span>x<span class="token operator">*</span><span class="token number">10.0</span><span class="token operator">*</span>tau<span class="token operator">*</span><span class="token number">0.15</span><span class="token operator">*</span><span class="token function">clamp</span><span class="token punctuation">(</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token number">5.0</span> <span class="token operator">+</span> <span class="token number">10.0</span><span class="token operator">*</span><span class="token function">cos</span><span class="token punctuation">(</span>iTime<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">10.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token function">abs</span><span class="token punctuation">(</span><span class="token number">1.0</span> <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token number">30.0</span> <span class="token operator">*</span> uv<span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 horBeam <span class="token operator">=</span> <span class="token function">vec3</span><span class="token punctuation">(</span>beamWidth<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
fragColor <span class="token operator">=</span> <span class="token function">vec4</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">(</span> horBeam<span class="token punctuation">)</span> <span class="token operator">*</span> horColour<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
`
|
||
</code></pre>
|
||
<p>操作步骤：<br /> a、首先我们需要修改着色器入口函数，即将mainImage修改为main，因为Appearance片元着色器的入口函数是main。<br /> b、然后将输出结果的fragColor修改为out_FragColor。<br /> c、最后我们按照上面说的替换掉fragCoord，fragCoord、iTime</p>
|
||
<p>我们需要的代码：</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;">fragmentShaderSource<span class="token operator">:</span> `
|
||
<span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
<span class="token keyword">float</span> iTime<span class="token operator">=</span>czm_frameNumber<span class="token operator">/</span><span class="token number">100.</span><span class="token punctuation">;</span>
|
||
vec2 p <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">2.0</span> <span class="token operator">*</span> gl_FragCoord<span class="token punctuation">.</span>xy<span class="token operator">-</span>czm_viewport<span class="token punctuation">.</span>zw<span class="token punctuation">)</span><span class="token operator">/</span>czm_viewport<span class="token punctuation">.</span>w<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">float</span> tau <span class="token operator">=</span> <span class="token number">3.1415926535</span><span class="token operator">*</span><span class="token number">2.0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> a <span class="token operator">=</span> <span class="token function">atan</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>x<span class="token punctuation">,</span>p<span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> r <span class="token operator">=</span> <span class="token function">length</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">0.75</span><span class="token punctuation">;</span>
|
||
vec2 uv <span class="token operator">=</span> <span class="token function">vec2</span><span class="token punctuation">(</span>a<span class="token operator">/</span>tau<span class="token punctuation">,</span>r<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">//get the color</span>
|
||
<span class="token keyword">float</span> xCol <span class="token operator">=</span> <span class="token punctuation">(</span>uv<span class="token punctuation">.</span>x <span class="token operator">-</span> <span class="token punctuation">(</span>iTime <span class="token operator">/</span> <span class="token number">3.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">3.0</span><span class="token punctuation">;</span>
|
||
xCol <span class="token operator">=</span> <span class="token function">mod</span><span class="token punctuation">(</span>xCol<span class="token punctuation">,</span> <span class="token number">3.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 horColour <span class="token operator">=</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.25</span><span class="token punctuation">,</span> <span class="token number">0.25</span><span class="token punctuation">,</span> <span class="token number">0.25</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>xCol <span class="token operator"><</span> <span class="token number">1.0</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
|
||
|
||
horColour<span class="token punctuation">.</span>r <span class="token operator">+=</span> <span class="token number">1.0</span> <span class="token operator">-</span> xCol<span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>g <span class="token operator">+=</span> xCol<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>xCol <span class="token operator"><</span> <span class="token number">2.0</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
|
||
|
||
xCol <span class="token operator">-=</span> <span class="token number">1.0</span><span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>g <span class="token operator">+=</span> <span class="token number">1.0</span> <span class="token operator">-</span> xCol<span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>b <span class="token operator">+=</span> xCol<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
|
||
|
||
xCol <span class="token operator">-=</span> <span class="token number">2.0</span><span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>b <span class="token operator">+=</span> <span class="token number">1.0</span> <span class="token operator">-</span> xCol<span class="token punctuation">;</span>
|
||
horColour<span class="token punctuation">.</span>r <span class="token operator">+=</span> xCol<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// draw color beam</span>
|
||
uv <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">2.0</span> <span class="token operator">*</span> uv<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1.0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> beamWidth <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">0.7</span><span class="token operator">+</span><span class="token number">0.5</span><span class="token operator">*</span><span class="token function">cos</span><span class="token punctuation">(</span>uv<span class="token punctuation">.</span>x<span class="token operator">*</span><span class="token number">10.0</span><span class="token operator">*</span>tau<span class="token operator">*</span><span class="token number">0.15</span><span class="token operator">*</span><span class="token function">clamp</span><span class="token punctuation">(</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token number">5.0</span> <span class="token operator">+</span> <span class="token number">10.0</span><span class="token operator">*</span><span class="token function">cos</span><span class="token punctuation">(</span>iTime<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">10.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token function">abs</span><span class="token punctuation">(</span><span class="token number">1.0</span> <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token number">30.0</span> <span class="token operator">*</span> uv<span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 horBeam <span class="token operator">=</span> <span class="token function">vec3</span><span class="token punctuation">(</span>beamWidth<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
out_FragColor <span class="token operator">=</span> <span class="token function">vec4</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">(</span> horBeam<span class="token punctuation">)</span> <span class="token operator">*</span> horColour<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
`
|
||
</code></pre>
|
||
<p><img src="https://img-blog.csdnimg.cn/img_convert/b71065d007c4923af46f2406af5cca5b.gif#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p>但是移动地球我们会发现绘制的结果始终是在屏幕中心，这其实是一个正确的结果，因为这个示例在shadertoy上也是始终绘制在屏幕中心。现在我们需要将Primitive的几何体作为绘制的画布，上面我们是使用gl_FragCoord坐标来获取当前应该处理的像素，我们现在需要改变为Appearance的纹理坐标，通过Appearence的纹理坐标，计算当前Appearence上需要处理的像素。</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;">vec2 p <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">2.0</span> <span class="token operator">*</span> gl_FragCoord<span class="token punctuation">.</span>xy<span class="token operator">-</span>czm_viewport<span class="token punctuation">.</span>zw<span class="token punctuation">)</span><span class="token operator">/</span>czm_viewport<span class="token punctuation">.</span>w<span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>该行代码的意思是将绘图区的宽高转换到[-1,1]的一个区间中。而在Appearance的片元着色器中，相对于该Primitive对应的Geometry而言，绘图区的宽高已经被限制在了[0,1]的区间了，这可以由片元着色器的st推断，因为片元着色器的st一般就是[0,1]。现在我们改造一下代码，将绘图区限定到Appearance的纹理区间中</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;"> vec2 p <span class="token operator">=</span> <span class="token number">2.0</span> <span class="token operator">*</span> v_st <span class="token operator">-</span> <span class="token number">1.</span><span class="token punctuation">;</span><span class="token comment">//(2.0*fragCoord.xy-iResolution.xy)/iResolution.y;</span>
|
||
</code></pre>
|
||
<p>因为v_st区间是[0,1]，所以我们的变换一下到[-1,1]，运行结果如下<br /> <img src="https://img-blog.csdnimg.cn/img_convert/c7673cdb75556dab2dbdff9497328541.gif#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p>到这里我们已经成功将shadertoy上这个示例的shader移植到Cesium上的Primitve中</p>
|
||
<p><strong>四、着色器使用技巧</strong></p>
|
||
<p>上面示例的shader成功移植到Cesium中的Primitive上。分享2个在使用shadertoy上的shader时的技巧：</p>
|
||
<p>1、在Cesium中如何选择对应的载体作为画布<br /> 因为shadertoy上的shader类型canvas的绘制原理，是将canvas作为一个画布，在Cesium中我们可以选择Entity或Primtive来作为载体。又因为要方便操作片元着色器，所以我们选择了Primitive，但是Primitive中又有很多Geometry类型，那具体使用哪种Geometry呢？根据经验，最好选择像RectangleGeometry、PlaneGeomery这种比较规则的几何类型，因为shader绘图其实是根据纹理坐标来实现的，而这种规则的几何往往 它的纹理坐标也比较规则。</p>
|
||
<p>2、如何去除黑色背景<br /> 虽然我们已经成功将shader移植到Cesium中，但是黑色的背景着实有点丑，我们使用shader的初衷是为了好看、酷炫，这效果好像有点违背了我们的初衷。那我们该如何去除这个黑色的背景呢？我们可以分析一下这个黑色，其实黑色的值就是vec3(0,0,0)，rgb三个分量越接近于0，就越黑，当然，这也代表着r+g+b约接近0，所以我们可以这样去消除黑色背景。</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;">out_FragColor <span class="token operator">=</span> <span class="token function">vec4</span><span class="token punctuation">(</span>color<span class="token punctuation">,</span>color<span class="token punctuation">.</span>r<span class="token operator">+</span>color<span class="token punctuation">.</span>g<span class="token operator">+</span>color<span class="token punctuation">.</span>g<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p><img src="https://img-blog.csdnimg.cn/img_convert/09702a92331f297b923498f195ad37f6.gif#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p>这样就可以了。</p>
|
||
<p><strong>五、难度加深，带有输入纹理数据的着色器示例（应用）</strong></p>
|
||
<p>实现一个<a href="https://www.shadertoy.com/view/ldfyzl" rel="nofollow">shader</a>上带有输入纹理数据的例子<br /> <img src="https://img-blog.csdnimg.cn/img_convert/e9ff0716de4a7c4710989de8b24d3998.gif#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p>按照 “在Cesium中如何使用” 一节的思路，我们先创建好Primitive、Appearance，然后将着色器代码拷贝进来并修改相关参数。</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;">let xMin <span class="token operator">=</span> <span class="token number">115.894604</span><span class="token punctuation">,</span> yMin <span class="token operator">=</span> <span class="token number">39.516896</span><span class="token punctuation">,</span> xMax <span class="token operator">=</span> <span class="token number">117.431959</span><span class="token punctuation">,</span> yMax <span class="token operator">=</span> <span class="token number">40.630521</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> rectangle <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>RectangleGeometry</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
rectangle<span class="token operator">:</span> rect<span class="token punctuation">,</span>
|
||
height<span class="token operator">:</span> <span class="token number">10000.0</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> geometry <span class="token operator">=</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>RectangleGeometry</span><span class="token punctuation">.</span><span class="token function">createGeometry</span><span class="token punctuation">(</span>rectangle<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
viewer<span class="token punctuation">.</span>scene<span class="token punctuation">.</span>primitives<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>Primitive</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
geometryInstances<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>GeometryInstance</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
geometry<span class="token operator">:</span> geometry
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
appearance<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>MaterialAppearance</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
material<span class="token operator">:</span><span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>Material</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
fabric<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
|
||
uniforms<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
|
||
image<span class="token operator">:</span><span class="token string">"./texture.png"</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">,</span>
|
||
fragmentShaderSource<span class="token operator">:</span> `
|
||
in vec3 v_positionEC<span class="token punctuation">;</span>
|
||
in vec3 v_normalEC<span class="token punctuation">;</span>
|
||
in vec2 v_st<span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// Maximum number of cells a ripple can cross.</span>
|
||
#define MAX_RADIUS <span class="token number">2</span>
|
||
|
||
<span class="token comment">// Set to 1 to hash twice. Slower, but less patterns.</span>
|
||
#define DOUBLE_HASH <span class="token number">0</span>
|
||
|
||
<span class="token comment">// Hash functions shamefully stolen from:</span>
|
||
<span class="token comment">// https://www.shadertoy.com/view/4djSRW</span>
|
||
#define HASHSCALE1 <span class="token number">.1031</span>
|
||
#define <span class="token class-name">HASHSCALE3</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">.1031</span><span class="token punctuation">,</span> <span class="token number">.1030</span><span class="token punctuation">,</span> <span class="token number">.0973</span><span class="token punctuation">)</span>
|
||
|
||
<span class="token keyword">float</span> <span class="token function">hash12</span><span class="token punctuation">(</span>vec2 p<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
vec3 p3 <span class="token operator">=</span> <span class="token function">fract</span><span class="token punctuation">(</span><span class="token function">vec3</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>xyx<span class="token punctuation">)</span> <span class="token operator">*</span> HASHSCALE1<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
p3 <span class="token operator">+=</span> <span class="token function">dot</span><span class="token punctuation">(</span>p3<span class="token punctuation">,</span> p3<span class="token punctuation">.</span>yzx <span class="token operator">+</span> <span class="token number">19.19</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token function">fract</span><span class="token punctuation">(</span><span class="token punctuation">(</span>p3<span class="token punctuation">.</span>x <span class="token operator">+</span> p3<span class="token punctuation">.</span>y<span class="token punctuation">)</span> <span class="token operator">*</span> p3<span class="token punctuation">.</span>z<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
vec2 <span class="token function">hash22</span><span class="token punctuation">(</span>vec2 p<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
vec3 p3 <span class="token operator">=</span> <span class="token function">fract</span><span class="token punctuation">(</span><span class="token function">vec3</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>xyx<span class="token punctuation">)</span> <span class="token operator">*</span> HASHSCALE3<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
p3 <span class="token operator">+=</span> <span class="token function">dot</span><span class="token punctuation">(</span>p3<span class="token punctuation">,</span> p3<span class="token punctuation">.</span>yzx<span class="token operator">+</span><span class="token number">19.19</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token function">fract</span><span class="token punctuation">(</span><span class="token punctuation">(</span>p3<span class="token punctuation">.</span>xx<span class="token operator">+</span>p3<span class="token punctuation">.</span>yz<span class="token punctuation">)</span><span class="token operator">*</span>p3<span class="token punctuation">.</span>zy<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span> <span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
|
||
<span class="token comment">//float resolution = 10. * exp2(-3.*iMouse.x/iResolution.x);</span>
|
||
<span class="token comment">// vec2 uv = fragCoord.xy / iResolution.y * resolution;</span>
|
||
<span class="token keyword">float</span> resolution <span class="token operator">=</span><span class="token number">20.</span><span class="token punctuation">;</span>
|
||
vec2 uv <span class="token operator">=</span> v_st <span class="token operator">*</span> resolution<span class="token punctuation">;</span>
|
||
vec2 p0 <span class="token operator">=</span> <span class="token function">floor</span><span class="token punctuation">(</span>uv<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">float</span> iTime<span class="token operator">=</span>czm_frameNumber<span class="token operator">/</span><span class="token number">100.</span><span class="token punctuation">;</span>
|
||
|
||
vec2 circles <span class="token operator">=</span> <span class="token function">vec2</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> j <span class="token operator">=</span> <span class="token operator">-</span>MAX_RADIUS<span class="token punctuation">;</span> j <span class="token operator"><=</span> MAX_RADIUS<span class="token punctuation">;</span> <span class="token operator">++</span>j<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token operator">-</span>MAX_RADIUS<span class="token punctuation">;</span> i <span class="token operator"><=</span> MAX_RADIUS<span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
vec2 pi <span class="token operator">=</span> p0 <span class="token operator">+</span> <span class="token function">vec2</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> j<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
#<span class="token keyword">if</span> DOUBLE_HASH
|
||
vec2 hsh <span class="token operator">=</span> <span class="token function">hash22</span><span class="token punctuation">(</span>pi<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
#<span class="token keyword">else</span>
|
||
vec2 hsh <span class="token operator">=</span> pi<span class="token punctuation">;</span>
|
||
#endif
|
||
vec2 p <span class="token operator">=</span> pi <span class="token operator">+</span> <span class="token function">hash22</span><span class="token punctuation">(</span>hsh<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">float</span> t <span class="token operator">=</span> <span class="token function">fract</span><span class="token punctuation">(</span><span class="token number">0.3</span><span class="token operator">*</span>iTime <span class="token operator">+</span> <span class="token function">hash12</span><span class="token punctuation">(</span>hsh<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec2 v <span class="token operator">=</span> p <span class="token operator">-</span> uv<span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> d <span class="token operator">=</span> <span class="token function">length</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token punctuation">(</span><span class="token keyword">float</span><span class="token punctuation">(</span>MAX_RADIUS<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token operator">*</span>t<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">float</span> h <span class="token operator">=</span> <span class="token number">1e-3</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> d1 <span class="token operator">=</span> d <span class="token operator">-</span> h<span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> d2 <span class="token operator">=</span> d <span class="token operator">+</span> h<span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> p1 <span class="token operator">=</span> <span class="token function">sin</span><span class="token punctuation">(</span><span class="token number">31.</span><span class="token operator">*</span>d1<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token function">smoothstep</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">0.3</span><span class="token punctuation">,</span> d1<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token function">smoothstep</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">0.3</span><span class="token punctuation">,</span> d1<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> p2 <span class="token operator">=</span> <span class="token function">sin</span><span class="token punctuation">(</span><span class="token number">31.</span><span class="token operator">*</span>d2<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token function">smoothstep</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">0.3</span><span class="token punctuation">,</span> d2<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token function">smoothstep</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">0.3</span><span class="token punctuation">,</span> d2<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
circles <span class="token operator">+=</span> <span class="token number">0.5</span> <span class="token operator">*</span> <span class="token function">normalize</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>p2 <span class="token operator">-</span> p1<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token number">2.</span> <span class="token operator">*</span> h<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span><span class="token number">1.</span> <span class="token operator">-</span> t<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span><span class="token number">1.</span> <span class="token operator">-</span> t<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
circles <span class="token operator">/=</span> <span class="token keyword">float</span><span class="token punctuation">(</span><span class="token punctuation">(</span>MAX_RADIUS<span class="token operator">*</span><span class="token number">2</span><span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token punctuation">(</span>MAX_RADIUS<span class="token operator">*</span><span class="token number">2</span><span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">float</span> intensity <span class="token operator">=</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token number">0.01</span><span class="token punctuation">,</span> <span class="token number">0.15</span><span class="token punctuation">,</span> <span class="token function">smoothstep</span><span class="token punctuation">(</span><span class="token number">0.1</span><span class="token punctuation">,</span> <span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token function">abs</span><span class="token punctuation">(</span><span class="token function">fract</span><span class="token punctuation">(</span><span class="token number">0.05</span><span class="token operator">*</span>iTime <span class="token operator">+</span> <span class="token number">0.5</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">2.</span><span class="token operator">-</span><span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 n <span class="token operator">=</span> <span class="token function">vec3</span><span class="token punctuation">(</span>circles<span class="token punctuation">,</span> <span class="token function">sqrt</span><span class="token punctuation">(</span><span class="token number">1.</span> <span class="token operator">-</span> <span class="token function">dot</span><span class="token punctuation">(</span>circles<span class="token punctuation">,</span> circles<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 color <span class="token operator">=</span> <span class="token function">texture</span><span class="token punctuation">(</span>image_0<span class="token punctuation">,</span> uv<span class="token operator">/</span>resolution <span class="token operator">-</span> intensity<span class="token operator">*</span>n<span class="token punctuation">.</span>xy<span class="token punctuation">)</span><span class="token punctuation">.</span>rgb <span class="token operator">+</span> <span class="token number">5.</span><span class="token operator">*</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token function">clamp</span><span class="token punctuation">(</span><span class="token function">dot</span><span class="token punctuation">(</span>n<span class="token punctuation">,</span> <span class="token function">normalize</span><span class="token punctuation">(</span><span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.7</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">6.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
out_FragColor <span class="token operator">=</span> <span class="token function">vec4</span><span class="token punctuation">(</span>color<span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
`
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>分析代码：</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;"><span class="token keyword">float</span> resolution <span class="token operator">=</span> <span class="token number">10.</span> <span class="token operator">*</span> <span class="token function">exp2</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">3.</span><span class="token operator">*</span>iMouse<span class="token punctuation">.</span>x<span class="token operator">/</span>iResolution<span class="token punctuation">.</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec2 uv <span class="token operator">=</span> fragCoord<span class="token punctuation">.</span>xy <span class="token operator">/</span> iResolution<span class="token punctuation">.</span>y <span class="token operator">*</span> resolution<span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>意思是将uv转换到[0,x]的区间，在Cesium中应该这样写，我们先固定一个值</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;"><span class="token keyword">float</span> resolution <span class="token operator">=</span><span class="token number">20.</span><span class="token punctuation">;</span>
|
||
vec2 uv <span class="token operator">=</span> v_st <span class="token operator">*</span> resolution<span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>本节的重点是</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;">vec3 color <span class="token operator">=</span> <span class="token function">texture</span><span class="token punctuation">(</span>iChannel0<span class="token punctuation">,</span> uv<span class="token operator">/</span>resolution <span class="token operator">-</span> intensity<span class="token operator">*</span>n<span class="token punctuation">.</span>xy<span class="token punctuation">)</span><span class="token punctuation">.</span>rgb <span class="token operator">+</span> <span class="token number">5.</span><span class="token operator">*</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token function">clamp</span><span class="token punctuation">(</span><span class="token function">dot</span><span class="token punctuation">(</span>n<span class="token punctuation">,</span><span class="token function">normalize</span><span class="token punctuation">(</span><span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.7</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">6.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">texture</span><span class="token punctuation">(</span>iChannel0<span class="token punctuation">,</span> uv<span class="token operator">/</span>resolution <span class="token operator">-</span> intensity<span class="token operator">*</span>n<span class="token punctuation">.</span>xy<span class="token punctuation">)</span><span class="token punctuation">.</span>rgb
|
||
</code></pre>
|
||
<p>从纹理中采样颜色值，这个iChannel0是sampler2D，在Cesium对应Cesium.Texture，不过我们可以直接传一张图片，Cesium会自动为我们封装成Cesium.Texture。将图片传递到着色器，这里我们采用Materail的属性uniforms，需要注意的是如果您在Appearance的片元着色器中使用Material中的uniforms参数值时，你必须在参数名的后面加上一个序号，比如你的第一个参数为在Material的uniforms中为image，那在Appearance的片元着色器中必须使用image_0，如下：</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;"><span class="token function">texture</span><span class="token punctuation">(</span>image_0<span class="token punctuation">,</span> uv<span class="token operator">/</span>resolution <span class="token operator">-</span> intensity<span class="token operator">*</span>n<span class="token punctuation">.</span>xy<span class="token punctuation">)</span><span class="token punctuation">.</span>rgb
|
||
</code></pre>
|
||
<p><img src="https://img-blog.csdnimg.cn/img_convert/63bdf501ba818cb309751c33730c63ac.gif#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p><strong>六、Perlin-Worley噪声实现云图</strong></p>
|
||
<p>shadertoy示例地址：https://www.shadertoy.com/view/3dVXDc</p>
|
||
<p><img src="https://img-blog.csdnimg.cn/img_convert/b75429109a7c276754ffb523df9e9d48.png#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p>该示例使用了Perlin+Worley（柏林+沃利）噪声来实现云的效果，并且是先将结果绘制到一张Texture中，然后在主函数中根据纹理坐标读取纹理中的值。<br /> 1、首先是噪声函数，定义在Common中<br /> <img src="https://img-blog.csdnimg.cn/img_convert/211bf10bbb9465b33d1ec278ab9184e3.png#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p>2、然后是绘制到Texture中，过程在BufferA中<br /> <img src="https://img-blog.csdnimg.cn/img_convert/6bab4d5963817d72a2e0418a5841e815.png#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p>3、最后在主函数中调用<br /> <img src="https://img-blog.csdnimg.cn/img_convert/2b47675426e7e025aa72c770126b795d.png#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p>4、主函数中为了显示了各个噪声的结果，将画布拆分为了5份，我们可以注释掉一些不需要的结果显示，比如修改代码如下：</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;"><span class="token keyword">void</span> <span class="token function">mainImage</span><span class="token punctuation">(</span> out vec4 fragColor<span class="token punctuation">,</span> in vec2 fragCoord <span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
vec2 st <span class="token operator">=</span> fragCoord <span class="token operator">/</span> iResolution<span class="token punctuation">.</span>xy<span class="token punctuation">;</span>
|
||
vec2 uv <span class="token operator">=</span> fragCoord <span class="token operator">/</span> iResolution<span class="token punctuation">.</span>y<span class="token punctuation">;</span>
|
||
st<span class="token punctuation">.</span>x <span class="token operator">*=</span> <span class="token number">5.</span><span class="token punctuation">;</span> <span class="token comment">// 5 columns for different noises</span>
|
||
uv <span class="token operator">-=</span> <span class="token number">.02</span> <span class="token operator">*</span> iTime<span class="token punctuation">;</span>
|
||
|
||
vec3 col <span class="token operator">=</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">float</span> perlinWorley <span class="token operator">=</span> <span class="token function">textureLod</span><span class="token punctuation">(</span>iChannel0<span class="token punctuation">,</span> uv <span class="token operator">*</span> <span class="token number">.5</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">.</span>x<span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// worley fbms with different frequencies</span>
|
||
vec3 worley <span class="token operator">=</span> <span class="token function">textureLod</span><span class="token punctuation">(</span>iChannel0<span class="token punctuation">,</span> uv<span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">.</span>yzw<span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> wfbm <span class="token operator">=</span> worley<span class="token punctuation">.</span>x <span class="token operator">*</span> <span class="token number">.625</span> <span class="token operator">+</span>
|
||
worley<span class="token punctuation">.</span>y <span class="token operator">*</span> <span class="token number">.125</span> <span class="token operator">+</span>
|
||
worley<span class="token punctuation">.</span>z <span class="token operator">*</span> <span class="token number">.25</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// cloud shape modeled after the GPU Pro 7 chapter</span>
|
||
<span class="token keyword">float</span> cloud <span class="token operator">=</span> <span class="token function">remap</span><span class="token punctuation">(</span>perlinWorley<span class="token punctuation">,</span> wfbm <span class="token operator">-</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
cloud <span class="token operator">=</span> <span class="token function">remap</span><span class="token punctuation">(</span>cloud<span class="token punctuation">,</span> <span class="token number">.85</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// fake cloud coverage</span>
|
||
|
||
<span class="token comment">// if (st.x < 1.)</span>
|
||
<span class="token comment">// col += perlinWorley;</span>
|
||
<span class="token comment">// else if(st.x < 2.)</span>
|
||
<span class="token comment">// col += worley.x;</span>
|
||
<span class="token comment">// else if(st.x < 3.)</span>
|
||
<span class="token comment">// col += worley.y;</span>
|
||
<span class="token comment">// else if(st.x < 4.)</span>
|
||
<span class="token comment">// col += worley.z;</span>
|
||
<span class="token comment">// else if(st.x < 5.)</span>
|
||
col <span class="token operator">+=</span> cloud<span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// column dividers</span>
|
||
<span class="token comment">// float div = smoothstep(.01, 0., abs(st.x - 1.));</span>
|
||
<span class="token comment">// div += smoothstep(.01, 0., abs(st.x - 2.));</span>
|
||
<span class="token comment">// div += smoothstep(.01, 0., abs(st.x - 3.));</span>
|
||
<span class="token comment">// div += smoothstep(.01, 0., abs(st.x - 4.));</span>
|
||
|
||
<span class="token comment">// col = mix(col, vec3(0., 0., .866), div);</span>
|
||
|
||
fragColor <span class="token operator">=</span> <span class="token function">vec4</span><span class="token punctuation">(</span>col<span class="token punctuation">,</span><span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
因为我们不需要绘制到<span class="token class-name">Texture</span>的步骤，所以需要合并<span class="token class-name">BufferA</span>和主函数的代码
|
||
uv <span class="token operator">-=</span> <span class="token number">.02</span> <span class="token operator">*</span> iTime<span class="token punctuation">;</span>
|
||
vec2 m <span class="token operator">=</span> <span class="token function">vec2</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
vec4 col <span class="token operator">=</span> <span class="token function">vec4</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">float</span> slices <span class="token operator">=</span> <span class="token number">128.</span><span class="token punctuation">;</span> <span class="token comment">// number of layers of the 3d texture</span>
|
||
<span class="token keyword">float</span> freq <span class="token operator">=</span> <span class="token number">4.</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">float</span> pfbm<span class="token operator">=</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">,</span> <span class="token function">perlinfbm</span><span class="token punctuation">(</span><span class="token function">vec3</span><span class="token punctuation">(</span>uv<span class="token punctuation">,</span> <span class="token function">floor</span><span class="token punctuation">(</span>m<span class="token punctuation">.</span>y<span class="token operator">*</span>slices<span class="token punctuation">)</span><span class="token operator">/</span>slices<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">4.</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
pfbm <span class="token operator">=</span> <span class="token function">abs</span><span class="token punctuation">(</span>pfbm <span class="token operator">*</span> <span class="token number">2.</span> <span class="token operator">-</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// billowy perlin noise</span>
|
||
|
||
col<span class="token punctuation">.</span>g <span class="token operator">+=</span> <span class="token function">worleyFbm</span><span class="token punctuation">(</span><span class="token function">vec3</span><span class="token punctuation">(</span>uv<span class="token punctuation">,</span> <span class="token function">floor</span><span class="token punctuation">(</span>m<span class="token punctuation">.</span>y<span class="token operator">*</span>slices<span class="token punctuation">)</span><span class="token operator">/</span>slices<span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
col<span class="token punctuation">.</span>b <span class="token operator">+=</span> <span class="token function">worleyFbm</span><span class="token punctuation">(</span><span class="token function">vec3</span><span class="token punctuation">(</span>uv<span class="token punctuation">,</span> <span class="token function">floor</span><span class="token punctuation">(</span>m<span class="token punctuation">.</span>y<span class="token operator">*</span>slices<span class="token punctuation">)</span><span class="token operator">/</span>slices<span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token operator">*</span><span class="token number">2.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
col<span class="token punctuation">.</span>a <span class="token operator">+=</span> <span class="token function">worleyFbm</span><span class="token punctuation">(</span><span class="token function">vec3</span><span class="token punctuation">(</span>uv<span class="token punctuation">,</span> <span class="token function">floor</span><span class="token punctuation">(</span>m<span class="token punctuation">.</span>y<span class="token operator">*</span>slices<span class="token punctuation">)</span><span class="token operator">/</span>slices<span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token operator">*</span><span class="token number">4.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
col<span class="token punctuation">.</span>r <span class="token operator">+=</span> <span class="token function">remap</span><span class="token punctuation">(</span>pfbm<span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> col<span class="token punctuation">.</span>g<span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// perlin-worley </span>
|
||
|
||
|
||
<span class="token keyword">float</span> perlinWorley <span class="token operator">=</span> col<span class="token punctuation">.</span>r<span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// worley fbms with different frequencies</span>
|
||
vec3 worley <span class="token operator">=</span> col<span class="token punctuation">.</span>yzw<span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> wfbm <span class="token operator">=</span> worley<span class="token punctuation">.</span>x <span class="token operator">*</span> <span class="token number">.625</span> <span class="token operator">+</span>
|
||
worley<span class="token punctuation">.</span>y <span class="token operator">*</span> <span class="token number">.125</span> <span class="token operator">+</span>
|
||
worley<span class="token punctuation">.</span>z <span class="token operator">*</span> <span class="token number">.25</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// cloud shape modeled after the GPU Pro 7 chapter</span>
|
||
<span class="token keyword">float</span> cloud <span class="token operator">=</span> <span class="token function">remap</span><span class="token punctuation">(</span>perlinWorley<span class="token punctuation">,</span> wfbm <span class="token operator">-</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
cloud <span class="token operator">=</span> <span class="token function">remap</span><span class="token punctuation">(</span>cloud<span class="token punctuation">,</span> <span class="token number">.65</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// fake cloud coverage</span>
|
||
|
||
vec3 col_ <span class="token operator">=</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
col_ <span class="token operator">+=</span> cloud<span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>5、在cesium中如何实现：我们先创建好Primitive、Appearance，然后将着色器代码拷贝进来并修改相关参数</p>
|
||
<pre><code class="prism language-java" style="height: 25vh;">let xMin <span class="token operator">=</span> <span class="token number">115.894604</span><span class="token punctuation">,</span> yMin <span class="token operator">=</span> <span class="token number">39.516896</span><span class="token punctuation">,</span> xMax <span class="token operator">=</span> <span class="token number">117.431959</span><span class="token punctuation">,</span> yMax <span class="token operator">=</span> <span class="token number">40.630521</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> rectangle <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>RectangleGeometry</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
rectangle<span class="token operator">:</span> rect<span class="token punctuation">,</span>
|
||
height<span class="token operator">:</span> <span class="token number">10000.0</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> geometry <span class="token operator">=</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>RectangleGeometry</span><span class="token punctuation">.</span><span class="token function">createGeometry</span><span class="token punctuation">(</span>rectangle<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
viewer<span class="token punctuation">.</span>scene<span class="token punctuation">.</span>primitives<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>Primitive</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
geometryInstances<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>GeometryInstance</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
geometry<span class="token operator">:</span> geometry
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
appearance<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>MaterialAppearance</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
material<span class="token operator">:</span><span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>Material</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
|
||
fabric<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
|
||
uniforms<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
|
||
image<span class="token operator">:</span><span class="token string">"./texture.png"</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">,</span>
|
||
fragmentShaderSource<span class="token operator">:</span> `
|
||
in vec3 v_positionEC<span class="token punctuation">;</span><span class="token comment">//顶点 相机（眼睛）坐标系 </span>
|
||
in vec3 v_normalEC<span class="token punctuation">;</span><span class="token comment">//顶点法线 相机（眼睛）坐标系 </span>
|
||
in vec2 v_st<span class="token punctuation">;</span><span class="token comment">//纹理坐标 uv</span>
|
||
<span class="token comment">/**
|
||
This tab contains all the necessary noise functions required to model a cloud shape.
|
||
*/</span>
|
||
|
||
<span class="token comment">// Hash by David_Hoskins</span>
|
||
#define UI0 <span class="token number">1597334673</span>U
|
||
#define UI1 <span class="token number">3812015801</span>U
|
||
#define <span class="token class-name">UI2</span> <span class="token function">uvec2</span><span class="token punctuation">(</span>UI0<span class="token punctuation">,</span> UI1<span class="token punctuation">)</span>
|
||
#define <span class="token class-name">UI3</span> <span class="token function">uvec3</span><span class="token punctuation">(</span>UI0<span class="token punctuation">,</span> UI1<span class="token punctuation">,</span> <span class="token number">2798796415</span>U<span class="token punctuation">)</span>
|
||
#define UIF <span class="token punctuation">(</span><span class="token number">1.0</span> <span class="token operator">/</span> <span class="token keyword">float</span><span class="token punctuation">(</span><span class="token number">0</span>xffffffffU<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
|
||
vec3 <span class="token function">hash33</span><span class="token punctuation">(</span>vec3 p<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
uvec3 q <span class="token operator">=</span> <span class="token function">uvec3</span><span class="token punctuation">(</span><span class="token function">ivec3</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> UI3<span class="token punctuation">;</span>
|
||
q <span class="token operator">=</span> <span class="token punctuation">(</span>q<span class="token punctuation">.</span>x <span class="token operator">^</span> q<span class="token punctuation">.</span>y <span class="token operator">^</span> q<span class="token punctuation">.</span>z<span class="token punctuation">)</span><span class="token operator">*</span>UI3<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token operator">-</span><span class="token number">1.</span> <span class="token operator">+</span> <span class="token number">2.</span> <span class="token operator">*</span> <span class="token function">vec3</span><span class="token punctuation">(</span>q<span class="token punctuation">)</span> <span class="token operator">*</span> UIF<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">float</span> <span class="token function">remap</span><span class="token punctuation">(</span><span class="token keyword">float</span> x<span class="token punctuation">,</span> <span class="token keyword">float</span> a<span class="token punctuation">,</span> <span class="token keyword">float</span> b<span class="token punctuation">,</span> <span class="token keyword">float</span> c<span class="token punctuation">,</span> <span class="token keyword">float</span> d<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">(</span>x <span class="token operator">-</span> a<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token punctuation">(</span>b <span class="token operator">-</span> a<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>d <span class="token operator">-</span> c<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> c<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// Gradient noise by iq (modified to be tileable)</span>
|
||
<span class="token keyword">float</span> <span class="token function">gradientNoise</span><span class="token punctuation">(</span>vec3 x<span class="token punctuation">,</span> <span class="token keyword">float</span> freq<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
<span class="token comment">// grid</span>
|
||
vec3 p <span class="token operator">=</span> <span class="token function">floor</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 w <span class="token operator">=</span> <span class="token function">fract</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// quintic interpolant</span>
|
||
vec3 u <span class="token operator">=</span> w <span class="token operator">*</span> w <span class="token operator">*</span> w <span class="token operator">*</span> <span class="token punctuation">(</span>w <span class="token operator">*</span> <span class="token punctuation">(</span>w <span class="token operator">*</span> <span class="token number">6.</span> <span class="token operator">-</span> <span class="token number">15.</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">10.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
|
||
<span class="token comment">// gradients</span>
|
||
vec3 ga <span class="token operator">=</span> <span class="token function">hash33</span><span class="token punctuation">(</span><span class="token function">mod</span><span class="token punctuation">(</span>p <span class="token operator">+</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 gb <span class="token operator">=</span> <span class="token function">hash33</span><span class="token punctuation">(</span><span class="token function">mod</span><span class="token punctuation">(</span>p <span class="token operator">+</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 gc <span class="token operator">=</span> <span class="token function">hash33</span><span class="token punctuation">(</span><span class="token function">mod</span><span class="token punctuation">(</span>p <span class="token operator">+</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 gd <span class="token operator">=</span> <span class="token function">hash33</span><span class="token punctuation">(</span><span class="token function">mod</span><span class="token punctuation">(</span>p <span class="token operator">+</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 ge <span class="token operator">=</span> <span class="token function">hash33</span><span class="token punctuation">(</span><span class="token function">mod</span><span class="token punctuation">(</span>p <span class="token operator">+</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 gf <span class="token operator">=</span> <span class="token function">hash33</span><span class="token punctuation">(</span><span class="token function">mod</span><span class="token punctuation">(</span>p <span class="token operator">+</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 gg <span class="token operator">=</span> <span class="token function">hash33</span><span class="token punctuation">(</span><span class="token function">mod</span><span class="token punctuation">(</span>p <span class="token operator">+</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 gh <span class="token operator">=</span> <span class="token function">hash33</span><span class="token punctuation">(</span><span class="token function">mod</span><span class="token punctuation">(</span>p <span class="token operator">+</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// projections</span>
|
||
<span class="token keyword">float</span> va <span class="token operator">=</span> <span class="token function">dot</span><span class="token punctuation">(</span>ga<span class="token punctuation">,</span> w <span class="token operator">-</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> vb <span class="token operator">=</span> <span class="token function">dot</span><span class="token punctuation">(</span>gb<span class="token punctuation">,</span> w <span class="token operator">-</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> vc <span class="token operator">=</span> <span class="token function">dot</span><span class="token punctuation">(</span>gc<span class="token punctuation">,</span> w <span class="token operator">-</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> vd <span class="token operator">=</span> <span class="token function">dot</span><span class="token punctuation">(</span>gd<span class="token punctuation">,</span> w <span class="token operator">-</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> ve <span class="token operator">=</span> <span class="token function">dot</span><span class="token punctuation">(</span>ge<span class="token punctuation">,</span> w <span class="token operator">-</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> vf <span class="token operator">=</span> <span class="token function">dot</span><span class="token punctuation">(</span>gf<span class="token punctuation">,</span> w <span class="token operator">-</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> vg <span class="token operator">=</span> <span class="token function">dot</span><span class="token punctuation">(</span>gg<span class="token punctuation">,</span> w <span class="token operator">-</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> vh <span class="token operator">=</span> <span class="token function">dot</span><span class="token punctuation">(</span>gh<span class="token punctuation">,</span> w <span class="token operator">-</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// interpolation</span>
|
||
<span class="token keyword">return</span> va <span class="token operator">+</span>
|
||
u<span class="token punctuation">.</span>x <span class="token operator">*</span> <span class="token punctuation">(</span>vb <span class="token operator">-</span> va<span class="token punctuation">)</span> <span class="token operator">+</span>
|
||
u<span class="token punctuation">.</span>y <span class="token operator">*</span> <span class="token punctuation">(</span>vc <span class="token operator">-</span> va<span class="token punctuation">)</span> <span class="token operator">+</span>
|
||
u<span class="token punctuation">.</span>z <span class="token operator">*</span> <span class="token punctuation">(</span>ve <span class="token operator">-</span> va<span class="token punctuation">)</span> <span class="token operator">+</span>
|
||
u<span class="token punctuation">.</span>x <span class="token operator">*</span> u<span class="token punctuation">.</span>y <span class="token operator">*</span> <span class="token punctuation">(</span>va <span class="token operator">-</span> vb <span class="token operator">-</span> vc <span class="token operator">+</span> vd<span class="token punctuation">)</span> <span class="token operator">+</span>
|
||
u<span class="token punctuation">.</span>y <span class="token operator">*</span> u<span class="token punctuation">.</span>z <span class="token operator">*</span> <span class="token punctuation">(</span>va <span class="token operator">-</span> vc <span class="token operator">-</span> ve <span class="token operator">+</span> vg<span class="token punctuation">)</span> <span class="token operator">+</span>
|
||
u<span class="token punctuation">.</span>z <span class="token operator">*</span> u<span class="token punctuation">.</span>x <span class="token operator">*</span> <span class="token punctuation">(</span>va <span class="token operator">-</span> vb <span class="token operator">-</span> ve <span class="token operator">+</span> vf<span class="token punctuation">)</span> <span class="token operator">+</span>
|
||
u<span class="token punctuation">.</span>x <span class="token operator">*</span> u<span class="token punctuation">.</span>y <span class="token operator">*</span> u<span class="token punctuation">.</span>z <span class="token operator">*</span> <span class="token punctuation">(</span><span class="token operator">-</span>va <span class="token operator">+</span> vb <span class="token operator">+</span> vc <span class="token operator">-</span> vd <span class="token operator">+</span> ve <span class="token operator">-</span> vf <span class="token operator">-</span> vg <span class="token operator">+</span> vh<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// Tileable 3D worley noise</span>
|
||
<span class="token keyword">float</span> <span class="token function">worleyNoise</span><span class="token punctuation">(</span>vec3 uv<span class="token punctuation">,</span> <span class="token keyword">float</span> freq<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
vec3 id <span class="token operator">=</span> <span class="token function">floor</span><span class="token punctuation">(</span>uv<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 p <span class="token operator">=</span> <span class="token function">fract</span><span class="token punctuation">(</span>uv<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">float</span> minDist <span class="token operator">=</span> <span class="token number">10000.</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">float</span> x <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1.</span><span class="token punctuation">;</span> x <span class="token operator"><=</span> <span class="token number">1.</span><span class="token punctuation">;</span> <span class="token operator">++</span>x<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">float</span> y <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1.</span><span class="token punctuation">;</span> y <span class="token operator"><=</span> <span class="token number">1.</span><span class="token punctuation">;</span> <span class="token operator">++</span>y<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">float</span> z <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1.</span><span class="token punctuation">;</span> z <span class="token operator"><=</span> <span class="token number">1.</span><span class="token punctuation">;</span> <span class="token operator">++</span>z<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
vec3 offset <span class="token operator">=</span> <span class="token function">vec3</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> z<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
vec3 h <span class="token operator">=</span> <span class="token function">hash33</span><span class="token punctuation">(</span><span class="token function">mod</span><span class="token punctuation">(</span>id <span class="token operator">+</span> offset<span class="token punctuation">,</span> <span class="token function">vec3</span><span class="token punctuation">(</span>freq<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">.5</span> <span class="token operator">+</span> <span class="token number">.5</span><span class="token punctuation">;</span>
|
||
h <span class="token operator">+=</span> offset<span class="token punctuation">;</span>
|
||
vec3 d <span class="token operator">=</span> p <span class="token operator">-</span> h<span class="token punctuation">;</span>
|
||
minDist <span class="token operator">=</span> <span class="token function">min</span><span class="token punctuation">(</span>minDist<span class="token punctuation">,</span> <span class="token function">dot</span><span class="token punctuation">(</span>d<span class="token punctuation">,</span> d<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// inverted worley noise</span>
|
||
<span class="token keyword">return</span> <span class="token number">1.</span> <span class="token operator">-</span> minDist<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// Fbm for Perlin noise based on iq's blog</span>
|
||
<span class="token keyword">float</span> <span class="token function">perlinfbm</span><span class="token punctuation">(</span>vec3 p<span class="token punctuation">,</span> <span class="token keyword">float</span> freq<span class="token punctuation">,</span> <span class="token keyword">int</span> octaves<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
<span class="token keyword">float</span> <span class="token class-name">G</span> <span class="token operator">=</span> <span class="token function">exp2</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">.85</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> amp <span class="token operator">=</span> <span class="token number">1.</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> noise <span class="token operator">=</span> <span class="token number">0.</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> octaves<span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
noise <span class="token operator">+=</span> amp <span class="token operator">*</span> <span class="token function">gradientNoise</span><span class="token punctuation">(</span>p <span class="token operator">*</span> freq<span class="token punctuation">,</span> freq<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
freq <span class="token operator">*=</span> <span class="token number">2.</span><span class="token punctuation">;</span>
|
||
amp <span class="token operator">*=</span> <span class="token class-name">G</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">return</span> noise<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// Tileable Worley fbm inspired by Andrew Schneider's Real-Time Volumetric Cloudscapes</span>
|
||
<span class="token comment">// chapter in GPU Pro 7.</span>
|
||
<span class="token keyword">float</span> <span class="token function">worleyFbm</span><span class="token punctuation">(</span>vec3 p<span class="token punctuation">,</span> <span class="token keyword">float</span> freq<span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
<span class="token keyword">return</span> <span class="token function">worleyNoise</span><span class="token punctuation">(</span>p<span class="token operator">*</span>freq<span class="token punctuation">,</span> freq<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">.625</span> <span class="token operator">+</span>
|
||
<span class="token function">worleyNoise</span><span class="token punctuation">(</span>p<span class="token operator">*</span>freq<span class="token operator">*</span><span class="token number">2.</span><span class="token punctuation">,</span> freq<span class="token operator">*</span><span class="token number">2.</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">.25</span> <span class="token operator">+</span>
|
||
<span class="token function">worleyNoise</span><span class="token punctuation">(</span>p<span class="token operator">*</span>freq<span class="token operator">*</span><span class="token number">4.</span><span class="token punctuation">,</span> freq<span class="token operator">*</span><span class="token number">4.</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">.125</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
|
||
<span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span> <span class="token punctuation">)</span>
|
||
<span class="token punctuation">{<!-- --></span>
|
||
vec2 uv <span class="token operator">=</span> v_st<span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> iTime<span class="token operator">=</span>czm_frameNumber<span class="token operator">/</span><span class="token number">100.</span><span class="token punctuation">;</span>
|
||
uv <span class="token operator">-=</span> <span class="token number">.02</span> <span class="token operator">*</span> iTime<span class="token punctuation">;</span>
|
||
vec2 m <span class="token operator">=</span> <span class="token function">vec2</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
vec4 col <span class="token operator">=</span> <span class="token function">vec4</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">float</span> slices <span class="token operator">=</span> <span class="token number">128.</span><span class="token punctuation">;</span> <span class="token comment">// number of layers of the 3d texture</span>
|
||
<span class="token keyword">float</span> freq <span class="token operator">=</span> <span class="token number">4.</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">float</span> pfbm<span class="token operator">=</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token number">1.</span><span class="token punctuation">,</span> <span class="token function">perlinfbm</span><span class="token punctuation">(</span><span class="token function">vec3</span><span class="token punctuation">(</span>uv<span class="token punctuation">,</span> <span class="token function">floor</span><span class="token punctuation">(</span>m<span class="token punctuation">.</span>y<span class="token operator">*</span>slices<span class="token punctuation">)</span><span class="token operator">/</span>slices<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">4.</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
pfbm <span class="token operator">=</span> <span class="token function">abs</span><span class="token punctuation">(</span>pfbm <span class="token operator">*</span> <span class="token number">2.</span> <span class="token operator">-</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// billowy perlin noise</span>
|
||
|
||
col<span class="token punctuation">.</span>g <span class="token operator">+=</span> <span class="token function">worleyFbm</span><span class="token punctuation">(</span><span class="token function">vec3</span><span class="token punctuation">(</span>uv<span class="token punctuation">,</span> <span class="token function">floor</span><span class="token punctuation">(</span>m<span class="token punctuation">.</span>y<span class="token operator">*</span>slices<span class="token punctuation">)</span><span class="token operator">/</span>slices<span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
col<span class="token punctuation">.</span>b <span class="token operator">+=</span> <span class="token function">worleyFbm</span><span class="token punctuation">(</span><span class="token function">vec3</span><span class="token punctuation">(</span>uv<span class="token punctuation">,</span> <span class="token function">floor</span><span class="token punctuation">(</span>m<span class="token punctuation">.</span>y<span class="token operator">*</span>slices<span class="token punctuation">)</span><span class="token operator">/</span>slices<span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token operator">*</span><span class="token number">2.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
col<span class="token punctuation">.</span>a <span class="token operator">+=</span> <span class="token function">worleyFbm</span><span class="token punctuation">(</span><span class="token function">vec3</span><span class="token punctuation">(</span>uv<span class="token punctuation">,</span> <span class="token function">floor</span><span class="token punctuation">(</span>m<span class="token punctuation">.</span>y<span class="token operator">*</span>slices<span class="token punctuation">)</span><span class="token operator">/</span>slices<span class="token punctuation">)</span><span class="token punctuation">,</span> freq<span class="token operator">*</span><span class="token number">4.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
col<span class="token punctuation">.</span>r <span class="token operator">+=</span> <span class="token function">remap</span><span class="token punctuation">(</span>pfbm<span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> col<span class="token punctuation">.</span>g<span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// perlin-worley </span>
|
||
|
||
|
||
<span class="token keyword">float</span> perlinWorley <span class="token operator">=</span> col<span class="token punctuation">.</span>r<span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// worley fbms with different frequencies</span>
|
||
vec3 worley <span class="token operator">=</span> col<span class="token punctuation">.</span>yzw<span class="token punctuation">;</span>
|
||
<span class="token keyword">float</span> wfbm <span class="token operator">=</span> worley<span class="token punctuation">.</span>x <span class="token operator">*</span> <span class="token number">.625</span> <span class="token operator">+</span>
|
||
worley<span class="token punctuation">.</span>y <span class="token operator">*</span> <span class="token number">.125</span> <span class="token operator">+</span>
|
||
worley<span class="token punctuation">.</span>z <span class="token operator">*</span> <span class="token number">.25</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// cloud shape modeled after the GPU Pro 7 chapter</span>
|
||
<span class="token keyword">float</span> cloud <span class="token operator">=</span> <span class="token function">remap</span><span class="token punctuation">(</span>perlinWorley<span class="token punctuation">,</span> wfbm <span class="token operator">-</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
cloud <span class="token operator">=</span> <span class="token function">remap</span><span class="token punctuation">(</span>cloud<span class="token punctuation">,</span> <span class="token number">.65</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">,</span> <span class="token number">0.</span><span class="token punctuation">,</span> <span class="token number">1.</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// fake cloud coverage</span>
|
||
|
||
vec3 col_ <span class="token operator">=</span> <span class="token function">vec3</span><span class="token punctuation">(</span><span class="token number">0.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
col_ <span class="token operator">+=</span> cloud<span class="token punctuation">;</span>
|
||
|
||
out_FragColor <span class="token operator">=</span> <span class="token function">vec4</span><span class="token punctuation">(</span>col_<span class="token punctuation">,</span>col<span class="token punctuation">.</span>r<span class="token punctuation">)</span><span class="token punctuation">;</span> `
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre>
|
||
<p>这样就实现了体积云类似效果<br /> <img src="https://img-blog.csdnimg.cn/img_convert/e7a0064f7be091b39669a0d187bd687d.gif#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p><strong>七、流体水面</strong><br /> 示例地址：https://www.shadertoy.com/view/4dd3Rl<br /> <img src="https://img-blog.csdnimg.cn/img_convert/3b3a587355ac37226ff923d00a3b3501.png#pic_center" alt="在这里插入图片描述" /></p>
|
||
<p>取到代码在cesium中如何使用参考上面体积云的示例，步骤相同。</p>
|
||
</div>
|
||
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-f23dff6052.css" rel="stylesheet">
|
||
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-e504d6a974.css" rel="stylesheet">
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
<div class="directory-boxshadow-dialog" style="display:none;">
|
||
<div class="directory-boxshadow-dialog-box">
|
||
</div>
|
||
<div class="vip-limited-time-offer-box-new" id="vip-limited-time-offer-box-new">
|
||
<img class="limited-img limited-img-new" src="https://csdnimg.cn/release/blogv2/dist/pc/img/vip-limited-close-newWhite.png">
|
||
<div class="vip-limited-time-top">
|
||
确定要放弃本次机会？
|
||
</div>
|
||
<span class="vip-limited-time-text">福利倒计时</span>
|
||
<div class="limited-time-box-new">
|
||
<span class="time-hour"></span>
|
||
<i>:</i>
|
||
<span class="time-minite"></span>
|
||
<i>:</i>
|
||
<span class="time-second"></span>
|
||
</div>
|
||
<div class="limited-time-vip-box">
|
||
<p>
|
||
<img class="coupon-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/vip-limited-close-roup.png">
|
||
<span class="def">立减 ¥</span>
|
||
<span class="active limited-num"></span>
|
||
</p>
|
||
<span class="">普通VIP年卡可用</span>
|
||
</div>
|
||
<a class="limited-time-btn-new" href="https://mall.csdn.net/vip" data-report-click='{"spm":"1001.2101.3001.9621"}' data-report-query='spm=1001.2101.3001.9621'>立即使用</a>
|
||
</div>
|
||
</div> <div class="more-toolbox-new more-toolbar" id="toolBarBox">
|
||
<div class="left-toolbox">
|
||
<div class="toolbox-left">
|
||
<div class="profile-box">
|
||
<a class="profile-href" target="_blank" href="https://blog.csdn.net/weixin_43700915"><img class="profile-img" src="https://profile-avatar.csdnimg.cn/6505fd474db340f5b8e8cb2c8b008465_weixin_43700915.jpg!1">
|
||
<span class="profile-name">
|
||
Cesium进阶学习
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<div class="profile-attend">
|
||
<a class="tool-attend tool-bt-button tool-bt-attend" href="javascript:;" data-report-view='{"mod":"1592215036_002","spm":"1001.2101.3001.4232","extend1":"关注"}'>关注</a>
|
||
<a class="tool-item-follow active-animation" style="display:none;">关注</a>
|
||
</div>
|
||
</div>
|
||
<div class="toolbox-middle">
|
||
<ul class="toolbox-list">
|
||
<li class="tool-item tool-item-size tool-active is-like" id="is-like">
|
||
<a class="tool-item-href">
|
||
<img style="display:none;" id="is-like-imgactive-animation-like" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarThumbUpactive.png" alt="">
|
||
<img class="isactive" style="display:none" id="is-like-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/like-active.png" alt="">
|
||
<img class="isdefault" style="display:block" id="is-like-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/like.png" alt="">
|
||
<span id="spanCount" class="count ">
|
||
23
|
||
</span>
|
||
</a>
|
||
<div class="tool-hover-tip"><span class="text space">点赞</span></div>
|
||
</li>
|
||
<li class="tool-item tool-item-size tool-active is-unlike" id="is-unlike">
|
||
<a class="tool-item-href">
|
||
<img class="isactive" style="margin-right:0px;display:none" id="is-unlike-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/unlike-active.png" alt="">
|
||
<img class="isdefault" style="margin-right:0px;display:block" id="is-unlike-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/unlike.png" alt="">
|
||
<span id="unlikeCount" class="count "></span>
|
||
</a>
|
||
<div class="tool-hover-tip"><span class="text space">踩</span></div>
|
||
</li>
|
||
<li class="tool-item tool-item-size tool-active is-collection ">
|
||
<a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"popu_824","spm":"1001.2101.3001.4130","ab":"new"}'>
|
||
<img style="display:none" id="is-collection-img-collection" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/collect-active.png" alt="">
|
||
<img class="isdefault" id="is-collection-img" style="display:block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/collect.png" alt="">
|
||
<img class="isactive" id="is-collection-imgactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectActive.png" alt="">
|
||
<span class="count get-collection " data-num="12" id="get-collection">
|
||
12
|
||
</span>
|
||
</a>
|
||
<div class="tool-hover-tip collect">
|
||
<div class="collect-operate-box">
|
||
<span class="collect-text" id="is-collection">
|
||
收藏
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="tool-active-list">
|
||
<div class="text">
|
||
觉得还不错?
|
||
<span class="collect-text" id="tool-active-list-collection">
|
||
一键收藏
|
||
</span>
|
||
<img id="tool-active-list-close" src="https://csdnimg.cn/release/blogv2/dist/pc/img/collectionCloseWhite.png" alt="">
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="tool-item tool-item-size tool-active tool-item-comment">
|
||
<div class="guide-rr-first">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward01.png" alt="">
|
||
<button class="btn-guide-known">知道了</button>
|
||
</div>
|
||
<a class="tool-item-href go-side-comment" data-report-click='{"spm":"1001.2101.3001.7009"}'>
|
||
<img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/comment.png" alt="">
|
||
<span class="count">
|
||
0
|
||
</span>
|
||
</a>
|
||
<div class="tool-hover-tip"><span class="text space">评论</span></div>
|
||
</li>
|
||
<li class="tool-item tool-item-size tool-active tool-QRcode" data-type="article" id="tool-share">
|
||
<a class="tool-item-href" href="javascript:;" data-report-view='{"spm":"3001.4129","extra":{"type":"blogdetail"}}'>
|
||
<img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/share.png" alt="">
|
||
<span class="count">分享</span>
|
||
</a>
|
||
<div class="QRcode active" id="tool-QRcode">
|
||
<div class="share-bg-box">
|
||
<div class="share-content">
|
||
<a id="copyPosterUrl" data-type="link" class="btn-share">复制链接</a>
|
||
</div>
|
||
<div class="share-content">
|
||
<a class="btn-share" data-type="qq">分享到 QQ</a>
|
||
</div>
|
||
<div class="share-content">
|
||
<a class="btn-share" data-type="weibo">分享到新浪微博</a>
|
||
</div>
|
||
<div class="share-code">
|
||
<div class="share-code-box" id='shareCode'></div>
|
||
<div class="share-code-text">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/share/icon-wechat.png" alt="">扫一扫
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="tool-item tool-item-size tool-active tool-item-reward">
|
||
<a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"popu_830","spm":"1001.2101.3001.4237","dest":"","ab":"new"}'>
|
||
<img class="isdefault reward-bt" id="rewardBtNew" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/reward.png" alt="打赏">
|
||
<span class="count">打赏</span>
|
||
</a>
|
||
<div class="tool-hover-tip"><span class="text space">打赏</span></div>
|
||
</li>
|
||
<li class="tool-item tool-item-size tool-active is-more" id="is-more">
|
||
<a class="tool-item-href">
|
||
<img class="isdefault" style="margin-right:0px;display:block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/more.png" alt="">
|
||
<span class="count"></span>
|
||
</a>
|
||
<div class="more-opt-box">
|
||
<div class="mini-box">
|
||
<a class="tool-item-href" id="rewardBtNewHide" data-report-click='{"spm":"3001.4237","extra":"{\"type\":\"hide\"}"}'>
|
||
<img class="isdefault reward-bt" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/reward.png" alt="打赏">
|
||
<span class="count">打赏</span>
|
||
</a>
|
||
<a class="tool-item-href" id="toolReportBtnHide">
|
||
<img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/report.png" alt="">
|
||
<span class="count">举报</span>
|
||
</a>
|
||
</div>
|
||
<div class="normal-box">
|
||
<a class="tool-item-href" id="toolReportBtnHideNormal">
|
||
<img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/report.png" alt="">
|
||
<span class="count">举报</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="toolbox-right">
|
||
<div class="tool-directory">
|
||
<a class="bt-columnlist-show"
|
||
data-id="12801806"
|
||
data-free="true"
|
||
data-description="Cesium进阶学习，涵盖（primitive、appearance、着色器、后处理、贴图、材质、裁剪压平等进阶知识）"
|
||
data-subscribe="false"
|
||
data-title="Cesium进阶学习"
|
||
data-img="https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
|
||
data-url="https://blog.csdn.net/weixin_43700915/category_12801806.html"
|
||
data-sum="9"
|
||
data-people="3"
|
||
data-price="0"
|
||
data-hotRank="0"
|
||
data-status="true"
|
||
data-oldprice="0"
|
||
data-join="false"
|
||
data-studyvip="true"
|
||
data-studysubscribe="false"
|
||
data-report-view='{"spm":"1001.2101.3001.6334","extend1":"专栏目录"}'
|
||
data-report-click='{"spm":"1001.2101.3001.6334","extend1":"专栏目录"}'>专栏目录</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<a id="commentBox" name="commentBox"></a>
|
||
<div id="pcCommentBox" class="comment-box comment-box-new2 login-comment-box-new" style="display:none">
|
||
<div class="has-comment" style="display:block">
|
||
<div class="one-line-box">
|
||
<div class="has-comment-tit go-side-comment">
|
||
<span class="count">0</span> 条评论
|
||
</div>
|
||
<div class="has-comment-con comment-operate-item"></div>
|
||
<a class="has-comment-bt-right go-side-comment focus">写评论</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="first-recommend-box recommend-box recommend-highlight-default">
|
||
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_44857463/article/details/129130377" data-report-view='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-129130377-blog-142754373.235^v43^pc_blog_bottom_relevance_base9\",\"dist_request_id\":\"1733207986875_37692\"}","dist_request_id":"1733207986875_37692","ab_strategy":"vipdefault","index":"1","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_44857463/article/details/129130377"}'>
|
||
<div class="content-box">
|
||
<div class="content-blog display-flex">
|
||
<div class="title-box">
|
||
<span class="type">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/components/img/blogType.png" alt="">
|
||
<span class="tip">博客</span>
|
||
</span>
|
||
<a href="https://blog.csdn.net/weixin_44857463/article/details/129130377" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-129130377-blog-142754373.235^v43^pc_blog_bottom_relevance_base9\",\"dist_request_id\":\"1733207986875_37692\"}","dist_request_id":"1733207986875_37692","ab_strategy":"vipdefault","index":"1","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_44857463/article/details/129130377"}' data-report-query='spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-129130377-blog-142754373.235%5Ev43%5Epc_blog_bottom_relevance_base9&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-129130377-blog-142754373.235%5Ev43%5Epc_blog_bottom_relevance_base9'>
|
||
<div class="left ellipsis-online ellipsis-online-1"><em>Cesium</em>简介及发展历史</div>
|
||
</a>
|
||
</div>
|
||
<div class="info-box display-flex">
|
||
<div class="info">
|
||
<a href="https://blog.csdn.net/weixin_44857463" target="_blank"><span class="blog-title">纸飞机的旅行的博客</span></a>
|
||
</div>
|
||
<div class="info display-flex">
|
||
<span class="info-block time">02-20</span>
|
||
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
|
||
8045
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="desc-box">
|
||
<a href="https://blog.csdn.net/weixin_44857463/article/details/129130377" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-129130377-blog-142754373.235^v43^pc_blog_bottom_relevance_base9\",\"dist_request_id\":\"1733207986875_37692\"}","dist_request_id":"1733207986875_37692","ab_strategy":"vipdefault","index":"1","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_44857463/article/details/129130377"}' data-report-query='spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-129130377-blog-142754373.235%5Ev43%5Epc_blog_bottom_relevance_base9&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-129130377-blog-142754373.235%5Ev43%5Epc_blog_bottom_relevance_base9'>
|
||
<div class="desc ellipsis-online ellipsis-online-1"><em>Cesium</em>简介及发展历史</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="second-recommend-box recommend-box recommend-highlight-default">
|
||
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/TqbcAbap/article/details/133212970" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-133212970-blog-142754373.235^v43^pc_blog_bottom_relevance_base9\",\"dist_request_id\":\"1733207986875_37692\"}","dist_request_id":"1733207986875_37692","ab_strategy":"vipdefault","index":"1","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/TqbcAbap/article/details/133212970"}'>
|
||
<div class="content-box">
|
||
<div class="content-blog display-flex">
|
||
<div class="title-box">
|
||
<span class="type">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/components/img/blogType.png" alt="">
|
||
<span class="tip">博客</span>
|
||
</span>
|
||
<a href="https://blog.csdn.net/TqbcAbap/article/details/133212970" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-133212970-blog-142754373.235^v43^pc_blog_bottom_relevance_base9\",\"dist_request_id\":\"1733207986875_37692\"}","dist_request_id":"1733207986875_37692","ab_strategy":"vipdefault","index":"1","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/TqbcAbap/article/details/133212970"}' data-report-query='spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-133212970-blog-142754373.235%5Ev43%5Epc_blog_bottom_relevance_base9&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-133212970-blog-142754373.235%5Ev43%5Epc_blog_bottom_relevance_base9'>
|
||
<div class="left ellipsis-online ellipsis-online-1"><em>Cesium</em> 颜色过渡渲染 - <em>Shader</em></div>
|
||
</a>
|
||
</div>
|
||
<div class="info-box display-flex">
|
||
<div class="info">
|
||
<a href="https://blog.csdn.net/TqbcAbap" target="_blank"><span class="blog-title">TqbcAbap的博客</span></a>
|
||
</div>
|
||
<div class="info display-flex">
|
||
<span class="info-block time">09-23</span>
|
||
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
|
||
931
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="desc-box">
|
||
<a href="https://blog.csdn.net/TqbcAbap/article/details/133212970" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-133212970-blog-142754373.235^v43^pc_blog_bottom_relevance_base9\",\"dist_request_id\":\"1733207986875_37692\"}","dist_request_id":"1733207986875_37692","ab_strategy":"vipdefault","index":"1","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/TqbcAbap/article/details/133212970"}' data-report-query='spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-133212970-blog-142754373.235%5Ev43%5Epc_blog_bottom_relevance_base9&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-133212970-blog-142754373.235%5Ev43%5Epc_blog_bottom_relevance_base9'>
|
||
<div class="desc ellipsis-online ellipsis-online-1">在<em>Cesium</em>中，我们可以使用<em>着色器</em>（<em>Shader</em>）来实现颜色的渐变效果。<em>着色器</em>是一种在图形渲染过程中控制颜色、纹理和光照等方面的工具。通过编写自定义的<em>着色器</em>代码，我们可以实现各种独特的视觉效果。为了实现颜色的渐变效果，我们需要编写一个简单的片段<em>着色器</em>（Fragment <em>Shader</em>）。通过使用该插值因子，我们可以根据垂直位置来计算颜色的过渡效果。在使用这段<em>着色器</em>代码之前，我们需要将其与<em>Cesium</em>的渲染管道进行关联。是传入的Uniform变量，用来指定起始颜色和结束颜色。函数来插值计算当前片段的颜色。</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="recommend-box insert-baidu-box recommend-highlight-default">
|
||
<div class="recommend-item-box no-index" style="display:none"></div>
|
||
<div class="recommend-item-box type_blog clearfix" data-url="https://devpress.csdn.net/v1/article/detail/142935446" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-2-142935446-blog-142754373.235^v43^pc_blog_bottom_relevance_base9\",\"dist_request_id\":\"1733207986875_37692\"}","dist_request_id":"1733207986875_37692","ab_strategy":"vipdefault","index":"2","strategy":"2~default~BlogCommendFromBaidu~activity","dest":"https://devpress.csdn.net/v1/article/detail/142935446"}'>
|
||
<div class="content-box">
|
||
<div class="content-blog display-flex">
|
||
<div class="title-box">
|
||
<span class="type">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/components/img/blogType.png" alt="">
|
||
<span class="tip">博客</span>
|
||
</span>
|
||
<a href="https://devpress.csdn.net/v1/article/detail/142935446" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-2-142935446-blog-142754373.235^v43^pc_blog_bottom_relevance_base9\",\"dist_request_id\":\"1733207986875_37692\"}","dist_request_id":"1733207986875_37692","ab_strategy":"vipdefault","index":"2","strategy":"2~default~BlogCommendFromBaidu~activity","dest":"https://devpress.csdn.net/v1/article/detail/142935446"}' data-report-query='spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-2-142935446-blog-142754373.235%5Ev43%5Epc_blog_bottom_relevance_base9&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-2-142935446-blog-142754373.235%5Ev43%5Epc_blog_bottom_relevance_base9'>
|
||
<div class="left ellipsis-online ellipsis-online-1"><em>Cesium</em><em>学习</em>笔记</div>
|
||
<div class="tag">最新发布</div>
|
||
</a>
|
||
</div>
|
||
<div class="info-box display-flex">
|
||
<div class="info">
|
||
<a href="https://blog.csdn.net/weixin_57468559" target="_blank"><span class="blog-title">weixin_57468559的博客</span></a>
|
||
</div>
|
||
<div class="info display-flex">
|
||
<span class="info-block time">10-15</span>
|
||
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
|
||
2308
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="desc-box">
|
||
<a href="https://devpress.csdn.net/v1/article/detail/142935446" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-2-142935446-blog-142754373.235^v43^pc_blog_bottom_relevance_base9\",\"dist_request_id\":\"1733207986875_37692\"}","dist_request_id":"1733207986875_37692","ab_strategy":"vipdefault","index":"2","strategy":"2~default~BlogCommendFromBaidu~activity","dest":"https://devpress.csdn.net/v1/article/detail/142935446"}' data-report-query='spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-2-142935446-blog-142754373.235%5Ev43%5Epc_blog_bottom_relevance_base9&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-2-142935446-blog-142754373.235%5Ev43%5Epc_blog_bottom_relevance_base9'>
|
||
<div class="desc ellipsis-online ellipsis-online-1"><em>Cesium</em>是便用JavaScript开发的基于WebGL的实现三维地球和地图可视化的JS库，<em>Cesium</em>支持海量的三维模型数据，影像数据，地形高程数据，失量数据等丰富的地理教据的加载。在交通，规划，城市管理，地形仿真等领城有非常广泛的应用。<em>Cesium</em>为三维的GIS提供了一个高效的数据可视化平台。中文文档官网例子<em>Cesium</em>的特点①、跨平台，跨浏览器，无插件②、强大的地理数据可视化能力。<em>Cesium</em>自定义的3D Tiles数据格式，支持海量数据渲染。</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blog-footer-bottom" style="margin-top:10px;"></div>
|
||
|
||
</main>
|
||
<aside class="blog_container_aside">
|
||
<div id="asideProfile" class="aside-box">
|
||
<div class="profile-intro d-flex">
|
||
<div class="avatar-box d-flex justify-content-center flex-column">
|
||
<a href="https://blog.csdn.net/weixin_43700915" target="_blank" data-report-click='{"mod":"popu_379","spm":"1001.2101.3001.4121","dest":"https://blog.csdn.net/weixin_43700915","ab":"new"}'>
|
||
<img src="https://profile-avatar.csdnimg.cn/6505fd474db340f5b8e8cb2c8b008465_weixin_43700915.jpg!1" class="avatar_pic">
|
||
</a>
|
||
</div>
|
||
<div class="user-info d-flex flex-column profile-intro-name-box">
|
||
<div class="profile-intro-name-boxTop">
|
||
<a href="https://blog.csdn.net/weixin_43700915" target="_blank" class="" id="uid" title="Cesium进阶学习" data-report-click='{"mod":"popu_379","spm":"1001.2101.3001.4122","dest":"https://blog.csdn.net/weixin_43700915","ab":"new"}'>
|
||
<span class="name " username="weixin_43700915">Cesium进阶学习</span>
|
||
</a>
|
||
<span>
|
||
</span>
|
||
<span class="flag expert-blog">
|
||
<span class="bubble">CSDN认证博客专家</span>
|
||
</span>
|
||
<span class="flag company-blog">
|
||
<span class="bubble">CSDN认证企业博客</span>
|
||
</span>
|
||
</div>
|
||
<div class="profile-intro-name-boxFooter">
|
||
<span class="personal-home-page personal-home-years" title="已加入 CSDN 6年">码龄6年</span>
|
||
<span class="personal-home-page">
|
||
<a class="personal-home-certification" href="https://i.csdn.net/#/uc/profile?utm_source=14998968" target="_blank" title="暂无认证">
|
||
<img src="https://csdnimg.cn/identity/nocErtification.png" alt="">
|
||
暂无认证
|
||
</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="data-info d-flex item-tiling">
|
||
<dl class="text-center" title="34">
|
||
<a href="https://blog.csdn.net/weixin_43700915" data-report-click='{"mod":"1598321000_001","spm":"1001.2101.3001.4310"}' data-report-query="t=1">
|
||
<dt><span class="count">34</span></dt>
|
||
<dd class="font">原创</dd>
|
||
</a>
|
||
</dl>
|
||
<dl class="text-center" data-report-click='{"mod":"1598321000_002","spm":"1001.2101.3001.4311"}' title="66310">
|
||
<a href="https://blog.csdn.net/rank/list/weekly" target="_blank">
|
||
<dt><span class="count">6万+</span></dt>
|
||
<dd class="font">周排名</dd>
|
||
</a>
|
||
</dl>
|
||
<dl class="text-center" title="44232">
|
||
<a href="https://blog.csdn.net/rank/list/total" data-report-click='{"mod":"1598321000_003","spm":"1001.2101.3001.4312"}' target="_blank">
|
||
<dt><span class="count">4万+</span></dt>
|
||
<dd class="font">总排名</dd>
|
||
</a>
|
||
</dl>
|
||
<dl class="text-center" style="min-width:58px" title="32469">
|
||
<dt><span class="count">3万+</span></dt>
|
||
<dd>访问</dd>
|
||
</dl>
|
||
<dl class="text-center" title="3级,点击查看等级说明">
|
||
<dt><a href="https://blog.csdn.net/blogdevteam/article/details/103478461" target="_blank">
|
||
<img class="level" src="https://csdnimg.cn/identity/blog3.png">
|
||
</a>
|
||
</dt>
|
||
<dd>等级</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="item-rank"></div>
|
||
<div class="data-info d-flex item-tiling">
|
||
<dl class="text-center" title="797">
|
||
<dt><span class="count">797</span></dt>
|
||
<dd>积分</dd>
|
||
</dl>
|
||
<dl class="text-center" id="fanBox" title="451">
|
||
<dt><span class="count" id="fan">451</span></dt>
|
||
<dd>粉丝</dd>
|
||
</dl>
|
||
<dl class="text-center" title="435">
|
||
<dt><span class="count">435</span></dt>
|
||
<dd>获赞</dd>
|
||
</dl>
|
||
<dl class="text-center" title="0">
|
||
<dt><span class="count">0</span></dt>
|
||
<dd>评论</dd>
|
||
</dl>
|
||
<dl class="text-center" title="448">
|
||
<dt><span class="count">448</span></dt>
|
||
<dd>收藏</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="aside-box-footer" data-report-view='{"spm":"3001.4296"}'>
|
||
<div class="badge-box d-flex">
|
||
<div class="badge d-flex">
|
||
<div class="icon-badge" title="持之以恒">
|
||
<div class="mouse-box">
|
||
<img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/346614c9e330420283031521f054f5f0.png" alt="持之以恒">
|
||
</div>
|
||
</div>
|
||
<div class="icon-badge" title="勤写标兵">
|
||
<div class="mouse-box">
|
||
<img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/4bd50883a213407795a31d33d99b94d6.png" alt="勤写标兵">
|
||
</div>
|
||
</div>
|
||
<div class="icon-badge" title="笔耕不辍">
|
||
<div class="mouse-box">
|
||
<img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/70592b2299594e37aedcaa91fc52a294.png" alt="笔耕不辍">
|
||
</div>
|
||
</div>
|
||
<div class="icon-badge" title="创作能手">
|
||
<div class="mouse-box">
|
||
<img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/qixiebiaobing4@240.png" alt="创作能手">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="profile-intro-name-boxOpration">
|
||
<div class="opt-letter-watch-box">
|
||
<a rel="nofollow" class="bt-button personal-letter" href="https://im.csdn.net/chat/weixin_43700915" target="_blank" rel="noopener">私信</a>
|
||
</div>
|
||
<div class="opt-letter-watch-box">
|
||
<a class="personal-watch bt-button" id="btnAttent" >关注</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a id="remuneration" data-report-click='{"spm":"1001.2101.3001.9809"}' rel="nofollow" href="" class="remuneration-box">
|
||
<img src="" alt="">
|
||
</a>
|
||
<div id="asideWriteGuide" class="aside-box side-write-guide-box type-1" data-report-view='{"spm":"3001.9727"}'>
|
||
<div class="content-box">
|
||
<a rel="nofollow" href="https://edu.csdn.net/cloud/houjie?utm_source=hjblogllq" target="_blank" class="btn-go-write" data-report-query="spm=3001.9727" data-report-click='{"spm":"3001.9727"}'>
|
||
<img src="https://img-home.csdnimg.cn/images/20241202111142.jpg" alt="写文章">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div id="asideSearchArticle" class="aside-box">
|
||
<div class="aside-content search-comter">
|
||
<div class="aside-search aside-search-blog">
|
||
<input type="text" class="input-serch-blog" name="" autocomplete="off" value="" id="search-blog-words" placeholder="搜博主文章">
|
||
<a class="btn-search-blog" data-report-click='{"spm":"1001.2101.3001.9182"}'>
|
||
<img src="//csdnimg.cn/cdn/content-toolbar/csdn-sou.png?v=1587021042">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div id="asideHotArticle" class="aside-box">
|
||
<h3 class="aside-title">热门文章</h3>
|
||
<div class="aside-content">
|
||
<ul class="hotArticle-list">
|
||
<li>
|
||
<a href="https://blog.csdn.net/weixin_43700915/article/details/142754373" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/weixin_43700915/article/details/142754373","ab":"new"}'>
|
||
Cesium进阶学习四、shadertoy（着色器）
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
|
||
<span class="read">1911</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://blog.csdn.net/weixin_43700915/article/details/108343542" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/weixin_43700915/article/details/108343542","ab":"new"}'>
|
||
openlayers6.4.3+geoserver+vue
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
|
||
<span class="read">1890</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://blog.csdn.net/weixin_43700915/article/details/142824207" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/weixin_43700915/article/details/142824207","ab":"new"}'>
|
||
Cesium高阶学习十二、体积云
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
|
||
<span class="read">1697</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://blog.csdn.net/weixin_43700915/article/details/140719652" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/weixin_43700915/article/details/140719652","ab":"new"}'>
|
||
Cesium基础教程篇八
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
|
||
<span class="read">1629</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://blog.csdn.net/weixin_43700915/article/details/142821930" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/weixin_43700915/article/details/142821930","ab":"new"}'>
|
||
Cesium高阶学习五、离屏渲染
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
|
||
<span class="read">1402</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div id="asideCategory" class="aside-box ">
|
||
<h3 class="aside-title">分类专栏</h3>
|
||
<div class="aside-content">
|
||
<ul>
|
||
<li>
|
||
<a class="clearfix special-column-name" href="https://blog.csdn.net/weixin_43700915/category_12801783.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/weixin_43700915/category_12801783.html","ab":"new"}'>
|
||
<div class="special-column-bar "></div>
|
||
<img src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
|
||
<span class="title oneline">
|
||
Cesium基础知识专栏
|
||
</span>
|
||
</a>
|
||
<span class="special-column-num">10篇</span>
|
||
</li>
|
||
<li>
|
||
<a class="clearfix special-column-name" href="https://blog.csdn.net/weixin_43700915/category_12801806.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/weixin_43700915/category_12801806.html","ab":"new"}'>
|
||
<div class="special-column-bar "></div>
|
||
<img src="https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
|
||
<span class="title oneline">
|
||
Cesium进阶学习
|
||
</span>
|
||
</a>
|
||
<span class="special-column-num">9篇</span>
|
||
</li>
|
||
<li>
|
||
<a class="clearfix special-column-name" href="https://blog.csdn.net/weixin_43700915/category_12801812.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/weixin_43700915/category_12801812.html","ab":"new"}'>
|
||
<div class="special-column-bar "></div>
|
||
<img src="https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
|
||
<span class="title oneline">
|
||
Cesium高阶学习
|
||
</span>
|
||
</a>
|
||
<span class="special-column-num">12篇</span>
|
||
</li>
|
||
<li>
|
||
<a class="clearfix special-column-name" href="https://blog.csdn.net/weixin_43700915/category_12804508.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/weixin_43700915/category_12804508.html","ab":"new"}'>
|
||
<div class="special-column-bar "></div>
|
||
<img src="https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
|
||
<span class="title oneline">
|
||
大疆机场
|
||
</span>
|
||
</a>
|
||
<span class="special-column-num">1篇</span>
|
||
</li>
|
||
<li>
|
||
<a class="clearfix special-column-name" href="https://blog.csdn.net/weixin_43700915/category_10350338.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/weixin_43700915/category_10350338.html","ab":"new"}'>
|
||
<div class="special-column-bar "></div>
|
||
<img src="https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
|
||
<span class="title oneline">
|
||
openlayers+geoserver+vue
|
||
</span>
|
||
</a>
|
||
<span class="special-column-num">1篇</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div id="asideArchive" class="aside-box" style="display:block!important; width:300px;">
|
||
<h3 class="aside-title">最新文章</h3>
|
||
<div class="aside-content">
|
||
<ul class="inf_list clearfix">
|
||
<li class="clearfix">
|
||
<a href="https://blog.csdn.net/weixin_43700915/article/details/142844992" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/weixin_43700915/article/details/142844992","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/weixin_43700915/article/details/142844992","ab":"new"}'>大疆上云Demo注意事项</a>
|
||
</li>
|
||
<li class="clearfix">
|
||
<a href="https://blog.csdn.net/weixin_43700915/article/details/142824207" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/weixin_43700915/article/details/142824207","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/weixin_43700915/article/details/142824207","ab":"new"}'>Cesium高阶学习十二、体积云</a>
|
||
</li>
|
||
<li class="clearfix">
|
||
<a href="https://blog.csdn.net/weixin_43700915/article/details/142823936" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/weixin_43700915/article/details/142823936","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/weixin_43700915/article/details/142823936","ab":"new"}'>Cesium高阶学习十一、模型特效</a>
|
||
</li>
|
||
</ul>
|
||
<div class="archive-bar"></div>
|
||
<div class="archive-box">
|
||
<div class="archive-list-item"><a href="https://blog.csdn.net/weixin_43700915?type=blog&year=2024&month=10" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/weixin_43700915?type=blog&year=2024&month=10"}'><span class="year">2024年</span><span class="num">32篇</span></a></div>
|
||
<div class="archive-list-item"><a href="https://blog.csdn.net/weixin_43700915?type=blog&year=2020&month=09" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/weixin_43700915?type=blog&year=2020&month=09"}'><span class="year">2020年</span><span class="num">1篇</span></a></div>
|
||
<div class="archive-list-item"><a href="https://blog.csdn.net/weixin_43700915?type=blog&year=2019&month=10" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/weixin_43700915?type=blog&year=2019&month=10"}'><span class="year">2019年</span><span class="num">1篇</span></a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 详情页显示目录 -->
|
||
<!--文章目录-->
|
||
<div id="asidedirectory" class="aside-box">
|
||
<div class='groupfile' id="directory">
|
||
<h3 class="aside-title">目录</h3>
|
||
<div class="align-items-stretch group_item">
|
||
<div class="pos-box">
|
||
<div class="scroll-box">
|
||
<div class="toc-box"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
|
||
</div>
|
||
<div class="recommend-right align-items-stretch clearfix" id="rightAside" data-type="recommend">
|
||
<aside class="recommend-right_aside">
|
||
<div id="recommend-right" >
|
||
<div class='flex-column aside-box groupfile' id="groupfile">
|
||
<div class="groupfile-div">
|
||
<h3 class="aside-title">目录</h3>
|
||
<div class="align-items-stretch group_item">
|
||
<div class="pos-box">
|
||
<div class="scroll-box">
|
||
<div class="toc-box"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class='aside-box kind_person d-flex flex-column'>
|
||
<h3 class="aside-title">分类专栏</h3>
|
||
<div class="align-items-stretch kindof_item" id="kind_person_column">
|
||
<div class="aside-content">
|
||
<ul>
|
||
<li>
|
||
<a class="clearfix special-column-name" href="https://blog.csdn.net/weixin_43700915/category_12801783.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/weixin_43700915/category_12801783.html","ab":"new"}'>
|
||
<div class="special-column-bar "></div>
|
||
<img src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
|
||
<span class="">
|
||
Cesium基础知识专栏
|
||
</span>
|
||
</a>
|
||
<span class="special-column-num">10篇</span>
|
||
</li>
|
||
<li>
|
||
<a class="clearfix special-column-name" href="https://blog.csdn.net/weixin_43700915/category_12801806.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/weixin_43700915/category_12801806.html","ab":"new"}'>
|
||
<div class="special-column-bar "></div>
|
||
<img src="https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
|
||
<span class="">
|
||
Cesium进阶学习
|
||
</span>
|
||
</a>
|
||
<span class="special-column-num">9篇</span>
|
||
</li>
|
||
<li>
|
||
<a class="clearfix special-column-name" href="https://blog.csdn.net/weixin_43700915/category_12801812.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/weixin_43700915/category_12801812.html","ab":"new"}'>
|
||
<div class="special-column-bar "></div>
|
||
<img src="https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
|
||
<span class="">
|
||
Cesium高阶学习
|
||
</span>
|
||
</a>
|
||
<span class="special-column-num">12篇</span>
|
||
</li>
|
||
<li>
|
||
<a class="clearfix special-column-name" href="https://blog.csdn.net/weixin_43700915/category_12804508.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/weixin_43700915/category_12804508.html","ab":"new"}'>
|
||
<div class="special-column-bar "></div>
|
||
<img src="https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
|
||
<span class="">
|
||
大疆机场
|
||
</span>
|
||
</a>
|
||
<span class="special-column-num">1篇</span>
|
||
</li>
|
||
<li>
|
||
<a class="clearfix special-column-name" href="https://blog.csdn.net/weixin_43700915/category_10350338.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/weixin_43700915/category_10350338.html","ab":"new"}'>
|
||
<div class="special-column-bar "></div>
|
||
<img src="https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
|
||
<span class="">
|
||
openlayers+geoserver+vue
|
||
</span>
|
||
</a>
|
||
<span class="special-column-num">1篇</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
<div class="recommend-right1 align-items-stretch clearfix" id="rightAsideConcision" data-type="recommend">
|
||
<aside class="recommend-right_aside">
|
||
<div id="recommend-right-concision" >
|
||
<div class='flex-column aside-box groupfile' id="groupfileConcision">
|
||
<div class="groupfile-div1">
|
||
<h3 class="aside-title">目录</h3>
|
||
<div class="align-items-stretch group_item">
|
||
<div class="pos-box">
|
||
<div class="scroll-box">
|
||
<div class="toc-box"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="mask-dark"></div>
|
||
<div class="skin-boxshadow"></div>
|
||
<div class="directory-boxshadow"></div>
|
||
<div class="comment-side-box-shadow comment-side-tit-close" id="commentSideBoxshadow">
|
||
<div class="comment-side-content">
|
||
<div class="comment-side-tit">
|
||
<span class="comment-side-tit-count">评论</span>
|
||
<img class="comment-side-tit-close" src="https://csdnimg.cn/release/blogv2/dist/pc/img/closeBt.png"></div>
|
||
<div id="pcCommentSideBox" class="comment-box comment-box-new2 " style="display:block">
|
||
<div class="comment-edit-box d-flex">
|
||
<div class="user-img">
|
||
<a href="https://blog.csdn.net/" target="_blank">
|
||
<img src="https://profile-avatar.csdnimg.cn/default.jpg!1">
|
||
</a>
|
||
</div>
|
||
<form id="commentform">
|
||
<textarea class="comment-content" name="comment_content" id="comment_content" placeholder="欢迎高质量的评论，低质的评论会被折叠" maxlength="1000"></textarea>
|
||
<div class="comment-reward-box" style="background-image: url('https://img-home.csdnimg.cn/images/20230131025301.png');">
|
||
<a class="btn-remove-reward"></a>
|
||
<div class="form-reward-box">
|
||
<div class="info">
|
||
成就一亿技术人!
|
||
</div>
|
||
<div class="price-info">
|
||
拼手气红包<span class="price">6.0元</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="comment-operate-box">
|
||
<div class="comment-operate-l">
|
||
<span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span>
|
||
</div>
|
||
<div class="comment-operate-c">
|
||
|
||
</div>
|
||
<div class="comment-operate-r">
|
||
<div class="comment-operate-item comment-reward">
|
||
<img class="comment-operate-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentReward.png" alt="红包">
|
||
<span class="comment-operate-tip">添加红包</span>
|
||
</div>
|
||
<div class="comment-operate-item comment-emoticon">
|
||
<img class="comment-operate-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentEmotionIcon.png" alt="表情包">
|
||
<span class="comment-operate-tip">插入表情</span>
|
||
<div class="comment-emoticon-box comment-operate-isshow">
|
||
<div class="comment-emoticon-img-box"></div>
|
||
</div>
|
||
</div>
|
||
<div class="comment-operate-item comment-code">
|
||
<img class="comment-operate-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentCodeIcon.png" alt="表情包">
|
||
<span class="comment-operate-tip">代码片</span>
|
||
<div class="comment-code-box comment-operate-isshow">
|
||
<ul id="commentCode">
|
||
<li><a data-code="html">HTML/XML</a></li>
|
||
<li><a data-code="objc">objective-c</a></li>
|
||
<li><a data-code="ruby">Ruby</a></li>
|
||
<li><a data-code="php">PHP</a></li>
|
||
<li><a data-code="csharp">C</a></li>
|
||
<li><a data-code="cpp">C++</a></li>
|
||
<li><a data-code="javascript">JavaScript</a></li>
|
||
<li><a data-code="python">Python</a></li>
|
||
<li><a data-code="java">Java</a></li>
|
||
<li><a data-code="css">CSS</a></li>
|
||
<li><a data-code="sql">SQL</a></li>
|
||
<li><a data-code="plain">其它</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="comment-operate-item">
|
||
<input type="hidden" id="comment_replyId" name="comment_replyId">
|
||
<input type="hidden" id="article_id" name="article_id" value="142754373">
|
||
<input type="hidden" id="comment_userId" name="comment_userId" value="">
|
||
<input type="hidden" id="commentId" name="commentId" value="">
|
||
<a data-report-click='{"mod":"1582594662_003","spm":"1001.2101.3001.4227","ab":"new"}'>
|
||
<input type="submit" class="btn-comment btn-comment-input" value="评论">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="comment-list-container">
|
||
<div class="comment-list-box comment-operate-item">
|
||
</div>
|
||
<div id="lookFlodComment" class="look-flod-comment">
|
||
<span class="count"></span> 条评论被折叠 <a class="look-more-flodcomment">查看</a>
|
||
</div>
|
||
<div class="opt-box text-center">
|
||
<div class="btn btn-sm btn-link-blue" id="btnMoreComment"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="pcFlodCommentSideBox" class="pc-flodcomment-sidebox">
|
||
<div class="comment-fold-tit"><span id="lookUnFlodComment" class="back"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowLeftWhite.png" alt=""></span>被折叠的 <span class="count"></span> 条评论
|
||
<a href="https://blogdev.blog.csdn.net/article/details/122245662" class="tip" target="_blank">为什么被折叠?</a>
|
||
<a href="https://bbs.csdn.net/forums/FreeZone" class="park" target="_blank">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/iconPark.png">到【灌水乐园】发言</a>
|
||
</div>
|
||
<div class="comment-fold-content"></div>
|
||
<div id="lookBadComment" class="look-bad-comment side-look-comment">
|
||
<a class="look-more-comment">查看更多评论<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowDownWhite.png" alt=""></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="comment-rewarddialog-box">
|
||
<div class="form-box">
|
||
<div class="title-box">
|
||
添加红包
|
||
<a class="btn-form-close"></a>
|
||
</div>
|
||
<form id="commentRewardForm">
|
||
<div class="ipt-box">
|
||
<label for="txtName">祝福语</label>
|
||
<div class="ipt-btn-box">
|
||
<input type="text" name="name" id="txtName" autocomplete="off" maxlength="50">
|
||
<a class="btn-ipt btn-random"></a>
|
||
</div>
|
||
<p class="notice">请填写红包祝福语或标题</p>
|
||
</div>
|
||
<div class="ipt-box">
|
||
<label for="txtSendAmount">红包数量</label>
|
||
<div class="ipt-txt-box">
|
||
<input type="text" name="sendAmount" maxlength="4" id="txtSendAmount" placeholder="请填写红包数量(最小10个)" autocomplete="off">
|
||
<span class="after-txt">个</span>
|
||
</div>
|
||
<p class="notice">红包个数最小为10个</p>
|
||
</div>
|
||
<div class="ipt-box">
|
||
<label for="txtMoney">红包总金额</label>
|
||
<div class="ipt-txt-box error">
|
||
<input type="text" name="money" maxlength="5" id="txtMoney" placeholder="请填写总金额(最低5元)" autocomplete="off">
|
||
<span class="after-txt">元</span>
|
||
</div>
|
||
<p class="notice">红包金额最低5元</p>
|
||
</div>
|
||
<div class="balance-info-box">
|
||
<label>余额支付</label>
|
||
<div class="balance-info">
|
||
当前余额<span class="balance">3.43</span>元
|
||
<a href="https://i.csdn.net/#/wallet/balance/recharge" class="link-charge" target="_blank">前往充值 ></a>
|
||
</div>
|
||
</div>
|
||
<div class="opt-box">
|
||
<div class="pay-info">
|
||
需支付：<span class="price">10.00</span>元
|
||
</div>
|
||
<button type="button" class="ml-auto btn-cancel">取消</button>
|
||
<button type="button" class="ml8 btn-submit" disabled="true">确定</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="rr-guide-box">
|
||
<div class="rr-first-box">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward02.png" alt="">
|
||
<button class="btn-guide-known next">下一步</button>
|
||
</div>
|
||
<div class="rr-second-box">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward03.png" alt="">
|
||
<button class="btn-guide-known known">知道了</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="redEnvolope" id="redEnvolope">
|
||
<div class="env-box">
|
||
<div class="env-container">
|
||
<div class="pre-open" id="preOpen">
|
||
<div class="top">
|
||
<header>
|
||
<img class="clearTpaErr" :src="redpacketAuthor.avatar" alt="" />
|
||
<div class="author">成就一亿技术人!</div>
|
||
</header>
|
||
<div class="bot-icon"></div>
|
||
</div>
|
||
<footer>
|
||
<div class="red-openbtn open-start"></div>
|
||
<div class="tip">
|
||
领取后你会自动成为博主和红包主的粉丝
|
||
<a class="rule" target="_blank">规则</a>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<div class="opened" id="opened">
|
||
<div class="bot-icon">
|
||
<header>
|
||
<a class="creatorUrl" href="" target="_blank">
|
||
<img class="clearTpaErr" src="https://profile-avatar.csdnimg.cn/default.jpg!2" alt="" />
|
||
</a>
|
||
<div class="author">
|
||
<div class="tt">hope_wisdom</div> 发出的红包
|
||
</div>
|
||
</header>
|
||
</div>
|
||
<div class="receive-box">
|
||
<header></header>
|
||
<div class="receive-list">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="close-btn"></div>
|
||
</div>
|
||
</div>
|
||
<div id="rewardNew" class="reward-popupbox-new">
|
||
<p class="rewad-title">打赏作者<span class="reward-close"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/closeBt.png"></span></p>
|
||
<dl class="profile-box">
|
||
<dd>
|
||
<a href="https://blog.csdn.net/weixin_43700915" data-report-click='{"mod":"popu_379","dest":"https://blog.csdn.net/weixin_43700915","ab":"new"}'>
|
||
<img src="https://profile-avatar.csdnimg.cn/6505fd474db340f5b8e8cb2c8b008465_weixin_43700915.jpg!1" class="avatar_pic">
|
||
</a>
|
||
</dd>
|
||
<dt>
|
||
<p class="blog-name">Cesium进阶学习</p>
|
||
<p class="blog-discript">你的鼓励将是我创作的最大动力</p>
|
||
</dt>
|
||
</dl>
|
||
<div class="reward-box-new">
|
||
<div class="reward-content"><div class="reward-right"></div></div>
|
||
</div>
|
||
<div class="money-box">
|
||
<span class="choose-money choosed" data-id="1">¥1</span>
|
||
<span class="choose-money " data-id="2">¥2</span>
|
||
<span class="choose-money " data-id="4">¥4</span>
|
||
<span class="choose-money " data-id="6">¥6</span>
|
||
<span class="choose-money " data-id="10">¥10</span>
|
||
<span class="choose-money " data-id="20">¥20</span>
|
||
</div>
|
||
<div class="sure-box">
|
||
<div class="sure-box-money">
|
||
<div class="code-box">
|
||
<div class="code-num-box">
|
||
<span class="code-name">扫码支付：</span><span class="code-num">¥1</span>
|
||
</div>
|
||
<div class="code-img-box">
|
||
<div class="renovate">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-time-out.png">
|
||
<span>获取中</span>
|
||
</div>
|
||
</div>
|
||
<div class="code-pay-box">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newWeiXin.png" alt="">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newZhiFuBao.png" alt="">
|
||
<span>扫码支付</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sure-box-blance">
|
||
<p class="tip">您的余额不足，请更换扫码支付或<a target="_blank" data-report-click='{"mod":"1597646289_003","spm":"1001.2101.3001.4302"}' href="https://i.csdn.net/#/wallet/balance/recharge?utm_source=RewardVip" class="go-invest">充值</a></p>
|
||
<p class="is-have-money"><a class="reward-sure">打赏作者</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pay-code">
|
||
<div class="pay-money">实付<span class="pay-money-span" data-nowprice='' data-oldprice=''>元</span></div>
|
||
<div class="content-blance"><a class="blance-bt" href="javascript:;">使用余额支付</a></div>
|
||
<div class="content-code">
|
||
<div id="payCode" data-id="">
|
||
<div class="renovate">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-time-out.png">
|
||
<span>点击重新获取</span>
|
||
</div>
|
||
</div>
|
||
<div class="pay-style"><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/weixin.png"></span><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/zhifubao.png"></span><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/jingdong.png"></span><span class="text">扫码支付</span></div>
|
||
</div>
|
||
<div class="bt-close">
|
||
<svg t="1567152543821" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10924" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
|
||
<defs>
|
||
<style type="text/css"></style>
|
||
</defs>
|
||
<path d="M512 438.378667L806.506667 143.893333a52.032 52.032 0 1 1 73.6 73.621334L585.621333 512l294.485334 294.485333a52.074667 52.074667 0 0 1-73.6 73.642667L512 585.621333 217.514667 880.128a52.053333 52.053333 0 1 1-73.621334-73.642667L438.378667 512 143.893333 217.514667a52.053333 52.053333 0 1 1 73.621334-73.621334L512 438.378667z" fill="" p-id="10925"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="pay-balance">
|
||
<input type="radio" class="pay-code-radio" data-type="details">
|
||
<span class="span">钱包余额</span>
|
||
<span class="balance" style="color:#FC5531;font-size:14px;">0</span>
|
||
<div class="pay-code-tile">
|
||
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-help.png" alt="">
|
||
<div class="pay-code-content">
|
||
<div class="span">
|
||
<p class="title">抵扣说明：</p>
|
||
<p> 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。<br> 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a class="pay-balance-con" href="https://i.csdn.net/#/wallet/balance/recharge" target="_blank"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/recharge.png" alt=""><span>余额充值</span></a>
|
||
</div>
|
||
|
||
<div class="keyword-dec-box" id="keywordDecBox"></div>
|
||
</body>
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://g.csdnimg.cn/lib/cboxEditor/1.1.6/embed-editor.min.css">
|
||
<link rel="stylesheet" href="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/codesnippet/lib/highlight/styles/atom-one-light.css">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</html> |