xt3d的博客

Cesium进阶教程-阴影贴图-视频融合-优化。

至于能够支持多少路视频同时播放，首先得看您的电脑配置能够带得动多少个阴影贴图和后处理程序，当然您也可以继续进行优化处理，比如考虑仅用一个后处理程序来处理，这在实际应用中可根据实际情况进行优化。方法为主方法，调用该方法就创建一个视频贴图对象，调用几次就创建几路视频，因为现在只有一个视频，所以用一个。要实现多路视屏与场景进行融合，只需重复单路视频融合的步骤即可，一路视频对应一个。现在传入不同的参数就可以创建不同的视频贴图，相当简单不再过多阐述。方法用于创建阴影贴图对象，参数。，一个阴影贴图对应一个。

热力图的设计原理是基于人眼对颜色的敏感度，不同颜色的明暗程度可以传达不同的数据密度或强度。一般来说，较亮的颜色（如红色或黄色）表示高密度或高强度的数据，而较暗的颜色（如蓝色或绿色）表示低密度或低强度的数据。热力图是一种用颜色来表示数据密度或强度的图表，它通过将数据映射到不同的颜色，以展示数据的分布和变化情况。热力图通常用于显示大量数据的空间分布或趋势，帮助用户快速理解数据的模式和关系。热力图可以显示数据的分布密度，通过颜色的明暗程度来表示不同区域或点的数据密集程度。通过颜色的明暗程度来表示数据的强弱程度。

属性来为我们传递自定义数据到后处理的片元着色器，比如我们通过下面的代码，将一个颜色值传到着色器中。第二步 在片元着色器中声明一个uniform变量进行接收。和前面的几何外观一样，后处理类提供了。第三步 在着色器中使用传递的颜色值。传递的数据支持动态更新，更新方式是。传递参数需要注意以下三点。

Cesium自带的几何图形已经很丰富了，但我们也常常需要定义自己的几何图形。使用实体API我们是无法自定义几何图形的，但是使用图元API却很容易实现。使用图元API自定义几何图形，可以通过Geometry类实现，这个类的构造函数如下。

都需要不同的输入参数，因为种类很多，并且使用方式都一样，所以我们不一一进行介绍，使用到时再详细说明。，或者两者同时组合分量，最后都会合并成一个着色器代码，这个着色器代码格式是固定的，默认情况下如下。完成，还可以由两者同时完成，最后会将两个的组合合并为一个着色器代码，合并是。类型的结构体，该结构体封装了前面说的要组合的各种分量，其定义如下。分量的组合定义一个物体（图形）的表面样式，这些分量是由一个名为。完成，那它们之间有什么关联呢？类型的值来使不同的图形具有不同的样式，类型的值来使不同的图形具有不同的样式，

如果为true，片元着色器会根据需要翻转曲面法线，以确保法线面向观察者，从而避免黑斑。适用于不同的几何图形，在使用时需要注意，用错了Appearance可能导致看不见渲染结果。类可以显示多个图形对象，但是只能设置一个外观，当我们需要取反不同的图形对象时，可以通过。：如果为true，则在片段着色器中使用平面着色，这意味着不考虑照明。材质外观，适用于所有的几何外观，支持材质描述进行着色。用于线的颜色外观，根据顶点颜色进行着色，结合。的一种，适用于平行于椭球表面的几何图形如。双面着色时，这很有用。

是一个接口类型，所以在使用时我们需要使用实现了该接口的外观类型，不同的外观类型适用于不同的几何图形，我们在下一节介绍。一个图元对象由几何图形和外观构成，几何图形决定了图元的形状，而外观则决定的图元的样式。时，渲染状态中会启用背面剔除。参与着色计算的材质对象，在。

也就是说一个几何对象可以被重复使用，这对于需要创建大量只是位置不一样的几何图形时，能够很大程度节省程序性能的开销。模型矩阵，让每个实例化后的几何对象具有不一样的位置，在上面的示例中已经展示过。为每个实例化几何对象设置一些特有的属性，比如颜色、可见性等，需要结合。允许一个几何对象位于多个不同的位置，并具有唯一的颜色。方法拾取几何对象时，用来区别是那个几何对象被拾取。每个实例化几何对象可以设置一个唯一id，当通过。可以被实例化多次，每次使用不同的。，比如下面的代码通过一个。显示的几何形状，类似。

实体API（Entity) 为我们在Cesium中快速绘制各种图形提供了统一的入口，但是除了实体API (Entity) 以外， Cesium中还有一套比较重要的图形绘制接口图元API（Primitive相对于实体API来说，图元API 更接近渲染引擎底层，主要面向图形开发人员，意味着使用图元来绘制几何图形需要您具备一定的图形开发知识。上图为Cesium官方对于实体API（Entity) 和图元API（Primitive） 的说明点击查看。使用实体API绘图接口，Entity。

