- 博客(108)
- 收藏
- 关注
RSS订阅原创 3D Tiles 中的 geometricError 是什么，它有什么作用
摘要： 3D Tiles中的geometricError是控制LOD层级的核心参数，表示瓦片允许的最大几何误差，其值随层级递减（顶层误差最大，底层趋近于0）。当瓦片的屏幕空间误差（SSE）超过该阈值时，触发加载更高精度的子瓦片；反之则渲染当前瓦片。其作用包括动态优化LOD切换和指导瓦片金字塔生成（顶层简化模型、底层精细模型），从而平衡渲染性能与视觉精度。
2025-08-08 10:10:57
275
原创 3D Tiles 格式中，Bounding Volum
3D Tiles格式中的Bounding Volume（包围体）是空间索引的核心机制，通过层级化的空间范围定义实现高效数据加载与渲染。作为瓦片的空间包裹盒，它精确描述模型数据的空间范围，并形成树状层级嵌套结构。其核心功能包括：视锥体剔除（仅加载可见瓦片）、细节层级控制（根据距离动态切换精度）以及碰撞检测支持。实际应用中，Bounding Volume能显著提升加载速度、渲染效率（剔除70%-90%不可见瓦片）和内存优化，使大规模三维场景可视化成为可能。其本质是解决海量三维数据的实时加载与性能平衡问题。
2025-08-08 09:35:48
559
原创 什么是3DTiles
3DTiles是一种开放的三维地理空间数据流式传输标准，由Cesium团队提出并成为OGC规范。它采用分层瓦片化和LOD技术，通过分块加载、动态细节控制和空间索引优化，实现倾斜摄影、BIM、点云等海量数据的高效网络传输与实时渲染。该技术广泛应用于智慧城市、GIS分析和工程勘探领域，支持多源数据融合与性能优化，是三维地理空间可视化的重要解决方案。
2025-08-08 09:03:38
422
原创 webgl渲染管线中的帧缓存，有什么内容
webgl渲染管线中帧缓存，是渲染流程的最终目的地，也是GPU与屏幕之间的桥梁。它本质上是GPU内存中一块特殊区域，存储了渲染结果的所有必要信息。
2025-08-08 01:23:06
366
原创 webgl的渲染管线
WebGL渲染管线是将3D数据转换为屏幕像素的GPU处理流程，包含三个关键阶段：顶点处理（通过顶点着色器进行坐标变换）、图元光栅化（将几何图元离散为片元）和片元处理（由片元着色器决定像素颜色，配合深度/模板测试等）。这一并行化流水线通过着色器编程实现高性能渲染，使开发者能精确控制从几何变换到最终像素生成的完整过程。
2025-08-08 01:08:01
329
原创 Web地图服务规范，WMTS服务是什么
WMTS（网络地图瓦片服务）是OGC制定的标准化协议，通过预先切片技术将地图数据按比例尺和投影切割成固定尺寸的瓦片，形成金字塔结构。其核心特点是高效快速，客户端通过GetTile请求指定缩放级别、行列号即可获取预渲染瓦片，无需服务器实时计算，极大提升了地图加载速度和并发处理能力。WMTS特别适合作为Web和移动地图应用的底图服务，支持流畅交互和高并发访问，但灵活性不如动态渲染的WMS服务。主要应用于在线地图底图、高并发场景和离线地图打包等。
2025-08-04 16:57:53
857
原创 Web地图服务规范，WMS服务是什么
WMS（Web Map Service）是OGC制定的网络地图服务标准，允许客户端通过HTTP请求动态获取服务器渲染的地图图像（如PNG/JPEG）。核心功能包括GetCapabilities（获取服务元数据）、GetMap（请求地图图片）和可选的GetFeatureInfo（查询要素属性）。主要优势在于标准化和互操作性，便于多源数据集成与可视化共享，同时保护原始数据。相比WMTS服务，WMS动态生成图像更灵活但性能可能较低，适用于快速集成、轻量级Web应用等场景，是地理数据可视化共享的重要解决方案。
2025-08-04 15:29:13
816
原创 express框架使用cors包解决跨域问题时，还是存在问题的原因。
但是我明明是使用了 cors 包解决了跨域问题了。当我调用其他接口的时候，发现出现了这些跨域问题。今天我在使用express框架写一个后台管理系统时，发现存在这样的问题，那就是。其实原因很简单，就是我在调用其他接口的时候，配置中说明，这是请求头允许的字段。添加允许自定义请求头字段。
2025-04-15 17:59:38
293
原创 three.js 使用 CubeCamera 实现地面反射倒影
有时候，我们在做three.js项目时，需要实现地面反射倒影的效果。例如这样的效果。这样的效果怎么样实现呢，今天我们使用CubeCamera来实现这个地面倒影效果。
2024-12-25 00:30:11
882
原创 three.js中使用CameraHelper来可视化调整阴影相机的范围
有时候我们很难，调整好这个对应的数值，不过现在可以通过。，过小阴影会导致不显示或者不完整，来可视化调整这个阴影相机了。
2024-05-26 22:21:04
585
原创 使用向量叉乘，来计算一个点到一条线的距离
所以我们直接将两个向量叉乘就可以，然后再计算他的模，再除以 2 ，再除以 底边的长度就可以了。这样就可以了，所以最重要的就是怎么算出这个三个点组成的三角形的面积了。我们可以把，这三个点连接起来，得到一个三角形，此时的步骤就是这样的。如果说一条线段的两个端点坐标分别是，
2024-05-26 21:41:10
736
1
原创 THREE.JS中的向量点乘，以及他的几何意义。
从这里可以看出，向量的点乘的结果是一个数字(标量)。，所以在计算的时候，我们要保持这两个向量保持在一个方向上，及。
2024-05-26 16:18:25
391
原创 THREE.JS中使用四元数表示两个向量旋转
这个时候就可以使用 四元数的setFromUnitVectors方法，就可以使用这个效果了。方法，就可以得到从一个向量向另一个向量的旋转的四元数了。在three.js中，我们可以使用四元数的。我们向让他改变成，朝着。就完成了，这个效果了。
2024-05-17 15:43:33
529
2
原创 three.js 效果细节提升
envMapIntensity属性的值是一个0到1之间的浮点数，用于设置环境贴图的强度。当值为1时，环境贴图的效果最强，模型反射的亮度最高。而当值为0时，环境贴图的效果被完全消除，模型的表面不再反射周围环境。
2024-05-08 00:33:03
789
1
原创 three.js 中 meshbasic.glsl 文件中的片源着色器的主函数解析
他会对alphaMap 纹理进行，采样然后获取他的一个 g 值，来表示一个 强度；如果这个强度值，小于 alphaTest，那么这个就会把删除掉。裁剪空间, 就是将不要的空间外的片源删除掉。在 alphatest 纹理进行处理。对片源进行对数缓冲区计算。
2024-05-05 01:49:42
572
原创 three.js 中ShaderChunk的 uv_pars_vertex.glsl
【代码】three.js 中ShaderChunk的 uv_pars_vertex.glsl。
2024-05-05 00:11:40
297
原创 three.js 中ShaderChunk的, common.glsl 介绍
但是three.js他也通过了一些 shader 代码片段，哎我们可以通过引入这些 shader代码片段，在自己的 THREE.ShaderMaterial中哈哈哈。在three.js中，我们可以编写底层的shader代码，是通过 THREE.ShaderMaterial 来进行的。从这可以看出来，是什么，他声明了 PI, PI2, PI_HALF, RECIPROCAL_PI,…现在我们讲一下，这个common.glsl 文件是干嘛的。这个变量的含义就是，圆周率，2Π，1/2 Π …
2024-05-04 23:50:31
435
原创 my-room-in-3d中的电脑，电视，桌面光带发光原理
我们会发现，这个高光纹理，他的颜色就三种颜色，分别是：r(红色), g(绿色), b(蓝色)最后我们发现，他这么做的原因，是因为他这样可以获取到，需要高光处的片源的的位置信息。最近在github中，看到了这样的一个项目；我看到的时候，蛮好奇他这个光带时怎么做的。好，我们来看看这个纹理和普通纹理有什么区别。知道了这些，这个高光效果就很简单了。最后发现，他是通过，加载一个。这个就是最核心的代码。
2024-05-04 22:22:38
1074
1
原创 手写一个简单的 OrbitControls 轨道控制器
相信使用过THREE.JS的同学，都知道 OrbitControls 这个的轨道控制器，他是绕着一个观察点，来进行什么什么的… 反正就是那么个意思。所以很明显的运动轨迹是一个球体，他是绕着球体进行运动的。所以也很明显，我们只有知道每一点，球体的坐标 (x, y, z) 就可以实现这个效果，然后再把这个坐标，赋值给 相机对象就可以实现了。
2024-04-13 00:18:17
432
原创 WebGPU Inter-stage 变量
这是在顶点着色器和片段着色器之间增加 Inter-stage 变量的一种简便方法。然后，我们不再只返回一个表示位置的vec4f，而是声明一个结构体的实例，填充并返回它。在片段着色器重，我们声明将其中一个结构体作为参数的函数。然后，我们声明顶点着色器将返回该类型的结构体。变量在顶点着色器和片段着色器之间发挥作用。我们创建一个有3种颜色的数组。这里我们声明了一个结构体。
2024-02-07 18:00:54
452
原创 Cesium 性能优化 - 学习笔记
获取或设置呈现分辨率的比例因子。小于 1.0 的值可以提高功能较弱的设备的性能，而大于 1.0 的值将以更高的分辨率呈现，然后按比例缩小，从而提高视觉保真度。例如，如果构件的布局大小为 640x480，则将此值设置为 0.5 将导致场景以 320x240 渲染，然后在将其设置为 2.0 时放大将导致场景以 1280x960 渲染，然后按比例缩小。图上渲染内容多的时候，我的cpu会疯狂的转，声音特别大，在测试提高帧率的时候，发现了参数requestRenderMode；
2023-11-30 17:32:12
2542
原创 Cesium 中对entities的查询，删除操作
这里要传入一个ID，这个ID就是我们在创建 entities 时的ID。在Cesium 中我们如何对entities进行查询，和删除操作。
2023-11-29 17:28:38
1117
原创 Cesium中对Cesium.Cesium3DTileset模型进行偏移
但是很多时候，我们添加的3D Tiles 模型他的位置，并不是我们想要的位置。由于单个瓦片的位置信息是写到了数据中的(.b3dm 和对应的 json 文件中), 如果能整体调整加载后的 Tileset，就是最好的选择。3DTiles 数据集以分块，分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的渲染压力。这里面说，一个三维场景中，要包含：视图矩阵，投影矩阵，模型矩阵。模型矩阵: 就包含了，这个模型的各种变换，平移，旋转，缩放。这三个矩阵也有统称为: MVP矩阵。
2023-11-29 14:38:24
1971
原创 postprocessing 的 SelectiveBloomEffect 泛光效果
初始化SelectiveBloomEffect。添加renderPass。
2023-08-07 17:22:16
383
2
原创 postprocessing 的 GodRaysEffect 的使用
GodRaysEffect 的后期效果需要一个物体，就是确定那个物体发光。初始化 GodRaysEffect。添加renderPass。
2023-08-07 15:41:58
156
原创 THREE.JS合并物体工具提升渲染性能
three.js 中 BufferGeometryUtils.mergeBufferGeometries可以实现，渲染大量的具有相同材质，但可以几何体不同的的网格。创建10000个TorusKnot几何体，然后将他添加到 geometries 数组中。将这10000个网格进行合并。例如渲染10000个网格。
2023-05-21 01:51:35
1038
2
原创 three.js使用InstancedMesh大场景渲染大量相同物体的实例化网格
在three.js中有时候我们需要渲染大量的相同几何体，材质的网格，但是如果用一般的方法来实现的花，通常性能不佳，卡顿。但是如果我们使用InstancedMesh来渲染的话，会大大的解决卡顿，性能更佳。例如我们创建1000个立方体，添加到场景中。这样的方法渲染器会调用很多次。
2023-05-21 00:53:29
1739
3
原创 three.js中使用shaderPass实现自定义合成效果
纹理采样，他是将原本渲染的画面进行纹理采样vec4 color = texture2D(tDiffuse, vUv);来还原当前默认的画面是怎么样的；但是有时候，有些效果没有现成的，这个时候可能需要我们去编写shader来实现这个效果，而在合成效果中编写shader是通过shaderPass来实现。在three.js中提供了许多的合成效果，例如ClearPass，CubeTexturePass，BloomPass…此时如果我们想再往上添加什么效果，都是在color上添加，例如。
2023-05-20 22:33:09
1026
原创 three.js 添加合成效果 EffectComposer
添加我们自己想要的效果, DotScreenPass。three.js中提供了很多的合成效果。这样的效果是使用合成效果实现，此时我们需要改变渲染方式。
2023-05-20 18:18:31
253
原创 cesium中如何添加自定义材质，编写shader
cesium中提供了接口，让我们开发者在cesium中编写底层的shader着色器代码，达到一些酷炫的效果fabric : {} ` } })最简单的模板就是这样，source是glsl的源代码，这里定义了一个函数czm_getMaterial，在后续的代码中会调用这个czm_getMaterial函数，这个函数返回了一个材质，我们只有将这个material，的一些属性进行修改即可。例如:diffusealpha至于这些属性表示什么意思，需要查看cesium对这块的文档说明。
2023-05-20 01:37:41
2940
1
原创 cesium中如何修改图层的着色器，使其达到我们想要的图层风格
这里面的字符串是glsl代码，我们使用字符串的replace函数来替换掉我们想替换的代码。在cesium中我们可以，通过修改图层的着色器源代码使其达到一些酷炫的效果，现在我们。好现在 baseFragmentShader里面就是图层的着色器代码。这样就做到了，修改glsl代码的效果。这样就可以达到一些自定义的图层效果。获取图层对应的片源着色器源代码。来说说如何做到这一切。
2023-05-20 01:16:09
1275
4
原创 如何在THREE.JS 中编写shader
我们只需要在vertexShader，fragmentShader提供响应的着色器代码即可，至于怎么编写这个着色器代码，完全由开发者自己决定。要在three.js中编写底层着色器，我们需要借助 THREE.ShaderMaterial来实现。
2023-05-18 12:01:28
377
原创 glsl着色器编写随机函数
在glsl中好像没有默认的随机函数，所以一般都需要我们自己去定义，去实现这个随机函数。所以我们最终的随机函数是这样的。
2023-05-17 22:14:16
763
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人