refineiks-CSDN博客

原创 Cesium中实现全球体积云效果的一种方案

本文介绍的全球体积云实现方案主要是把现有的一些开源方案做了组合，它不需要依赖外部的噪声纹理，也不用再从片元向光源步进去计算云层的漫反射光颜色，优势是实现步骤简单明了，在仿真要求不是特别高的场景是够用的。，其中 raySphereDst 函数用于计算射线和球体的相交情况，rayCloudLayerDst 函数计算从相机发出的射线和云层最小高度和最大高度分别确定的两个球体的相交情况，从而得到体积云渲染光线步进的起点和终点。上面的步骤分别是体数据的生成和光线步进起止点的计算，体积云的正式渲染可以参考。

2024-07-10 21:35:38 1445 1

原创【WebGL】GPU计算法线和世界坐标系下精度问题的解决思路

WebGL在片元着色器中提供了用于计算偏导数的函数 dFdx 和 dFdy，它们用于计算某种类型的值相对于屏幕空间坐标的变化率。通俗来讲，对某个值求偏导，就是当屏幕坐标沿 x 轴前进 1 个像素或者沿 y 轴前进 1个像素时，该值的变化量。下面这张图可以很好地帮助理解（图片引用自基于上述基本定义，几何体上三角面片的法线计算就有了思路。对空间坐标分别求 dFdx 和 dFdy。假设屏幕坐标处的空间位置为 position(x, y)，那么。

2024-05-20 20:53:14 1499

原创【WebGL】修改阴影体形状，实现相交分析

在用阴影体贴地、贴对象时，大多数情况下我们都会认位阴影体是一个带有高度的闭合柱体，就像下图中红色轮廓线范围内的区域（轮廓线是为了描述阴影体的形状额外绘制出来的，实际渲染时阴影体不会显示），最终形成的贴对象效果类似下图中被混合了颜色的建筑表面。但其实阴影体的形状可以是任意的，我们可以将阴影体的形状修改为任意的几何体，比如下图中红色轮廓线范围内是一个自定义的阴影体，可以看到它的底面顶点高度并不一致，不是一个规则的柱体。

2024-04-30 21:48:56 1167

原创 Cesium实例化绘制原理分析

Cesium在 1.97 版本之前是有一个 ModelInstanceCollection 类用于完成模型的实例化绘制的，但是从 1.97 版本（2022 年 9 月 1 日发布）开始这个类被移除了。官方的说法是这个类和新的 Model （负责模型渲染的类）架构不适配了，由于 ModelInstanceCollection 这个类一直是私有接口，并没有通过文档暴露给用户，所以 Cesium 团队就给直接移除了，说是后续再考虑加回来，但是没说啥时候。

2024-04-06 17:48:07 3250

原创 [WebGL] 实例化绘制性能测试

实例化绘制（ Instanced Drawing ）是 OpenGL / WebGL 等图形 API 中常用的性能优化技术，它适用于同样的模型绘制次数非常多的场景，能够有效的降低显存占用和图形 API 接口调用的次数，达到性能提升的效果。上述实验可以看出模型复杂程度对实例化渲染的性能影响是很大的，那么网格的复杂程度和纹理的复杂程度哪一个占主导地位呢？保持三角网不变，将原始模型的纹理尺寸按比例缩小，从测试结果看到纹理尺寸对实例化的性能并没有影响。非实例化绘制直接卡死。：实例化绘制和非实例化绘制性能的对比。

2024-03-30 18:31:30 1794

原创 lil-gui 界面库的基本用法

是一个可以在运行时修改 JavaScript 对象属性的界面库。相信用过的同学对它一定不会陌生，three.js 的很多示例都用到了这个轻量的界面库修改三维场景的属性。我也是因为接触到 three.js 才打算学习一下这个库的。下面通过一组例子总结 lil-gui 的基本用法用这个库之前，需要实例化它的对象。

2024-02-26 20:25:07 1820

原创【Cesium】在着色器中计算片元的高程

