Adding a model using THREE InstancedMesh in mapboxgl, losing vertices after modifying and scaling

Questions
, , ,
1

Description

After adding the mesh of the gltf model to THREE.InstancedMesh, I modified the scaling, and the rendered effect seems to have lost some vertices

Reproduction steps

  1. Adding custom layers using mapboxgl
  2. Load the model using three gltfloader in the mapboxgl custom layer
  3. Adding gltf mesh using THREE.InstancedMesh

Code

loader.load(
        "https://threejs.org/examples/models/gltf/Flower/Flower.glb",
        function (gltf) {
          const p = projectToWorld(origin);

          const model = gltf.scene;

          const _stemMesh = model.getObjectByName("Stem");
          const _blossomMesh = model.getObjectByName("Blossom");

          const stemGeometry = _stemMesh.geometry.clone();
          const blossomGeometry = _blossomMesh.geometry.clone();

          const stemMaterial = _stemMesh.material;
          const blossomMaterial = _blossomMesh.material;

          const stemMesh = new THREE.InstancedMesh(
            stemGeometry,
            stemMaterial,
            1
          );
          const blossomMesh = new THREE.InstancedMesh(
            blossomGeometry,
            blossomMaterial,
            1
          );

          stemMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
          blossomMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);

          const defaultTransform = new THREE.Matrix4()
            .makeRotationX(Math.PI)
            .multiply(new THREE.Matrix4().makeScale(1, 1, 1));

          stemGeometry.applyMatrix4(defaultTransform);
          blossomGeometry.applyMatrix4(defaultTransform);

          stemMesh.instanceMatrix.needsUpdate = true;
          blossomMesh.instanceMatrix.needsUpdate = true;

          const dummy = new THREE.Object3D();

          let pos = projectToWorld([118.61113, 32.06318, 0]);

          for (let i = 0; i < 1; i++) {
            dummy.position.copy(pos);
            dummy.scale.set(10, 10, 10);
            // dummy.scale.set(100, 100, 100);
            dummy.updateMatrix();
            stemMesh.setMatrixAt(i, dummy.matrix);
            blossomMesh.setMatrixAt(i, dummy.matrix);
          }

          const group = new THREE.Group();

          group.add(stemMesh);
          group.add(blossomMesh);

          world.add(group);

          map.triggerRepaint(); }
      );

Live example

Screenshots

normal
2
abnormal
1

Version

all

2

Are you sure its just not rendering double sided faces in the material?
Did you compare the points attributes lengths?

3

I’m not sure, I just found that when the model is enlarged, it looks normal, but when it is reduced, the rendering is incomplete

4

Your stem normals are facing in one direction, you need to make them double sided or edit the stem geometry to that it has volume and normals face outside.
child.material.side = THREE.DoubleSide; i think

5

also how small is the the world scale? Reeeallly tiny could give you issues, like 0.00002 3d editors dont tend to like those.
You can scale up the geomerty and then applyMatrix to the vertices and then scale again

6

This problem seems to be the same as mine, but I didn’t understand how he solved it

7

It seems that it hasn’t been resolved yet

8

It seems that it hasn’t been resolved yet

9

I would not go around with messing shaders for now, try fixing things that are easier and more apparent at first.

  1. Inrease your base mesh level of detail, subdivide it by code. Or better yet subdivide it in a 3D program and re export it.
  2. Maybe adjust the cameras near frustrum.
  3. Try not to make too many instances.
  4. Try not to scale your mesh.
  5. Make the normals double sided.
10

Oh my god, this problem has been bothering me for two weeks. What should I do