优锘是怎么实现three跟cesium的融合的
JavaScript
Map引用了TileEarth,它的customSetup是
TileEarth是作为Control被App.prototype._tick回调其onUpdate函数
uearth.CMap的TileEarth是其核心
抛弃了new Cesium.Viewer/new Cesium.Scene/ new Cesium.Globe那一套Cesium原生的构建地球的方法,自己利用Cesium的API重写了一套
TileEarth用了Cesium.FrameState 的在update循环中更新
利用new Cesium.Globe做的事情来新建地球:
this._surface = new Cesium.QuadtreePrimitive({ tileProvider: new Cesium.GlobeSurfaceTileProvider({
那么是哪里引用了dom呢,没有看到用了Cesium.Context对象,所以是用了Three.js的webgl
调用了cesium的update,但是主要操作frameState对象,没有调用到gl绘制
Globe.prototype.render = function(frameState) {
surface.render(frameState);
QuadtreePrimitive.prototype.render.beginFrame
QuadtreePrimitive.prototype.render = function(frameState) {
GlobeSurfaceTileProvider.prototype.beginUpdate
GlobeSurfaceTileProvider.prototype.endUpdate = function(frameState) {
addDrawCommandsForTile(this, tilesToRender[tileIndex], frameState);
command.shaderProgram = tileProvider._surfaceShaderSet.getShaderProgram(surfaceShaderSetOptions);
这些webgl的东西是没有在cesium的dom创建的,而是同一用three.js的
QuadtreePrimitive.prototype.render.endFrame
cesium中Renderer/Context获取了webgl对象.getContext
Scene获取了canvas这个dom
是CesiumWidget根据传入的容器domid创建的
那么在哪里被Three.js的webgl渲染呢?
什么代替了Cesium.Scene?
它没有像Cesium.Scene一样去执行command进而执行gl的draw函数,而是TileEarth.update()代替了Scene.render()
this.draw(tiles)拿tileProvider._tilesToRenderByTextureCount去用three.js的THREE.Mesh(geometry, tileMaterial)去渲染地球
何时渲染gl调用?
mesh添加到地球根节点LUtil.cacheShow(nodeId, tileMaterialId, this.rootNode)
地球根节点被添加到了CMAP.getCurrentMap().node
最后scene.add(xxx);进了THREE的场景
tile.data.terrainData._mesh构造geometry
tile.data.imagery构造tileMaterial
用了Cesium.GlobeFS/Cesium.GlobeSurfaceShaderSet/Cesium.GlobeSurfaceTileProvider/
Cesium.GroundAtmosphere/Cesium.GlobeVS/Cesium.ImageryLayerCollection/Cesium.JulianDate/
Cesium.PerspectiveOffCenterFrustum
Tile3dLayer
用了Cesium.Batched3DModel3DTileContent和Cesium.Cesium3DTileset和Cesium.Instanced3DModel3DTileContent
和Cesium.ModelInstanceCollection
和Cesium.Composite3DTileContent来重写加载3dtiles的逻辑
TileFeatureLayer用了Cesium.Cesium3DTileset
TerrainLayer用了Cesium.CesiumTerrainProvider和Cesium.EllipsoidTerrainProvider
SunLight用了Cesium.Clock和Cesium.Simon1994PlanetaryPositions和Cesium.JulianDate
EarthInstance/AtmospereInstance用了Cesium.EllipsoidGeometry
基于cesium1.52用到了THING t3djs
JavaScript
Core/CesiumTerrainProvider的parseMetadataFailure方法用到了THING.App.current.trigger
Scene/Model的destroy用到了t3djs.buffer.nodeBuffer和THING.App.current.picker.removePickingMaterial
uearth.min.<function>.define("Scene/Imagery") callback.i.releaseReference
uearth.min.<function>.define("Scene/ImageryLayer") callback.C._createTexture用到到t3djs.buffer.textureBuffer
uearth.min.<function>.define("Scene/TileReplacementQueue") callback.e.trimTiles
用到了CMAP.getCurrentMap()._earthInstance.tileEarth.quadTileMatrial和类似Scene/Model
uearth.min.<function>.define("DataSources/GeoJsonDataSource") callback.createPoint用到了CMAP.Util.convertLonlatToWorld
uearth.min.<function>.define("Scene/UrlTemplateImageryProvider") callback.o.reinitialize.then() callback
用了Cesium.BaiduMercatorTilingScheme和Cesium.GBTilingScheme
基于cesium1.52用到了THREE
JavaScript
uearth.min.<function>.define("Scene/ImageryLayer") callback.C._createTexture
- GitHub有没有相关的库
- 基本都是根据CesiumGS/cesium-threejs-experiment改造而来, 文章将 Cesium 与 Three.js 集成 – Cesium,演示CesiumJS+ThreeJS,新版本依赖演示syzdev/Cesium-Three: 🔧 最新的基于Cesium 1.95与Three 143的整合示例
- iTowns/**itowns**基于 Three.js 的框架,用于可视化 3D 地理空间数据
- 在
Cesium
中实现类似Three.js
的Mesh和Material的一套接口和渲染机制,支持部分Three.js
对象MikesWei/CesiumMeshVisualizer:Cesium+Three.js。
- 不考虑Cesium,Three.js能加载地图吗?
- Cesium和Three.js结合的5个方案 - 知乎 三维网格3D
- Three.js能加载3DTiles吗?
- NASA-AMMOS/3DTilesRendererJSthreejs 的基于瓦片的地理世界地图可视化库tentone.github.io/geo-three/docs/
基于3D组态测试BIM功能的可行性
- ifc(<40MB)
- 原生支持
- 边界:40M 10s 加载完成
- ifc转3DTiles(>=40MB)
- 研究第三方3DTiles扩展库
BIM输出 (已用FME转成了3DTiles)
- 1.72GB的BIM -> 3d -> 压缩3d
- 107M的rvt -》 ifc是213M ,revit导出ifc要30分钟打开后出现材质丢失问题
- 107M的rvt -》 fbx是49.4M ,revit导出fbx要30小时(中途无响应磁盘不动但突然生成了),打开没问题
- 2018转2021要1个小时占用20G内存
- revit自带整个导出不可行,G级别的会无响应卡死
- revit删除无关后再分块导出,在3d软件合并
- Revit2Gltf插件导出
- AddinManager插件
- AddInManager.dll
- Autodesk.AddInManager.addin
- Revit2Gltf.dll文件
- AddinManager插件
- glTF Exporter add-in for Autodesk Revit 为了Paid add-in to export glTF from Autodesk Revit 2019 or later
- 3DMax打开rvt文件,用插件Babylon.js - Export scene to babylon or gITF format w20220601.2导
- 开源的dynamo图形编程导出属性数据
- 导出插件利用导出接口可以减少模型的精细程度
全局效果模板的实现
可参考babylon定义的xxx.babylon场景文件
- 场景配置.json如下:
code
和templateId
:是地图的唯一标识符和模板ID。map
:包含了地形数据和地图的参考位置。baseMap
:定义了底图的样式,包括URL,最大级别,和图像源等。tileLayerStyle
:定义了瓦片图层的样式,包括灰度滤镜,颜色校正,亮度,对比度等。light
:定义了地图的光照设置,包括环境光,主光源,次光源等。postEffect
:定义了地图的后期处理效果,包括颜色校正,边缘模糊,色差,环境光遮蔽等。background
:定义了地图的背景图片。mapStyle
:定义了地图的风格,包括雾效果,大气效果等。overlay
:定义了地图的覆盖层,包括云层,渐变颜色覆盖等。postEffectId
,lightId
,scanId
,skyBoxId
:定义了地图使用的后期处理,光照,扫描,天空盒的ID。 分类1:
- 场景, 地形, 地图, 灯光, 后处理 分类2
- 光源(颜色/强度/旋转)
- 基础光源
- 环境光
- 半球光
- 其他光源
- 主光源1
- 第二平行光
- 第三平行光
- 基础光源
- 后期
- 全局泛光
- 颜色调整 2. 曝光 3. 亮度 4. 对比度 5. 饱和度 6. 伽马矫正
- 镜头颜色
- 镜头模糊
- 噪点
- 红蓝分离
- SSR
- 背景
- 背景类型
- 颜色
- 背景图
- 天空盒
- 背景样式
- 背景类型
- 环境
- 雾效设置
- 雾效浓度
- 设置颜色
- 设置浓度
- 晨昏效果
- 效果类型
- 大气
- 云层效果
- 雾效设置
- 扫光
- 圆扩散
- 旋转
- 粒子
- 地球粒子
- 粒子
- 分类
- 默认
- 物体
- 基础样式
- 填充
- 不透明度
- 去贴图
- 颜色滤镜
- 颜色叠加
- 叠加强度
- 反射
- 金属度
- 粗糙度
- 高光强度
- 菲涅尔强度
- 菲涅尔反向
- 发光设置
- 线框
- 设置
- 填充
- 动效设置
- 滚图颜色
- 滚动贴图
- 滚动速度
- 基础样式
- 小品
- 主楼
- 辅楼
- 地面
- 树
- 地板
- 天花板
- 层顶
- 墙
- 门窗
- 物体
- 自定义
- 环境反射
- 默认
- 粒子
- 启用粒子模型
- 模型
- 粒子高度
- 离地高度
- 密度
- 粒子
- 贴图
- 大小
- 颜色
- 透明度
- 动效
- 速度
- X
- Y
- Z
- 速度
- 模型
- 启用粒子模型
- 地面
- 地面反射
- 启用特效地面
- 扫光
- 扫光贴图
- 扫光颜色
- 扫光强度
- 扫光速度
- 底图
- 底图贴图
- 底图颜色
- 透明度
- U
- V
- 离地高度
- 扫光
- 外装
- 启用外装效果
- 元素类型
- 尺寸比例
- 填充
- 颜色
- 透明度
- 线框
- 颜色
- 透明度
- 启用外装效果
- 光源
- 基础光源
- 环境光
- 半球光
- 颜色
- 强度
- 其他光源
- 显示光源
- 平行光1
- 颜色
- 强度
- 旋转
- 水平
- 垂直
- 阴影
- 平行光2
- 平行光3
- 基础光源
- 后期
- 后期处理
- 全局泛光
- 颜色调整
- 镜头颜色
- 镜头模糊
- 噪点
- 红蓝分离
- SSR
- 强度
- 半径
- 阈值
- 发光设置
- 园区发光
- 强度
- 半径
- 阈值
- 模型发光
- 强度
- 半径
- 阈值
- 园区发光
- 后期处理
- 背景
- 背景类型
- 颜色
- 背景图
- 天空盒
- 背景样式
- 颜色
- 背景类型
- 雾效
- 设置颜色
- 雾近截面
- 雾远截面