ct978-CSDN博客

原创 gis(3)

解答：WebGL渲染管线是GPU按固定顺序处理图形数据、最终生成2D图像的完整流程，本质是“数据输入→处理→输出”的流水线，核心阶段分为顶点处理、图元装配、片元处理三大环节，各阶段并行执行，提升渲染效率。解答：原理：视锥是相机可视范围的锥形区域（由近裁剪面、远裁剪面、左右上下裁剪面围成），视锥剔除通过判断3D物体/瓦片是否完全位于视锥之外，将完全不可见的对象排除在渲染流程之外，仅渲染视锥内或部分重叠的对象。作用：减少需要渲染的对象数量，降低GPU渲染压力，避免无效渲染开销，提升3DGIS场景（如海量3D瓦片

2026-03-10 15:37:35 376

原创 Three.js内存泄漏

Three.js 内存泄漏是前端3D开发中高发且隐蔽的问题，其核心根源在于：Three.js的可视化对象（如MeshMaterialTexture）底层对应WebGL上下文的GPU资源（缓冲、纹理、着色器程序等），这些资源无法被浏览器垃圾回收（GC）自动清理，必须手动释放；同时JavaScript层面的强引用（如全局变量、事件监听器）会导致Three.js对象无法被GC回收，进一步加剧内存泄漏。以下从。

2026-03-09 16:09:38 365

原创 Cesium的时间轴 Timeline、Clock

/ 隐藏时间轴// 自定义时间轴位置（比如放在顶部）// 禁用时间轴交互Cesium时间轴是时空数据可视化的核心组件，通过Clock控制时间逻辑Timeline提供UI交互时间属性绑定动态数据，可以实现从简单轨迹回放到复杂实时模拟的多种场景。和的使用Clock的播放模式与速度控制Timeline的交互事件与样式自定义多数据源时间范围的独立控制结合Cesium的DataSources和CZML/KML支持，可以快速实现大规模时空数据的时间轴可视化。

2026-03-04 11:19:13 345

原创 npm、pnpm、yarn 包管理器的差异

小型个人项目，不想了解额外的工具细节。部署环境非常简单，不希望安装额外全局工具，随 Node 自带的 npm 最方便。团队成员技术水平参差不齐，使用标准工具降低认知负担。

2026-03-04 09:23:06 394

原创 Cesium 自定义材质

type: 'CustomGradient', // 材质唯一标识uniforms: { // 材质可配置参数（全局变量，支持动态更新）},source: ` // GLSL 着色器代码，必须实现 czm_getMaterial 函数// 自定义材质逻辑适合无需动态更新的场景，通过或直接传入 Fabric 对象创建。将自定义材质注册到 Cesium 全局材质系统后，可通过直接使用，或在 Entity 的材质属性中通过字符串类型引用。减少片元着色器计算。

2026-03-03 11:54:11 865

原创 gis基础（2）

面试解答（核心：渐变+动画，代码可复用，贴合面试高频场景）：Cesium中Entity是高层级渲染对象，支持点、线、面、3D模型等要素，高级样式（渐变、动画）是中级GIS开发的高频需求，核心依赖**Material（材质）和Property（动态属性）**实现。二、动画样式配置（以点、面为例，支持时间驱动）关键补充：动画核心是（回调属性），通过时间驱动动态修改样式参数；渐变核心是Cesium内置渐变材质（、），也可通过自定义Material实现复杂渐变。面试解答（核心：时间轴配置+要素时间绑定，代码可

2026-03-03 10:15:36 337

原创 gis基础（1）

面试解答（核心得分点）：核心规范：由Cesium官方主导的3D模型瓦片化规范，本质是将大型3D模型/地形数据，按“空间分层、细节分级”拆分，生成结构化瓦片集合，配套tileset.json（瓦片入口文件），定义瓦片层级、边界、URL、LOD等元信息，支持流式加载和实时渲染。分层分块原理：关键补充：瓦片间通过“父子关系”关联，父瓦片包含子瓦片的边界范围，加载父瓦片时可预加载子瓦片，避免切换卡顿，适配3DGIS大规模场景（如城市级3D建模）。面试解答：定义：空间索引是对GIS空间数据（点、线、面、3D模型）的空

2026-03-03 10:13:40 605

原创 Tween.js 动画库搭配 threeJS使用

