Use the Json file to set the display effect of the model PBR material

Background needs

The model display effect is optimized.

Method Introduction

There are currently two ways to set the PBR effect of the model:

①By specifying the layer, set a unified PBR effect for the model object of the corresponding layer;
②Through the way of thematic maps, set a unified PBR effect for objects with the same attributes;

1. Set the PBR effect of the model through the layer

This method is suitable for the case where the objects in the layer have the same material.

1.1 Divide the layers according to the material type of the object

In this data, there are mainly two types:

①The shell of the factory building, the ground and other objects, these objects use ordinary materials and do not need to set additional PBR effects;
②Mechanical equipment inside the factory building, including machine tools, railings, etc., are all made of metal, and metal effects need to be uniformly set;

The division of layers can be exported separately when exporting in 3ds Max, or can be split according to attributes in SuperMap iDesktop after exporting.

1.2 Make a plug-in Json file

Currently, the Json file can be obtained through the game engine plug-in to export, or directly modify the Json file to adjust the effect of the data.
In 3ds Max, check the material parameters of the data, the roughness of all metal objects is 0, and the metalness is 0.8, so in the Json file, set "roughnessFactor": 0.01, "metallicFactor": 0.8, and the rest of the parameters remain unchanged. When the roughness value is equal to 0, there will be no PBR effect, so it needs to be set greater than 0, here it is set to 0.01.

Figure 1

Figure 2

Figure 3

1.3 PBR material of the front-end setting layer

First find the layer that needs to set the PBR material, and then plug in the prepared Json file.

                    var layer = scene.layers.find("ReComputeNormalResult");
                    //Add pbr
                    layer.setPBRMaterialFromJSON("./data/pbr/GD.json");

The final result is as follows:

Figure 4

Figure 5

2. Set the PBR effect of the model through the attribute thematic map

This method is suitable for the case where the objects in the layer can be divided into materials according to their attributes.

For example, in the data in the image below, there is only one layer, the red insulator is ceramic, the orange suspension string is brass, and the rest of the objects are aluminum.

Figure 6

2.1 According to the material type of the object, divide the quality of the layer

By observing the properties of the model dataset, it is found that the material type can be distinguished through the "layer" property.

General BIM data will have corresponding attributes to distinguish it.

Figure 7

2.2 Make a Json file for plug-in

Currently, the Json file can be obtained through the game engine plug-in to export, or directly modify the Json file to adjust the effect of the data.

The material of Ceramic: "roughnessFactor": 0.2,"metallicFactor": 0.0; the material of Aluminum: "roughnessFactor": 0.5, "metallicFactor": 1.0.

Figure 8

Figure 9

2.3 Front-end setting of PBR material for property thematic map

According to the value in the "layer" attribute, Json files of different materials are plugged in one by one.

The main interface used is layer.themeStyle = colorByID();

Reference code:

            var scene = viewer.scene;
              var urls = [
             './data/pbr/tielu/Ceramic.json',
             './data/pbr/tielu/Bronze.json',
             './data/pbr/tielu/Aluminum.json',
             ];
              scene.parsePBRFromJson(urls);
              var canvas = scene.canvas;
              $('#loadingbar').remove();
            try {
                //Add S3M layer service
              var promise = scene.open('http://localhost:8090/iserver/services/3D-text/rest/realspace');
              SuperMap3D.when(promise, function (layers) {
            var layer = scene.layers.find('guidao_qiu');
               var conditions = [];
                 conditions.push(['${layer} === "insulator"', 0]);
                 conditions.push(['${layer} === "hanging string"', 1]);
                 //Use the previous settings first, and use the Json file corresponding to 2 for the remaining data
                 conditions.push(['${id} >= 0', 2]);
                 layer.themeStyle = colorByID();
               function colorByID() {
                var cesiumStyle = new SuperMap3D. Cesium3DTileStyle({
                    pbrMaterialIndex: {
                        conditions: conditions
                    }
                });
                  return cesiumStyle;
            }

The final result is as follows:

Figure 10

Figure 11