但是逐片元去计算它们对应的椭球半径在着色器里不好实现，在CPU中计算相机位置处的椭球半径（下图中的 earthRadius ）来近似地作为相机观察范围内所有片元对应的椭球半径从性能和实现难度上都是更优解。2、在着色器中做如下转换：深度值 -> 相机坐标 -> 世界坐标，最后用片元世界坐标的模 - 相机位置对应的地球半径即可，glsl 代码如表1所示。怎么在着色器中计算片元的高程呢？1、在CPU中计算相机所在位置对应的地球半径，作为 uniform 变量传入着色器中：相机世界坐标的模 - 相机的高程。

2024-01-30 21:19:05 2619

原创 PBR材质背光面太暗优化

是在兰伯特光照模型基础上做的改进，用于解决兰伯特模型中光线无法照射到的区域完全没有漫反射导致看起来全黑的问题。可以看到和兰伯特模型的区别在于对点积部分做了一个变化，使得光线能照到的地方点积在 [ 0.5, 1.0 ] 区间，光线照不到的地方点积在 [ 0, 0.5 ] 范围内，这样背光面也会有明暗变化。PBR材质中漫反射的计算也遵循兰伯特模型，因此也可以用半兰伯特模型来改进效果。由于背光面的法线方向和光源方向的点积为负数，因此光线无法照射到的区域最终漫反射始终为黑色，无法看到物体的表面细节。

2024-01-18 21:02:08 2902

原创 Node.js监听文件的变化

watch 方法通过监听操作系统提供的各种事件实现对文件变化的监听，相较于 watchFile 方法性能更高，因此优先考虑使用 watch 方法。但是它在某些操作系统的某些情况下不可用（比如在 Windows 上，如果监视目录被移动或重命名，则不会触发任何事件）。此外，watch 方法还能监听文件夹。如果除了监听文件的变化，还需要获取新增的内容。使用 readFile 方法或 readline 模块都必须每次读取文件的所有内容，然后通过对比获取新的内容，这样做比较繁琐而且性能不高。两种方法监听文件变化。

2024-01-03 21:13:00 1412

原创基于径向模糊的体积光在Cesium中的应用

当空间中包含足够稠密的光散射介质（例如气体分子和气溶胶）时，光源透过遮挡物的缝隙投射的光线打在空气中的尘埃上，产生散射进入到人眼中，这些光线看起来像是一道一道的光柱，被称为体积光。在图形渲染中，体积光对画面的质感能起到很大的提升作用。体积光的渲染主要有和3 种方式。BillBoard贴片是把带有光柱效果的图片叠放在原始场景之上，实现方式不够灵活，换另一个场景就得另一组图片；径向模糊用后处理方式实现，效果不错，性能开销较小；光线追踪效果最好，算法较为复杂，性能消耗相对也较大。

2023-12-14 19:55:00 5472 17

原创三维gis中用纹理限定多边形地理区域

虽然说在CPU中通过几何算法可以判断某个点是否处于多边形区域内，但是并不适用于实时计算机图形渲染，因为空间是连续的，而点位是离散的，不可能把一个区域内的所有的地理坐标点都取完，然后依次在CPU中判断；上面的 “多边形区域纹理” 只是记录了多边形区域的形状，把它作为 uniform 变量输入到另一次 draw call 的着色器中，用于判断多边形区域和片元的包含关系。多边形角点的原始坐标为世界坐标系下的位置，为了把多边形绘制在一张纹理上并在后续用于判断包含关系。这都涉及到限定多边形区域的问题。

2023-11-28 19:00:01 1595

原创水面倒影可视化渲染方法

水面材质非常重要的一个光学特性就是反射倒影，有了倒影的加持能使水面更加逼真的渲染出来。在片元着色阶段，把 [ -1, 1] 的屏幕坐标转换为 [ 0, 1 ] 的纹理坐标去反射纹理上取值，和原始水面材质的颜色做线性混合就可以看到倒影效果了。有了反射平面后，以反射平面为镜像平面确定反射相机的位置，反射相机的方位角（heading）、翻滚角（roll）保持不变，俯仰角（pitch）取反。修改反射相机的投影矩阵，以改变近裁剪面的位置，使得近裁剪面为水面，这样水面下方的物体就不会被拍摄到，也就不会出现在倒影中了。