Three.js + Tween.js 是快速实现平滑过渡动画的最佳组合，尤其适合 GIS 场景的相机漫游、模型交互反馈、UI 元素动画等需求。核心优势在于低学习成本、高灵活性，与 Three.js 原生动画系统互补，可根据场景选择最适合的方案。

2026-02-27 13:55:41 385

原创 Three.js的关键帧动画

若需手动创建骨骼动画，需结合与Bone// 1. 创建骨骼与蒙皮几何体// 对齐骨骼// 绑定骨骼与几何体// 2. 创建蒙皮网格geometry,// 3. 创建骨骼旋转动画'.bones[1].quaternion', // 骨骼旋转属性路径[0, 1],[0,0,0,1, Math.PI/2,0,0,1] // 从初始旋转到90度旋转通过[2], // 2秒时触发事件[0], // 事件标识（无实际意义）

2026-02-27 11:21:13 365

原创射线拾取（Raycasting

射线拾取的本质是：从相机位置发射一条穿过鼠标点击位置的射线，检测该射线与场景中3D物体的交点，然后对相交物体执行操作（如修改材质颜色）。如果多个模型共享同一个材质，修改颜色会影响所有使用该材质的物体。当场景中有数千个物体时，直接使用。如果场景中有大量物体，可通过。如果需要实现多选功能，可通过。会导致性能下降，可使用。

2026-02-26 15:38:50 347

原创 Three.js 纹理

加载瓦片纹理时，若单张瓦片尺寸不足，可通过重复实现大面积地面覆盖。对于大量重复的小模型（如树木、图标），使用。对于GIS标注、图标等透明纹理，优先使用。（默认开启，非幂次纹理需手动关闭）。设置纹理在X/Y轴的重复规则，配合。：使用Mipmap过滤需开启。若需软边缘透明，可开启。

2026-02-25 09:25:41 545

原创 ThreeJs材质、模型加载、核心API

当内置材质无法满足需求时，使用实战示例：渐变材质},`,`,side: THREE.BackSide // 用于天空盒等场景});

2026-02-24 11:14:37 614

原创 Vue3 + TS + ThreeJS + Vite 开发全指南

本文将从项目搭建、核心注意事项、基础组件封装三个维度，提供一套可复用的ThreeJS基础开发框架，支持通过配置参数快速生成场景、相机、控制器等核心模块。使用Vite快速创建Vue3+TS项目：2. 安装依赖3. Vite配置优化（）解决ThreeJS模块导入路径问题，优化构建速度：二、核心开发注意事项1. 类型安全与TS配置必须安装，确保TS能正确推断ThreeJS的类型在中添加ThreeJS类型引用：2. 响应式处理原则禁止用/包裹ThreeJS核心对象（Scene/Came

2026-02-10 18:06:27 319

原创 WebGL渲染管线

顶点阶段负责空间转换和属性传递，适合处理与顶点相关的计算。片元阶段负责颜色计算和特效处理，是视觉效果的核心，但也是性能瓶颈的高发区。固定功能阶段负责图元组装、可见性测试等底层逻辑，通过合理配置可显著提升性能。理解渲染管线的工作原理，是编写高效WebGL代码、解决渲染问题的关键，尤其在WebGIS这类需要处理大规模空间数据的场景中，优化渲染管线能直接提升可视化的流畅度和用户体验。

2026-02-10 13:45:07 307

原创着色器变量

Attribute变量仅顶点着色器可用，必须与CPU的顶点缓冲区绑定；每个顶点对应一个独立值，无法直接传递到片元着色器。Varying变量顶点着色器中声明为out，片元着色器中声明为in，名称和类型必须严格匹配；自动完成光栅化插值，将顶点数据平滑过渡到每个片元。Uniform变量可同时在顶点/片元着色器中声明为in；全局共享同一值，适合传递矩阵、光照参数等不随顶点/片元变化的数据。如果你尝试在片元着色器中直接使用顶点着色器的in变量（如a_normal。

2026-02-06 10:35:31 333

原创顶点着色器与片元着色器

顶点着色器和片元着色器是WebGL的核心，前者负责空间转换，后者负责颜色计算。在WebGIS开发中，合理分配计算任务到顶点/片元着色器，结合GPU并行特性，可实现高性能的三维可视化效果。始终遵循尽量减少片元着色器计算量的原则，因为片元数量远多于顶点数量，优化片元着色器带来的性能提升更显著。

2026-02-06 10:34:55 408