坐标系下的坐标值，因为是一个齐次坐标，所以要除以w分量，通过对z坐标值取反来获取距离，因为在眼睛坐标系下指 向物体的方法是。这是Cesium官网的一个示例，根据相机到像素点的距离实现雾化效果。方法计算相机到像素点的距离。方法传入距离计算雾化值。根据雾化值计算雾化颜色。

当然，光是这样限定肯定是不够的，我们往往还需要更小范围的限定，比如以地球表面的某个点为中心，方圆多少米的范围内我们处理，其余范围我们不处理。值的影响，即将其作为一个二维的坐标进行使用。在三维世界坐标系中，要判断包含关系是很难的，所以必须借助一个局部的坐标系来进行关系的判断。首先建立一个局部东北上坐标系，然后将所有的世界坐标转到该坐标系下进行关系的判断，因为是判断在范围内，所以判断时可以忽略。场景后处理程序作用的是整个场景，可是有时候我们只想让其作用在某个指定的范围，此时我们就需要添加范围的限制。

即多边形图形，这类图形它在建模的时候就是完全基于世界坐标的，它的模型矩阵就是一个单位矩阵，相当于它不需要进行模型矩阵的变换，当然！这是因为Cesium是一个二三维的框架，有2D、2.5D、3D等模式，如果不指定仅三维模式，它得考虑很多情况，从而进行一些兼容性的计算。等专业的二维地图框架，Cesium二维地图功能效果比不上这些框架，所以本教程都是在仅三维模式的前提下进行讲解的，不涉及除三维模式外与其他模式兼容相关的内容。，此时运行代码，你会得到一个不断向某个方向移动的多边形，这个方向其实就是世界坐标系的。

在场景后处理中，我们获取到的是场景的渲染结果或上一个后处理的结果，是一张颜色纹理图和一张深度纹理图，此时已经没有世界坐标的概念了，但是为了实现某些效果，我们往往需要还原每个像素的世界坐标。为红色，那么此时结果应该是看到一个从赤道开始，往北为绿色，往南为红色的地球。我们可以通过颜色的方式将其输出，此处的世界坐标是笛卡尔坐标值，Cesium世界坐标系的原点位于地球的中心点，封装了很多内置的变量和方法，我们可以使用其中的变量和方法协助我们从深度图中还原像素的世界坐标。存储的是像素的颜色值，在这里对我们没啥作用。

后处理中只有片元着色器，并没有顶点着色器，因为后处理是对场景渲染后的结果进行处理，此时相当于是处理一张图片，所以没有顶点的概念。要实现理想的后处理效果，在后处理的片元着色器中，如果我们只能获取到上面说的默认输入参数是远远不够的，还需要借助Cesium的。用来传递数据到片元着色器，这些数据可以是一个对象，也可以是一个方法，比如要传递一个颜色值到片元着色器，可以如下。： 深度纹理图，即场景深度图，存储了每个像素的深度（可以还原为像素到相机的距离）： 颜色纹理图，即场景渲染的结果，或者上一个后处理的结果。

场景后处理，顾名思义场景的后期处理，场景渲染就像拍照一样，类似于拍照的过程，在拍完照后可能还需要修一下图，使图片看起来更加美观，不过修图也是一门手艺活，可能越修越好看，也可能越修越面目全非。大多数3D渲染框架都提供了场景后处理的接口，Cesium也不例外，后处理的大致流程就是先将场景渲染的结果存在帧缓冲区，然后将渲染的结果经过一系列后处理操作，最后才绘制到屏幕上。使用场景后处理的优点是，场景后处理作用的是整个场景，也就是说作用于场景中的所有对象，这使得我们在实现某些效果时不需要考虑每种对象的差异。

此时我们发现虽然视频已经成功显示到了场景中，但是静止状态的，这是因为只采样了视频的一帧，要解决这个问题，我们不能直接将视频元素作为参数传递，解决方式是动态获取视频帧。视频融合是将视频和场景进行融合显示的一种技术，在Cesium中可以有多中方式实现视频与场景融合，因为本章介绍的是阴影贴图，所以本节介绍通过阴影贴图的方式实现。视频的纹理数据我们已经成功传递到后处理的片元着色器中，现在我们需要通过纹理坐标采样视频纹理，在上面测试的代码中我们使用了。中进行显示，这里需要注意的是由于浏览器安全策略，我们创建的。

我们先分析一下可视域的原理，可视域就是根据我们设定的相机位置，沿着相机的方向看去，那些地方看得见，那些地方看不见，这其实就是在阴影贴图中判断是否为阴影，阴影的地方就是看不见的地方，我们只需要将阴影的地方置为。我们将判断的这部分代码拷贝到我们创建的后处理的着色器中，因为在判断的代码中使用到了。上面是创建一个后处理并添加到场景中的代码，我们并没有在输出值上做任何修改。首先创建一个基础的后处理，并添加到场景的后处理集合中。对象的很多参数，我们需要通过后处理的。的颜色，非阴影的地方设置为。的方式实现可视域分析。

