How to browse the tilt model of large-scale OSGB format directly on the Internet (2): converting OSGB

Welcome to pay attention to Gong Hao 3D Grid and get the latest articles as soon as possible.

The last article (How to browse the large OSGB format tilt model directly on the Web (I): parsing OSGB) has posted the analysis results, which makes us have a clear understanding of the internal structure of the OSGB tilt model file. In this paper, we transform the analysis results into three.js objects and realize the display of a single model.

Why did you turn it into a three.js object?

From the analysis results, it is easier to express the node relationship of Osg objects with three.js object, and the transformation results can be displayed directly with three.js. Through the fusion scheme of cesium and three.js in our team, the results can be easily used in cesium development projects, and can be used independently with GIS capabilities.

The Osg type to convert.

The type attribute of the Osg object obtained by parsing indicates the type of the object. We only want to convert the Osg object of the oblique photography model file, and we don't use a general conversion tool, so we classify the types first, and only convert the types of the currently used test data (test data above 100 g).

PS: The version used by our team internally, after more than one year of application and improvement, supports more types of conversion, fills many loopholes, and supports files in four formats, such as osgb, osgt, osg and osgjs, which ensures the loading speed and robustness. Welcome to consult ~

Node class

Osg:: node

osg::Geode

osg::Group

osg::LOD

osg::PagedLOD

Osg:: matrix transformation

Geometric class

geometric figure

osg::OsgArray

Material category

osg::StateSet

Osg:: materials

osg::StateAttribute

Osg:: texture

osg::Texture2D

Osg:: image

The node class mainly considers osg::MatrixTransform, because the main information of this node is the transformation parameters, which will affect the position, rotation and scaling of the model.

Next, we will focus on transforming geometry and materials. There are not many parameters of LOD and PagedLOD, which are all related to scheduling. We will introduce them together in the next article.

Transform geometric objects

Geometric data is stored in Osg::Geometry, including index attribute PrimitiveSetList, position coordinate attribute VertexArray and texture coordinate attribute TexCoordArray. Let's convert it into three. Buffer measurement method

varbufferGeometry=newTHREE。 buffer geometry()；

Vertex attribute transformation

The vertex attribute value is a two-dimensional array, and we can directly call the flat method to convert it into a one-dimensional array.

Varpositions = newfloat 32 array (OSG geometry. vertex array . flat())；

varuvs = new float 32 array(OSG geometry。 texcoordarray . flat())；

buffer geometry . set attribute(' position '，newTHREE。 BufferAttribute (location, 3));

buffer geometry . set attribute(' uv '，newTHREE。 BufferAttribute(uvs，2))；

Exponential conversion

There are two types of indexes, which are specified by values. Only when the index type is 4 is handled here (that is, the minimum drawing unit is quadrilateral), and the rest default minimum drawing unit is triangle.

varprimitiveSet=osgGeometry。 PrimitiveSetList[0]

varindices = primitiveSet.data

if(primitiveSet.value==4) {

let new indexes =[]；

for(leti = 0； I < index. length; i+=4) {

leti 0 = indexes[I]，

I 1 = index [i+ 1],

I2 = index [i+2],

I3 = index [i+3];

newIndices.push(

i0，i 1，i3，

i 1，i2，i3

);

}

indices = newIndices

}

BufferGeometry.setIndex (index);

Transforming material object

The most important material of oblique photography model is texture. As a principle introduction, we only take texture and do not deal with other material parameters. Of course, some situations still need to be dealt with in engineering application to ensure its availability, reliability and robustness.

Material objects are stored in the StateSet attribute of Osg::Geometry, and the attribute type is Osg::StateSet, while the texture we want is stored in the TextureAttributeList attribute of Osg::StateSet, which is usually a picture.

The tilted model already contains light and shadow information, so we changed the material to THREE.MeshBasicMaterial.

varmaterial=newTHREE。 MeshBasicMaterial({

Side: three. two-sided

});

Processing diagram

Maps are usually in jpg or png format, and we only deal with these two formats here. It should be noted that the type of image data is Uint8Array, so we need to convert it into Blob first, then create URL through url.createObjectURL, and finally load it with THREE.TextureLoader.

varosgStateSet=osgGeometry。 StateSet

varosgImage=osgStateSet。 texture attributelist[0]. value . state attribute . image

varfileName=osgImage。 Name;

constitsjpge = filename . search(/\。 jpe？ g($|\？ )/I)& gt； 0

constitspng = filename . search(/\。 png($|\？ )/I)& gt； 0

If (! isPNG & amp& amp！ IsJPEG) returns;

varmimeType=isPNG？ ' image/png ':' image/JPEG '；

varimageUri=newBlob([osgImage。 Data]，{ type:mime type })；

imageUri = URL . createobjecturl(imageUri)

vartexture=newTHREE。 TextureLoader()。 load(imageUri，()= & gt{

texture.needsUpdate=true

})

Create a grid

Finally, a model mesh is created using the transformed geometry and materials. It should be noted here that the oblique photography model is z-up, while the rendering of three.js is y-up, so you need to rotate the grid around the X axis by Y-90 to get a normal rendering effect.

varmesh=newTHREE。 Grid (geometry, material);

Mesh. rotation. x =- mathematics. π/2

Conversion result

Display effect

Well, it doesn't look good ~ after all, this is the most unclear layer of a single tile, which looks too simple.

In the next article, we will mainly introduce how to implement PagedLOD to load large-scale tilt photography model, so stay tuned.

Welcome to pay attention to Gong Hao 3D Grid and get the latest articles as soon as possible.