原创 WebGL动画实现方式与定时器缺陷

实现方式优势适用场景与刷新同步、性能优化、资源友好绝大多数WebGL动画场景着色器动画GPU并行计算、低CPU负载大量顶点/粒子动画、复杂视觉效果Web Workers辅助避免主线程阻塞、支持复杂计算物理模拟、集群路径规划无绝对避免使用在WebGL开发中，始终以requestAnimationFrame为动画基础框架，结合着色器动画提升渲染性能，Web Workers处理复杂计算，可实现流畅、高效的三维可视化效果。

2026-02-04 17:41:39 964

原创 WebGL三维可视化：正射投影与透视投影深度解析

正射投影的视锥体是一个长方体区域参数含义leftright视锥体左右平面的X坐标bottomtop视锥体上下平面的Y坐标nearfar视锥体近/远平面的Z坐标（需满足near < far，且不能为0）透视投影的视锥体是一个截头棱台（Frustum）参数含义fovy垂直视场角（Field of View Y），单位为弧度/角度aspect画布宽高比（near近平面Z坐标（必须>0，避免奇点）far远平面Z坐标（必须>near）

2026-02-04 15:13:20 748

原创 VAO与单帧渲染流程

（简称VAO）是WebGL中用于存储顶点数据配置状态的容器，它可以将以下顶点相关的配置逻辑封装为一个独立对象：是操作VAO的核心API，用于将指定VAO设置为当前活跃状态，后续所有顶点属性配置都会自动关联到该VAO。参数类型含义 | 要绑定的VAO对象；若传入，则解绑当前VAO，恢复到默认顶点状态3. 工作原理绑定VAO时：WebGL会将当前的顶点配置状态（VBO绑定、顶点属性设置等）记录到该VAO中。解绑VAO时：WebGL恢复到默认顶点状态（无VAO活跃）。

2026-02-03 16:46:34 555

原创 WebGL 图像处理核心API

所有WebGL图像处理都遵循以下流程：fill:#333;important;important;fill:none;color:#333;color:#333;important;fill:none;fill:#333;height:1em;加载图像/像素数据创建纹理并上传数据编写着色器程序（顶点+片元）设置帧缓冲（可选，离屏处理）渲染到纹理/画布读取处理结果。

2026-01-28 18:15:34 693

原创 GLSL 核心内置函数

/ 标量/向量插值，t为全局插值因子// 分量级插值，t为同类型向量，每个分量独立插值// 2D点距离// 3D点距离// 齐次坐标距离。

2026-01-28 16:12:33 617

原创 Cesium 后处理效果