总结一下ShadowMap的创建过程创建一个光源相机创建ShadowMap实例将ShadowMap实例通过添加到场景中更多内容见Cesium进阶教程-教程简介。

把光源当作摄像机，渲染整个场景，把深度信息写进纹理，称为。使用场景摄像机渲染场景，对于每个片元将其视点坐标转到。阴影贴图，是实现场景阴影的一种技术，其实现原理如下。可以百度搜索下载电子版，或者联系作者获取电子版。进行比较，从而判断是否在阴影中。

这里需要重点介绍的是前面我们通过某个坐标点建立一个局部坐标系，然后将有的点都转到这个局部坐标系下来进行比较，但是这里在顶点着色器中，我们能够拿到模型的模型坐标，该坐标是基于模型的模型坐标系的，这已经是一个局部坐标系，所以我们不需要再额外建立一个局部坐标系，直接使用模型的模型坐标系，然后将范围数据的坐标都转到这个模型坐标系下，就可以直接比较坐标关系了。修改源码的方式有两大问题，一是难度大，二是维护不方便，Cesium更新比较频繁，每次使用新版本都得重新修改源码，维护起来相当麻烦。是以模型的坐标原点为准的。

遮罩是指将指定的区域修改为暗色以突出显示主题区域的一种效果，我们可以借助地球材质属性来实现遮罩的功能。地球材质不仅可以用来显示等高线、坡度坡向、高程，其实还可以用来做很多效果，比如遮罩、裁剪等。裁剪是将区域内或者区域外的内容去掉掉直接不显示，在着色器中。区域内的材质设置一种颜色，区域外的材质设置另一种颜色。关键字可以实现这个效果。

接下来就可以照着等高线一节修改默认的着色器代码，首先将范围、矩阵等数据传递到着色器，然后在着色进行关系判断。坡向材质需要一个色带图片作为输入参数，我们参照官网示例代码将其封装为一个方法方便调用。首先根据当前高度和输入的最大最小高度将其值限定到。我们先看一下高程材质的。

接下来就可以照着等高线一节修改默认的着色器代码，首先将范围、矩阵等数据传递到着色器，然后在着色进行关系判断。接下来就可以照着等高线一节修改默认的着色器代码，首先将范围、矩阵等数据传递到着色器，然后在着色进行关系判断。坡向材质需要一个色带图片作为输入参数，我们参照官网示例代码将其封装为一个方法方便调用。坡向材质需要一个色带图片作为输入参数，我们参照官网示例代码将其封装为一个方法方便调用。可以看到几乎和坡度的一模一样，核心的代码是。可以看到几乎和坡度的一模一样，核心的代码是。我们先看一下坡向材质的。

接下来就可以照着等高线一节修改默认的着色器代码，首先将范围、矩阵等数据传递到着色器，然后在着色进行关系判断。上一节我们实现了局部等高线材质的效果，本节实现局部坡度材质效果，局部坡度材质实现思路与局部等高线材质相同。坡度材质需要一个色带图片作为输入参数，我们参照官网示例代码将其封装为一个方法方便调用。我们先看一下坡度材质的。可以看到，核心的代码是。

我们实现局部材质效果，就是通过修改默认的着色器代码实现，我们先看看如何修改默认的着色器代码，以及修改后是否生效。我们将上面默认的着色器代码修改如下。参数进行着色计算，这是一个输入参数，代表的就是的当前片元的高程值，这个参数是从地形的顶点着色器中传递进来的。结果设置为一个指定的颜色值，然后我们创建一个等高线材质并赋予地球对象的材质属性，看看这个改变是否生效。输入参数，分别是颜色、间距和线宽，这个很简单，不多介绍，我们看方法内部的代码。运行结果证明修改是有效的，接下来我们看等高线的原理是如何实现的。

因为这些材质默认将应用于整个地球的范围，而在实际的项目中，我们往往只关心项目的研究区域，所以需要对其显示的范围进行限定，因此我们本章的重点是研究如何实现局部的材质应用效果。因为这些材质默认将应用于整个地球的范围，而在实际的项目中，我们往往只关心项目的研究区域，所以需要对其显示的范围进行限定，因此我们本章的重点是研究如何实现局部的材质应用效果。顶点着色器，在顶点着色器中判断当前顶点是否在范围内，然后在片元着色器中进行处理。顶点着色器，在顶点着色器中判断当前顶点是否在范围内，然后在片元着色器中进行处理。

本教程名为Cesium进阶教程，适合具备基础的Cesium开发能力，想要学习Cesium进阶开发技能的Cesium开发者，教程的阅读者需要具备基础的Cesium开发能力和基本的WebGL知识。阅读教程时可以通过右上角的主题切换按钮设置一个喜欢的颜色模式（浅色/深色），每个文章的右侧都会生成一个文章内容的目录组织，可以方便您查看该篇文章的大致内容，文章中有些链接可以直接点击进行跳转。教程包含大量的功能示例代码，这些示例代码都是经过运行验证过的，对应的源代码已经放置在教程文章中。