Gltf viewer - draw edges

Questions
1

I am trying to implement a viewer for several types of formats, and I also would like to draw the edges of the meshes. It is working for OBJ, VTK, STL, but I am stuck with GLTF. It seems I am missing a transformation.

spitfire
spitfire512×505 38.2 KB

The application can be executed here: STL Viewer

and the source of the problematic code is here - // gltf file

I have two models in the menu that can be used for testing: LitthestTokyo.glb and supekrmarine_spitfire.gltf and the problem is the same, when the option “Mesh” is checked.

Any clue?

Thank you.

2

Would the source code of this be helpful:

https://boytchev.github.io/MeshEdgesGeometry/

demo-model

(or maybe the whole class could be used)

2 Likes
3

Yep, it worked like a charm. Really impressive.

Zero changes other than style

Thanks a lot.

1 Like
4

There seems to be a problem in just one model I have tried:

Dodge
Dodge1284×1249 123 KB

Please, note that the wheels are completely disconnected from the chassis of the car. These dangling lines do not appear in Don McCurdy’s viewer.

Anyway, it is just a small problem, and I did not check the consistency of the model…

1 Like
5

That model has lots of lines which some viewers might not show.

Maybe try the attached modified version - with no lines, DRACO compressed and with KTX2 textures.

You can always load it into:

  • gltf.report and re-export it to uncompressed GLB (without DRACO) but with KTX2 textures
  • three.js editor and re-export it to uncompressed GLB (without DRACO) and with PNG textures

dodge_challenger_rt (no lines, DRACO, KTX2).zip (514.2 KB)

1 Like
6

Yep, this new model did the trick:

Dodge2
Dodge21281×1274 102 KB

I created a new model importing and saving in the GLTF viewer

Lieutenant
Lieutenant787×759 234 KB

[LieutenantHead.glb]STL/VTK/OBJ/GLTF Viewer

but besides the edges being disconnected from all of the 3 plugs, it crashed miserably on mobiles. I designed the interface to run on mobiles, and a beautiful animation from a heart borrowed from body3d.eu also crashes on IOS:

Heart
Heart779×776 330 KB

Anyway, thanks for your help. It gave me some valuable directions.

7

Just for the records. Mobile devices do not support textures greater than 4k (4096 bytes). Reducing the sizes solves all problems (I used gltf-transform). However, this particular app needs to completely erase all buffers on the GPU to move on to the next model. I know this question has been asked many times before, but there is not a definitive answer. I understand that threejs cannot do that “automagically”, but again, if I need to, what should be done?

   // Dispose material and its texture
    function delMaterial(mat) {
      if (mat) {
        if (mat.map) {
          mat.map.dispose();
        }
        if (mat.normalMap) {
          mat.normalMap.dispose();
        }
        if (mat.envMap) {
          mat.envMap.dispose();
        }
        mat.dispose();
      }
    }

if (object) {
      scene.remove(object);
      object.traverse(function (child) {
        if (child.isMesh) {
          child.geometry.dispose();
          if (Array.isArray(child.material)) {
            child.material.forEach((material) => {
              delMaterial(material);
            });
          } else {
            delMaterial(child.material);
          }
        }
      });
      object = undefined;
    }

I am pretty sure this is not enough, but at least it is working for me…

8

See if this topic and post might help you.

9

Thanks a lot. I missed this one. It would have saved me quite some time…