/ 随时间闪烁`,time: () => viewer.clock.currentTime.secondsOfDay // 每秒更新时间});

2026-01-27 17:25:09 643

原创 Cesium 核心内置函数

将数值限制在指定的最小值和最大值之间，返回裁剪后的结果。toRadians：将角度值转换为弧度值（Cesium 所有旋转、角度 API 均使用弧度）；toDegrees：将弧度值转换为角度值（用于用户界面展示）。解析 CSS 颜色字符串为 Cesium 可用的对象，支持所有 CSS 颜色格式。将 WGS84 经纬度（角度值）转换为 Cesium 内部使用的笛卡尔坐标（米单位）。基于指定的笛卡尔坐标，创建东-北-上（ENU）局部坐标系的变换矩阵，用于将局部坐标转换为世界坐标。czm_clamp。

2026-01-27 17:23:42 553

原创 Cesium 矩阵系统详解

数学定义：3×3 列主序矩阵，存储顺序为（列优先，与 WebGL 存储规范一致）。核心用途2D 仿射变换（平移、旋转、缩放）；3D 空间旋转（无平移分量，避免冗余计算）；法线变换（逆转置矩阵是法线变换的标准方式，Matrix3 更紧凑）。优势：比 Matrix4 更轻量化，旋转/法线变换计算效率更高。数学定义：4×4 列主序矩阵，存储顺序为，通过齐次坐标（w 分量）支持平移变换。核心用途3D 全量仿射变换（平移、旋转、缩放的组合）；模型矩阵、视图矩阵、投影矩阵的核心表示；

2026-01-26 16:22:11 701

原创 WebGL Shader性能优化

能不用分支就不用：用stepmixsmoothstep替代if-else；优先用内置函数：Cesium的czm_系列函数是硬件级优化的天花板；计算移到顶点着色器：片元着色器的计算成本是顶点着色器的100倍；减少内存访问：合并变量、避免随机访问、用压缩纹理；批量处理：用Primitive替代Entity，减少Draw Call。通过以上优化，Shader性能可提升50%-200%，尤其在大规模GIS场景（如低空经济航线、城市三维模型）中效果显著！🚀。

2026-01-23 16:31:45 699

原创 Cesium高级特效与着色器开发全指南

方法/属性定义用途场景从Cesium内置材质类型创建材质，支持自定义uniform参数实体颜色动画、纹理滚动、闪烁特效更新材质的uniform变量值动态调整特效参数（如闪烁频率、纹理速度）（材质的着色器源码配置）定义材质的顶点/片元着色器、uniform变量、属性完全自定义材质逻辑（如水流效果、渐变填充）方法/属性定义用途场景动态生成材质属性，每一帧更新uniform变量随时间变化的特效（如无人机航线轨迹、洪水淹没动画）颜色材质，支持动态颜色实体高亮、闪烁颜色切换。

2026-01-21 14:09:48 720

原创 gl-matrix矩阵库

存储数据（与WebGL原生兼容）、纯函数式设计、无依赖，是Cesium/Mapbox等WebGIS框架的底层矩阵运算核心。，旋转组合运算比矩阵快2-3倍，适合无人机姿态、三维模型旋转等WebGIS场景。是WebGL/ WebGIS的核心（4x4矩阵支持齐次坐标变换）。三大模块，结合WebGIS场景详解所有核心API。是WebGIS中最常用的（三维地理坐标、法向量），用于存储线性变换（平移、旋转、缩放、投影），用于存储坐标、方向、颜色等n维数据，用于高效表示三维旋转，避免欧拉角的。

2026-01-20 17:37:06 690

原创自定义WebGL着色器

类型枚举对应JavaScript类型用途gl.FLOAT存储坐标、矩阵、法向量等浮点数据存储索引数据（最大支持65535个顶点）存储大索引数据（需WebGL 2.0或扩展gl.RGBA纹理颜色格式（4通道）gl.RED单通道纹理格式（如DEM高度图）

2026-01-19 16:24:01 597

原创 WebGL开发

WebGL开发的核心是理解GPU渲染流程，将CPU数据高效传入GPU，通过着色器实现图形逻辑。对于GIS开发者来说，重点是地理数据与WebGL的结合用缓冲区加载GeoJSON/矢量瓦片坐标用纹理加载卫星影像/DEM高度图用着色器实现地理要素的符号化与动画用性能优化技术处理大规模地理数据。

2026-01-19 13:44:48 614

原创 Leaflet核心概念

L.Map是Leaflet的根对象，负责管理地图视图、图层、控件与交互事件，所有地图元素都必须挂载到Map实例上。加载栅格瓦片地图（如OSM、高德、谷歌地图），是Leaflet最常用的图层类型。用于在地图上标记单点位置，支持自定义图标、Popup弹窗。// 自定义Marker图标配置iconUrl: './images/marker.png', // 图标路径iconSize: [32, 32], // 图标宽高iconAnchor: [16, 32], // 图标锚点（与地图坐标对齐的位置）

2026-01-18 19:50:41 614

原创 Cesium中的 Entity、Terrain、DataSource开发场景示例

是 Cesium 中用于描述随时间变化的三维位置属性的核心类，支持通过采样点插值生成平滑的动态轨迹。它通过存储多个时间戳对应的笛卡尔坐标，自动在时间区间内进行插值计算，实现位置的连续变化。

2026-01-16 15:46:17 1108

原创 Cesium中的CZML

CZML（）是Cesium官方推出的JSON格式动态场景描述语言，专门用于定义随时间变化的三维地理空间数据与可视化效果。它通过结构化的JSON语法，将实体（如点、线、模型）、属性（如位置、样式）、时间动态性（如轨迹回放）等信息统一描述，是Cesium实现复杂时空可视化的核心数据格式之一。

2026-01-16 15:31:00 601

原创 Cesium 核心概念全解析

/ 获取点击位置的笛卡尔坐标// 转换为经纬度${// 获取点击位置的笛卡尔坐标 const cartesian = scene . camera . pickEllipsoid(event . position , scene . globe . ellipsoid);// 转换为经纬度 const cartographic = Cesium . Cartographic . fromCartesian(cartesian);

2026-01-16 11:04:12 692