Collisions detection (Depth calculation)

[jscastro76]

This issue was initially created to enable collisions detection between 3D objects and make it configurable through an optional param, but the conversation derived in depth calculation to avoid collisions between 3D Objects and Fill-extrusions, which is definitely needed.

[libertyfree]

3Dmodle is Collisions mapbox symbol fill-extrusion ,

[jscastro76]

3Dmodle is Collisions mapbox symbol fill-extrusion ,

Hi @libertyfree I cannot see the attachments you added

[libertyfree]

The collision between the wheelchair model and the mapbox's bottom map results in the model's incomplete display

Rotating the map wheelchair needs to be covered by the corresponding wall layer ( mapbox symbol fill-extrusion)

[jscastro76]

Can you select one of the objects? Just to understand it's bounding limits and where it is positioned for the first picture.
For the second, I think you're creating the custom layer after the fill-extrusion. If you want them to behave as walls, you need to create first the things "inside" a building, and then the things that limit the buildins,, like the walls.

In my case it works well to create the layers in this order per floor of the building:

• Raster or image based (like blueprints for the floors)
• Fill extrusions, with opacity 0.5 or higher
• Custom layers

So I used to create an array structure to generate the layers like this floors[f][l] where f is the index for the floors and l is the index for the different layer types, so it's easily looped to generate the floors (i.e. floor[0][0] is the raster blueprint of the floor 0, floor[1][1] is the fill-extrusion if the floor 1, and floor[5][2] is the custom layer for the fifth floor).

I have many buildings limited by fill-extrusion walls and elements inside, and it works very well, even with semi-transparent walls.

[codingBingo0309]

when I render the map, it works. But, when I rotating the map, the models is coverd the wall layers, how can I fixed?

[jscastro76]

when I render the map, it works. But, when I rotating the map, the models is coverd the wall layers, how can I fixed?

Hi @codingBingo0309, with no more detail or code, it's hard to know what your code is doing wrong. The picture I posted is from one of my projects on a real building, so if you create the layers following the instructions I provided for the layer types order per floor, it should work.

This gives me the idea to add a multi floor example showing exactly how it should be to work well.

[codingBingo0309]

Sorry, I missing my code.
But I saw you comment, it seem like this.
In my code:

• Add Raster Layer
• Add Fill-extrusion Layer With Floor
• Add Custom Layer With Floor

It's my code:

const map = this.surface;

function createCustomLayer(customLayer, models) {
  return {
      id: customLayer,
      type: 'custom',
      renderingMode: '3d',
      onRemove: (map, gl) => {
      },
      onAdd: function (map, mbxContext) {
        for (let model of models) {
          addModel(customLayer, model)
        }
      },
  
      render: function (gl, matrix) {
        //window.tb.update();
        // let memory = tb.memory();
        // let programs = tb.programs();
        // console.log(JSON.stringify(memory) +"  lenght of the programs " +programs)
      }
    }
}

function addModal(customLayer, model) {
  let options = {
      // obj: model.properties.modelUrl || '',
      //obj: 'https://ipsmap2.oss-cn-hangzhou.aliyuncs.com/model/3d/lunyi.gltf',
      obj: '../../static/models/zizhuji.gltf',
      // obj: './models/Eiffel.glb',
      // type: model.properties.model_format,
      type: 'gltf',
      // scale: model.properties.model_scale || 1,
      scale: 0.016,
      units: 'meters',
      rotation: { x: 90, y: 180, z: 0 }, //default rotation
      adjustment: { x: 0, y: 0, z: 0 },
      anchor: 'center'
    };
    window.tb.loadObj(options, function (m) {
      m.setCoords(model.geometry.coordinates); // it's my coordinates
  
      m.setRotation({ x: 0, y: 0, z: 0 });
      
      window.tb.add(m, customLayer);
    });
}


window.tb = new win.Threebox(
        this.surface,
        this.surface.getCanvas().getContext('webgl'),
        {
          defaultLights: true,
          enableTooltips: true,
          multiLayer: true, // this will create a default custom layer that will manage a single tb.update
        }
      )


map.addLayer({
 id: '3D_fill',
 type: 'fill-extrusion',
 filter: ['==', '$type', 'Polygon'],
 paint: {
   'fill-extrusion-color': "red",
   'fill-extrusion-opacity': 1.0,
   'fill-extrusion-height': 2.6,
   'fill-extrusion-base': 2.5
 },
 layout: {
   visibility: 'none'
 }
})
map.addLayer(createCustomLayer(customLayer, models));

[jscastro76]

Working heavily on this until improved.

[jscastro76]

@libertyfree @codingBingo0309 please check out the new version 2.1.4 as it includes an important change in the CameraSync depth calculation. I also updated the 07-alignmenttest.html example as per #144, including 2 very big dinosaurs within the walls of Chicago museum to test deeply and very close the depth of the fill extrusions and the 3D Objects.

Please, check now if your wheelchairs and the rest of the furniture has any issue with the fill-extrusions of your building, and let me know if there's any issue.

[jscastro76]

@libertyfree @codingBingo0309 does this change solved your issue with the depth calculations in your building?

[libertyfree]

solved most problem ,more better ,but some time exist this problem

[jscastro76]

If so check the latest version, I did another update (#145) on depth calculations that I think it solves 100% of the issues an any zoom level. At least it solved for me all the different issues I had in very different objects