2023-11-26 18:31:25 2471

原创 GPU单精度限制造成抖动现象的解决方案

使用OpenGL和Direct3D等图形API绘图时，图形处理单元 (GPU) 在内部以32位单精度浮点数进行运算。在规范中，单精度值通常有7位精确的有效数字，因此，当传入GPU的数值变得越来越大时，数值的表示就会越来越不准确。三维数字地球往往要在大尺度下渲染物体，如果数值精度处理不当，物体看起来会有抖动的现象。假如我们要确保至少有1厘米的精度，那么传给GPU的最大数值是131,071（允许大约1厘米增量的最大数值是- 1，即131,071 ）。

2023-11-23 19:36:15 2233

原创 deck.gl子类图层的使用

添加新的功能往往需要增加新的属性，子类图层通常在 initializeState 生命周期方法中完成属性的新增。这个方法只在初始化的时候调用一次。比如下面这段代码，在 initializeState 函数中先调用父类的 initializeState 方法完成基本的初始化。然后通过 AttributeManager 添加一个实例化属性 instanceBreakdown，它由2个分量组成，通过 props 中名称为 getBreakdown 的访问器取值。

2023-11-08 20:13:29 242

原创 Cesium中三维热力图的实现思路

4、将热力图显示范围的多边形几何体进行三角细分（Cesium提供了三角细分相关的算法，PolygonGeometry.fromPositions方法的granularity参数），三角细分后才有足够多的顶点来拉伸不同的高度，产生三维的效果，不然只有多边形的几个角点。对应的是一张正常的热力图纹理，一张灰度纹理。2、使用同一份数据通过heatmap.js绘制两张二维热力图，一张正常的热力图，一张用灰度表示的热力图（只有黑白两种颜色的渐变）1、普通热力图的绘制基于开源库。，将数据组织成它需要的格式。

2023-11-07 18:18:21 4558 2

原创 deck.gl复合图层的使用

deck.gl提供（composite layer）的机制让用户自由组合已有的基础图层（primitive layers），以完成更复杂的功能和效果。使用复合图层还能使多个子图层能共享一份数据，这样只用下载和转换一次数据就行。使用复合图层的方式和基本图层一致，创建并作为deck.gl的图层即可。

2023-11-05 16:30:27 565

原创 Cesium相机姿态角的数值和相机朝向的关系

相机水平观察，pitch为0；垂直看向地面，pitch为 -PI / 2；Cesium中相机姿态角 heading、pitch、roll 的。相机顺时针旋转，roll增加；逆时针旋转，roll减少；的关系，如下图所示（PS用的不熟，直接手画了）相机朝正北方向，heading为0；

2023-11-04 08:23:47 2258

原创 C++中引用和指针的const限定

对常量的引用可以绑定到常量、非常量、字面值和表达式（只要是能隐式地转换为引用的类型就行）指向常量的指针和“对常量的引用”一样既可以指向常量也可以指向非常量。从右往左读就很好理解：p首先是常量，其次是指针，最后指向的是常量。引用本身不是对象，因此引用不能成为常量（不存在常量引用）普通引用不能绑定到常量对象上。普通指针不能指向常量对象。6、指向常量的常量指针。

2023-10-31 21:22:53 163

原创 proj4js空间坐标转换入门

WGS 84地理坐标系统（EPSG:4326）中国国家2000地理坐标系统（EPSG:4490）定义和WGS 84一样（CGCS2000椭球和WGS84椭球极为相似，偏差仅有0.11mm，完全可以兼容使用）北京54坐标系（EPSG:4214）西安80坐标系（EPSG:4610）UTM 50号带 / UTM zone 50N （EPSG:32650）中国国境跨UTM带号为43-53，根据需要更改+zone后面的数字即可。

