- 博客(55)
- 收藏
- 关注
RSS订阅原创 着色器变量
Attribute变量仅顶点着色器可用，必须与CPU的顶点缓冲区绑定；每个顶点对应一个独立值，无法直接传递到片元着色器。Varying变量顶点着色器中声明为out，片元着色器中声明为in，名称和类型必须严格匹配；自动完成光栅化插值，将顶点数据平滑过渡到每个片元。Uniform变量可同时在顶点/片元着色器中声明为in；全局共享同一值，适合传递矩阵、光照参数等不随顶点/片元变化的数据。如果你尝试在片元着色器中直接使用顶点着色器的in变量（如a_normal。
2026-02-06 10:35:31
216
原创 顶点着色器与片元着色器
顶点着色器和片元着色器是WebGL的核心，前者负责空间转换，后者负责颜色计算。在WebGIS开发中，合理分配计算任务到顶点/片元着色器，结合GPU并行特性，可实现高性能的三维可视化效果。始终遵循尽量减少片元着色器计算量的原则，因为片元数量远多于顶点数量，优化片元着色器带来的性能提升更显著。
2026-02-06 10:34:55
79
原创 WebGL动画实现方式与定时器缺陷
实现方式优势适用场景与刷新同步、性能优化、资源友好绝大多数WebGL动画场景着色器动画GPU并行计算、低CPU负载大量顶点/粒子动画、复杂视觉效果Web Workers辅助避免主线程阻塞、支持复杂计算物理模拟、集群路径规划无绝对避免使用在WebGL开发中，始终以requestAnimationFrame为动画基础框架，结合着色器动画提升渲染性能，Web Workers处理复杂计算，可实现流畅、高效的三维可视化效果。
2026-02-04 17:41:39
806
原创 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
515
原创 VAO与单帧渲染流程
（简称VAO）是WebGL中用于存储顶点数据配置状态的容器，它可以将以下顶点相关的配置逻辑封装为一个独立对象： 是操作VAO的核心API，用于将指定VAO设置为当前活跃状态，后续所有顶点属性配置都会自动关联到该VAO。参数类型含义 | 要绑定的VAO对象；若传入，则解绑当前VAO，恢复到默认顶点状态3. 工作原理绑定VAO时：WebGL会将当前的顶点配置状态（VBO绑定、顶点属性设置等）记录到该VAO中。解绑VAO时：WebGL恢复到默认顶点状态（无VAO活跃）。
2026-02-03 16:46:34
542
原创 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
674
原创 GLSL 核心内置函数
/ 标量/向量插值，t为全局插值因子// 分量级插值，t为同类型向量，每个分量独立插值// 2D点距离// 3D点距离// 齐次坐标距离。
2026-01-28 16:12:33
593
原创 Cesium 后处理效果
/ 随时间闪烁`,time: () => viewer.clock.currentTime.secondsOfDay // 每秒更新时间});
2026-01-27 17:25:09
610
原创 Cesium 核心内置函数
将数值限制在指定的最小值和最大值之间，返回裁剪后的结果。toRadians：将角度值转换为弧度值（Cesium 所有旋转、角度 API 均使用弧度）；toDegrees：将弧度值转换为角度值（用于用户界面展示）。解析 CSS 颜色字符串为 Cesium 可用的对象，支持所有 CSS 颜色格式。将 WGS84 经纬度（角度值）转换为 Cesium 内部使用的笛卡尔坐标（米单位）。基于指定的笛卡尔坐标，创建东-北-上（ENU）局部坐标系的变换矩阵，用于将局部坐标转换为世界坐标。czm_clamp。
2026-01-27 17:23:42
537
原创 Cesium 矩阵系统详解
数学定义：3×3 列主序矩阵，存储顺序为（列优先，与 WebGL 存储规范一致）。核心用途2D 仿射变换（平移、旋转、缩放）；3D 空间旋转（无平移分量，避免冗余计算）；法线变换（逆转置矩阵是法线变换的标准方式，Matrix3 更紧凑）。优势：比 Matrix4 更轻量化，旋转/法线变换计算效率更高。数学定义：4×4 列主序矩阵，存储顺序为，通过齐次坐标（w 分量）支持平移变换。核心用途3D 全量仿射变换（平移、旋转、缩放的组合）；模型矩阵、视图矩阵、投影矩阵的核心表示；
2026-01-26 16:22:11
651
原创 WebGL Shader性能优化
能不用分支就不用：用stepmixsmoothstep替代if-else；优先用内置函数：Cesium的czm_系列函数是硬件级优化的天花板；计算移到顶点着色器：片元着色器的计算成本是顶点着色器的100倍；减少内存访问：合并变量、避免随机访问、用压缩纹理；批量处理：用Primitive替代Entity，减少Draw Call。通过以上优化，Shader性能可提升50%-200%，尤其在大规模GIS场景（如低空经济航线、城市三维模型）中效果显著！🚀。
2026-01-23 16:31:45
668
原创 Cesium高级特效与着色器开发全指南
方法/属性定义用途场景从Cesium内置材质类型创建材质，支持自定义uniform参数实体颜色动画、纹理滚动、闪烁特效更新材质的uniform变量值动态调整特效参数（如闪烁频率、纹理速度）（材质的着色器源码配置）定义材质的顶点/片元着色器、uniform变量、属性完全自定义材质逻辑（如水流效果、渐变填充）方法/属性定义用途场景动态生成材质属性，每一帧更新uniform变量随时间变化的特效（如无人机航线轨迹、洪水淹没动画）颜色材质，支持动态颜色实体高亮、闪烁颜色切换。
2026-01-21 14:09:48
630
原创 gl-matrix矩阵库
存储数据（与WebGL原生兼容）、纯函数式设计、无依赖，是Cesium/Mapbox等WebGIS框架的底层矩阵运算核心。，旋转组合运算比矩阵快2-3倍，适合无人机姿态、三维模型旋转等WebGIS场景。是WebGL/ WebGIS的核心（4x4矩阵支持齐次坐标变换）。三大模块，结合WebGIS场景详解所有核心API。是WebGIS中最常用的（三维地理坐标、法向量），用于存储线性变换（平移、旋转、缩放、投影），用于存储坐标、方向、颜色等n维数据，用于高效表示三维旋转，避免欧拉角的。
2026-01-20 17:37:06
660
原创 WebGL核心API
类型枚举对应JavaScript类型用途gl.FLOAT存储坐标、矩阵、法向量等浮点数据存储索引数据（最大支持65535个顶点）存储大索引数据（需WebGL 2.0或扩展gl.RGBA纹理颜色格式（4通道）gl.RED单通道纹理格式（如DEM高度图）
2026-01-19 16:24:01
583
原创 WebGL开发
WebGL开发的核心是理解GPU渲染流程，将CPU数据高效传入GPU，通过着色器实现图形逻辑。对于GIS开发者来说，重点是地理数据与WebGL的结合用缓冲区加载GeoJSON/矢量瓦片坐标用纹理加载卫星影像/DEM高度图用着色器实现地理要素的符号化与动画用性能优化技术处理大规模地理数据。
2026-01-19 13:44:48
600
原创 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
588
原创 Cesium中的 Entity、Terrain、DataSource开发场景示例
是 Cesium 中用于描述随时间变化的三维位置属性的核心类，支持通过采样点插值生成平滑的动态轨迹。它通过存储多个时间戳对应的笛卡尔坐标，自动在时间区间内进行插值计算，实现位置的连续变化。
2026-01-16 15:46:17
1067
原创 Cesium中的CZML
CZML（）是Cesium官方推出的JSON格式动态场景描述语言，专门用于定义随时间变化的三维地理空间数据与可视化效果。它通过结构化的JSON语法，将实体（如点、线、模型）、属性（如位置、样式）、时间动态性（如轨迹回放）等信息统一描述，是Cesium实现复杂时空可视化的核心数据格式之一。
2026-01-16 15:31:00
569
原创 Cesium 核心概念全解析
/ 获取点击位置的笛卡尔坐标// 转换为经纬度${// 获取点击位置的笛卡尔坐标 const cartesian = scene . camera . pickEllipsoid(event . position , scene . globe . ellipsoid);// 转换为经纬度 const cartographic = Cesium . Cartographic . fromCartesian(cartesian);
2026-01-16 11:04:12
660
原创 NVM (Node Version Manager) 使用指南
✅ 轻松管理多个 Node.js 版本✅ 避免全局包冲突✅ 方便切换不同项目的 Node.js 环境✅ 保持开发环境与生产环境一致。
2026-01-14 15:30:39
320
原创 OpenLayers 绘制与移动交互功能详解
是一个 Vue Composable 函数，提供了 OpenLayers 地图的绘制和移动交互功能。绘制工具- 支持绘制点、线、面、圆等几何图形选择工具- 支持单击选择地图要素（支持多选）平移工具- 支持拖拽移动选中的地图要素框选工具- 支持矩形框选批量选择要素并移动// 选择样式color: "rgba(255,0,0,0)", // 自定义填充颜色}),color: "green", // 自定义边框颜色width: 2, // 自定义边框宽度}),}),});绘制工具。
2026-01-13 11:42:49
520
原创 OpenLayers 地图截图导出功能详解
根据地理坐标范围导出地图图片- 指定地理坐标范围，自动计算并截取对应区域根据像素坐标导出地图图片- 指定像素位置和尺寸，直接截取地图区域处理设备像素比- 适配高分辨率屏幕（Retina 屏等）格式转换- 支持导出为 Base64 Data URL 或 File 对象地理坐标到像素坐标的转换- 精确计算截图区域多图层 Canvas 合并- 支持复杂的地图场景设备像素比适配- 高分辨率屏幕支持格式转换- Base64 和 File 对象互转。
2026-01-13 09:44:40
647
原创 GeoJSON
GeoJSON 是现代Web GIS和数据交换的“通用语”。如果你从事与网络地图、空间数据可视化或前后端地理数据交互相关的工作，掌握GeoJSON是必不可少的基础。它的简单、清晰和强大的互操作性使其成为当今最受欢迎的地理空间数据格式之一。对于非常大的数据集，可以考虑使用其扩展格式TopoJSON或二进制格式（如）来提高效率。
2026-01-12 16:46:52
636
原创 performance.now()
高精度计时- 微秒级精度，适合性能测量单调递增- 不受系统时间调整影响，保证时间戳始终递增相对时间- 基于页面加载起点，适合测量相对时间间隔性能分析- 专门为性能监控和优化设计在需要精确测量时间间隔、监控性能、实现平滑动画等场景下，是比Date.now()更合适的选择。
2025-11-25 17:52:08
370
原创 Cesium 粒子系统详解
性能优先: 控制粒子数量，使用合适的纹理尺寸内存管理: 及时清理不需要的粒子系统分层设计: 使用多个简单的粒子系统而不是一个复杂的系统参数调优: 通过调试工具找到最佳参数组合错误处理: 添加纹理加载失败和参数验证用户体验: 根据设备性能动态调整效果质量。
2025-11-18 22:41:02
508
原创 Entity API vs Primitive API 详细对比
✅ 使用DataSource加载GeoJSON/KML。✅ 数据量小（< 1000个对象）✅ 大数据量（> 1000个对象）✅ 需要数据绑定和属性管理。✅ 需要自定义Shader。✅ 生产环境的优化需求。✅ 需要频繁修改属性。✅ 需要时间动态效果。✅ 批量渲染相似对象。
2025-11-13 15:52:49
381
原创 Cesium 大数据量优化加载方案
方案适用场景性能提升所有场景5-10倍分批加载初始加载避免卡顿Clustering大量点数据（>10000）10-100倍LOD多尺度查看2-5倍3D Tiles超大数据（百万级）100+倍大量Billboard/Label3-5倍几何简化复杂几何2-3倍。
2025-11-13 15:49:48
642
原创 web worker
Web Worker 是 HTML5 提供的浏览器内置 API，允许在后台线程中运行 JavaScript 代码，而不会阻塞主线程。这使得我们可以将计算密集型任务从主线程中分离出来，避免页面卡顿和无响应。
2025-10-12 14:44:38
423
原创 Webpack 4 与 Webpack 5 的区别及常见优化配置
开发环境：注重构建速度和调试体验，使用eval类型的 source map 和热更新生产环境：注重文件大小和运行性能，启用代码压缩、分割和 tree shaking合理使用缓存：利用 Webpack 5 的持久缓存和 loader 自带的缓存功能代码分割：合理拆分代码，提高首屏加载速度按需加载：使用动态导入 (import()) 实现路由和组件的懒加载持续监控：使用定期分析包内容，发现优化点保持更新：及时更新 Webpack 和相关插件，获取性能改进和新特性。
2025-09-14 15:51:54
952
原创 keepAlive 组件
特性描述核心功能缓存非活跃组件实例，避免重复渲染和状态丢失。主要场景标签页切换、路由页面缓存、保持组件状态、性能优化。控制缓存使用includeexclude按名称过滤，使用max限制缓存数量。生命周期引入和钩子来处理组件激活和失活时的逻辑。注意事项注意内存消耗，可能需要手动处理数据更新和滚动恢复。
2025-09-14 15:16:04
875
原创 nextTick、watch/watchEffect、setUp
概念核心作用关键点nextTick等待下一次 DOM 更新后执行代码。处理由异步更新导致的 DOM 状态同步问题。watch显式监听一个或多个特定数据源的变化。惰性，可获取旧值，适合精确控制的监听。自动追踪依赖并立即执行副作用函数。立即执行，无法获取旧值，依赖收集是自动的。setupComposition API 的入口，用于组织组件逻辑。在前调用，无this，返回模板所需数据。编译时语法糖，让setup的使用更简洁。自动暴露顶级变量/函数，使用和。
2025-09-14 15:02:07
974
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人