# Gltf viewer - draw edges

**URL:** <https://discourse.threejs.org/t/gltf-viewer-draw-edges/69133>\
**Category:** Questions\
**Created:** [August 9, 2024, 1:24pm UTC](https://discourse.threejs.org/t/gltf-viewer-draw-edges/69133 "2024-08-09T13:24:54Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![promac](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@promac](https://discourse.threejs.org/u/promac)\
**Post date:** [August 9, 2024, 1:24pm UTC](https://discourse.threejs.org/t/gltf-viewer-draw-edges/69133/1 "2024-08-09T13:24:54Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/8/886f3cf493cada2df4ca859f69fdfbd6d00afa94.png)

The application can be executed here: [STL Viewer](https://krotalias.github.io/cwdc/13-webgl/examples/three/content/stl.html)

and the source of the problematic code is [here - // gltf file](https://krotalias.github.io/cwdc/13-webgl/examples/three/content/doc-stl/stl.js.html#line336)

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.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [August 9, 2024, 1:47pm UTC](https://discourse.threejs.org/t/gltf-viewer-draw-edges/69133/2 "2024-08-09T13:47:40Z")

</div>

Would the source code of this be helpful:

[https://boytchev.github.io/MeshEdgesGeometry/](https://boytchev.github.io/MeshEdgesGeometry/)

[![demo-model](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/b/6beaf5268b167773ee4e269510abed1b5630f76e.jpeg)](https://boytchev.github.io/MeshEdgesGeometry/)

(or maybe the whole class could be used)

---

<div class="post-metadata">

**Author:** ![promac](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@promac](https://discourse.threejs.org/u/promac)\
**Post date:** [August 10, 2024, 12:18pm UTC](https://discourse.threejs.org/t/gltf-viewer-draw-edges/69133/3 "2024-08-10T12:18:54Z")

</div>

Yep, it worked like a charm. Really impressive.

Zero changes other than [style](https://krotalias.github.io/cwdc/13-webgl/examples/three/content/doc-stl/module-MeshEdgesGeometry-MeshEdgesGeometry.html)

Thanks a lot.

---

<div class="post-metadata">

**Author:** ![promac](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@promac](https://discourse.threejs.org/u/promac)\
**Post date:** [August 23, 2024, 10:33am UTC](https://discourse.threejs.org/t/gltf-viewer-draw-edges/69133/4 "2024-08-23T10:33:12Z")

</div>

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

 ![Dodge](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/d/edcac0ced3508298dd688774f260928d52bba24a.jpeg)

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…

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [August 24, 2024, 6:03am UTC](https://discourse.threejs.org/t/gltf-viewer-draw-edges/69133/5 "2024-08-24T06:03:17Z")

</div>

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](https://gltf.report) and re-export it to uncompressed GLB (without DRACO) but with KTX2 textures
- [three.js editor](https://threejs.org/editor/) and re-export it to uncompressed GLB (without DRACO) and with PNG textures

[dodge\_challenger\_rt (no lines, DRACO, KTX2).zip](https://discourse.threejs.org/uploads/short-url/z71Q8sNLGWtvdwyqBQ0Mx6sOcLm.zip) (514.2 KB)

---

<div class="post-metadata">

**Author:** ![promac](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@promac](https://discourse.threejs.org/u/promac)\
**Post date:** [August 25, 2024, 9:04am UTC](https://discourse.threejs.org/t/gltf-viewer-draw-edges/69133/6 "2024-08-25T09:04:06Z")

</div>

Yep, this new model did the trick:

 ![Dodge2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/4/a4974694ff66506287e351469e9cdc16502318bd.jpeg)

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

 ![Lieutenant](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/1/61e5b5afed47ad284df2888ac3f56a4f84ea9772.png)

[LieutenantHead.glb][STL/VTK/OBJ/GLTF Viewer](https://krotalias.github.io/cwdc/13-webgl/examples/three/content/stl.html?file=LieutenantHead.glb)

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/9/29e7607517221049180da758d6723c6c523d7784.png)

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

---

<div class="post-metadata">

**Author:** ![promac](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@promac](https://discourse.threejs.org/u/promac)\
**Post date:** [August 30, 2024, 10:55am UTC](https://discourse.threejs.org/t/gltf-viewer-draw-edges/69133/7 "2024-08-30T10:55:53Z")

</div>

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?

```javascript
   // 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…

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [August 30, 2024, 6:30pm UTC](https://discourse.threejs.org/t/gltf-viewer-draw-edges/69133/8 "2024-08-30T18:30:36Z")

</div>

See if this [topic and post](https://discourse.threejs.org/t/when-to-dispose-how-to-completely-clean-up-a-three-js-scene/1549/24) might help you.

---

<div class="post-metadata">

**Author:** ![promac](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@promac](https://discourse.threejs.org/u/promac)\
**Post date:** [August 30, 2024, 9:59pm UTC](https://discourse.threejs.org/t/gltf-viewer-draw-edges/69133/9 "2024-08-30T21:59:50Z")

</div>

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