2023-10-30 19:04:46 7983 1

原创 Electron关闭窗口时让用户确认

右上角的关闭按钮时，想让用户确认是否的确要关闭，避免误操作。以下代码及注释能较好的完成该需求。

2023-10-26 08:56:11 585

原创 Electron和Vite结合的一些思考

经过一段时间的实践，发现Electron结合Vite的方案实用性有所不足，不能很方便的操作Node.js和Electron提供的本地桌面应用开发能力。（花时间走通的方案又被自己否定了，有点小小的可惜）后来我在实际应用中没有用Vite脚手架，而是引入Vue的预编译包，把Vue当作一个界面库来用。Electron部分把主进程（main）、渲染器进程（renderer）、预加载脚本（preload）、网页（html）、样式（css）、静态库（public）等几个部分分离开来。组织结构如下图所示。

2023-10-25 18:23:27 875

原创 Cesium箭头线实现原理分析

表5-1和5-2的代码定义了箭头的斜边。getPointOnLine函数的返回值 slope * (x - p0.x) + p0.y 就是把当前处理的片元拉到斜边上，而且还是拉到对称的斜边上。Cesium在内部做了哪些操作，使得我们通常认为的如图2所示的一根带宽度线变为如图3所示的箭头线的呢？做了一个小技巧，把箭头区域和两侧一部分区域剔除，留下s值为1的区域作为非箭头区域，其余区域s均为0。，s + t 为1的区域，也就是图7和图10中s和t为1的区域被赋予颜色，其他区域都为透明。

2023-10-17 18:14:34 3344

原创 VS Code调试TypeScript基本流程

最近接触到的几个开源库源码都是用TypeScript写的（看来ts是大势所趋，不学不行啊）。虽然说不懂ts也能正常调API，但是碰到有意思的功能还是想跟进去看一看、改一改。在学习了基本的ts语法后有了调试的需求。如果用tsc编译出js，再去调试js还是太麻烦。如果能在VS Code中直接调试ts就完美了。在查阅一些资料后，我总结了一个基本流程，方便以后查阅，不足之处也请大家指正。

2023-10-14 16:08:42 1570

原创 Cesium BaseLayerPicker加载逻辑分析

随后这个数组会传入BaseLayerPickerViewModel的构造函数，在给selectedImagery属性赋值时用的是第一个元素，默认加载的是第一个ProviderViewModel对应的数据源。在BaseLayerPicker的界面上不同影像和地形的数据源选项顺序是定死了的。最后，遍历所有的ProviderViewModel，按照category属性分类，并返回所有数据源的属性给界面。那么如果想调整数据源的顺序（改变默认加载的数据源），或者新增自己的数据源，怎么办呢？

2023-10-09 08:58:45 1773

原创保存Chrome浏览器缓存的数据到本地

如果想要Chrome浏览器访问数据的同时，把数据也保存到本地磁盘上。可以试试Chrome浏览器的Save All Resources扩展。多浏览一会儿，等到目标格式数据的请求不再增加为止。（如果是有LOD层级的数据，比如倾斜摄影模型数据，需要不同距离和视角多浏览一会儿）打开调试面板，可以看到多了一个ResourceSaver选项卡。所有数据最终会保存在一个压缩包里，解压就可以找到想要的数据。切换到ResourceSaver选项卡下，点击保存按钮。勾选保存所有请求，确保所有数据都保存下来。

2023-10-08 19:30:00 968

原创本地搭建npm仓库

如果要在指定ip下访问，需要在配置文件中指明ip（可以指定多个ip），重启verdaccio后生效。此外，要发布的包必须有package.json，并且至少要包含name和version两个属性。在config.yaml中将allow_offline设置为true并重启后，可解决该问题。执行以下命令从私有库下载和安装包，下载的包将出现在node_modules文件夹中。，它是一个本地私有的npm仓库。启动，默认监听的是4873端口。在要发布的包的路径下执行。，可以进入可视化界面。如果要删除已发布的包。

2023-10-07 09:04:11 1083

2301_79959413的博客