如何在Web上直接浏览大规模OSGB格式倾斜模型(二):转换OSGB

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在Web上直接浏览大规模OSGB格式倾斜模型(二):转换OSGB相关的知识,希望对你有一定的参考价值。

参考技术A 欢迎关注公号【 三维网格3D 】,第一时间获取最新文章

上一篇( 如何在Web上直接浏览大规模OSGB格式倾斜模型(一):解析OSGB )已经贴出了解析结果,让我们对OSGB倾斜模型文件内部结构有了比较清晰的认识,本篇我们将解析结果转成three.js对象,并实现单个模型的显示。

为什么转成three.js对象

从解析结果看,Osg对象的节点关系用three.js对象表达更容易,转换结果可以直接用three.js显示,通过我们团队的Cesium和three.js融合方案,可以轻松将成果用于Cesium开发的项目,既可以单独使用,又可以拥有GIS能力。

需要转换的Osg类型

解析得到的Osg对象,Type属性指示对象的类型,我们只是要转换倾斜摄影模型文件的Osg对象,而不是做一个通用的转换工具,所以先将类型做一下分类,只转换目前所用测试数据(100多G的测试数据)已知的类型。

PS:我们团队内部使用的版本,经过一年多的应用和改进,支持了更多类型的转换,填了许多坑,而且支持osgb、osgt、osg、osgjs四种格式文件,加载速度和健壮性都得到保障。欢迎咨询~

节点类

osg::Node

osg::Geode

osg::Group

osg::LOD

osg::PagedLOD

osg::MatrixTransform

几何类

osg::Geometry

osg::OsgArray

材质类

osg::StateSet

osg::Material

osg::StateAttribute

osg::Texture

osg::Texture2D

osg::Image

节点类主要考虑osg::MatrixTransform,因为这个节点主要的信息就是变换参数,会影响模型的位置、旋转、缩放等。

接下来我们着重介绍转换几何和材质这两类,LOD和PagedLOD参数不多,而且都是调度相关的,我们放在下一篇一起介绍。

转换几何对象

几何数据存储在Osg::Geometry,包含索引属性PrimitiveSetList、位置坐标属性VertexArray、纹理坐标属性TexCoordArray。我们将其转换为THREE.BufferGeometry。

varbufferGeometry=newTHREE.BufferGeometry();

顶点属性转换

顶点属性值是一个二维数组,我们直接调用flat方法,转为一维数组即可。

varpositions=newFloat32Array(osgGeometry.VertexArray.flat());

varuvs=newFloat32Array(osgGeometry.TexCoordArray.flat());

bufferGeometry.setAttribute('position',newTHREE.BufferAttribute(positions,3));

bufferGeometry.setAttribute('uv',newTHREE.BufferAttribute(uvs,2));

索引转换

索引类型有两种,有value指定,这里我们只对索引类型为4的情况(即绘图最小单元为四边形)进行特殊处理,其余的默认最小绘制单元为三角形。

varprimitiveSet=osgGeometry.PrimitiveSetList[0]

varindices=primitiveSet.data;

if(primitiveSet.value==4)

letnewIndices=[];

for(leti=0; i<indices.length; i+=4)

leti0=indices[i],

i1=indices[i+1],

i2=indices[i+2],

i3=indices[i+3];

newIndices.push(

i0, i1, i3,

i1, i2, i3

);



indices=newIndices;



bufferGeometry.setIndex(indices);

转换材质对象

倾斜摄影模型的材质最重要的就是贴图,作为原理介绍,我们不处理其他材质参数,直取贴图即可,当然工程应用上我们还是需要处理一些情况,保证其可用、可靠、健壮。

材质对象存储在Osg::Geometry的StateSet属性,该属性类型为Osg::StateSet,而我们要的贴图存储在Osg::StateSet的TextureAttributeList属性,一般就一张图。

倾斜模型已经包含了光影信息,为此我们将材质转为THREE.MeshBasicMaterial。

varmaterial=newTHREE.MeshBasicMaterial(

side:THREE.DoubleSide

);

处理贴图

贴图一般是jpg或者png格式,我们这里只处理这两种格式。需要注意的是图片数据为Uint8Array类型,我们需要先转为Blob,然后通过URL.createObjectURL创建url,最后使用THREE.TextureLoader加载。

varosgStateSet=osgGeometry.StateSet;

varosgImage=osgStateSet.TextureAttributeList[0].value.StateAttribute.Image

varfileName=osgImage.Name;

constisJPEG=fileName.search(/\.jpe?g($|\?)/i)>0

constisPNG=fileName.search(/\.png($|\?)/i)>0

if(!isPNG&&!isJPEG)return;

varmimeType=isPNG?'image/png':'image/jpeg';

varimageUri=newBlob([osgImage.Data], type:mimeType );

imageUri=URL.createObjectURL(imageUri)

vartexture=newTHREE.TextureLoader().load(imageUri, ()=>

texture.needsUpdate=true

)

创建网格

最后,使用转换好的几何体和材质创建模型网格。这里要注意,倾斜摄影模型是z轴朝上(z-up),而three.js渲染是y轴朝上(y-up),所以还需将网格绕x轴旋转y-90°才得到正常的渲染效果。

varmesh=newTHREE.Mesh(geometry, material);

mesh.rotation.x=-Math.PI/2

转换结果

显示效果

额,看起来并没有那么好看~毕竟这是单个瓦片最不清晰的那层,简化到不能看了。

下一篇,我们将主要介绍如果实现PagedLOD,来加载大规模倾斜摄影模型,敬请期待

欢迎关注公号【 三维网格3D 】,第一时间获取最新文章

以上是关于如何在Web上直接浏览大规模OSGB格式倾斜模型(二):转换OSGB的主要内容,如果未能解决你的问题,请参考以下文章

三维模型格式

Cesiumjs可以加载倾斜摄影的OSGB数据吗

『转载』倾斜摄影osgb模型根节点合并(基于supermap),然后转换为3dtiles

supermap中预览osgb格式的倾斜摄影文件

ArcGIS Pro风暴ArcGIS pro 2.5加载OSGB点云模型案例教程

ArcGIS Pro风暴ArcGIS pro 2.5加载OSGB点云模型案例教程