# Eliminating diagonals on wireframe

**URL:** <https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137>\
**Category:** Questions\
**Tags:** materials, animation, geometry\
**Created:** [March 15, 2018, 3:13pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137 "2018-03-15T15:13:01Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![ps111](https://avatars.discourse-cdn.com/v4/letter/p/df705f/32.png) [@ps111](https://discourse.threejs.org/u/ps111)\
**Post date:** [March 15, 2018, 3:13pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/1 "2018-03-15T15:13:01Z")

</div>

I’m got an MorphBlendMesh that I’m animating via AnimationMixer that I would like to add a quad-style wireframe to. Setting “wireframe: true” on the materialobviously doesn’t work, since the triangle approach gives the appearance of the squares that I want, but with “diagonals”. In other words, I want this:  
 ![cart_wf](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/fb507db18e5c0306610b77bf027bb396c233484a.png)

as opposed to this:

![33%20AM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/2e0e0ffd53be18ba97dd7f69436453dd8d44c644.png)

I’ve tried using LineSegments with EdgesGeometry and LineBasicMaterial, but this setup doesn’t seem to be capable of animating with AnimationMixer. I’ve also tried writing a custom shader and using ShaderMaterial/RawShaderMaterial, but I don’t know much at all about raw webgl code (and time is a factor) and I run into similar problems of not really knowing how to deal with the animation so this approach is not prefered.

I keep coming back to the wireframe attribute on the material. Is there a change that I can make to the Three.js code to have webgl NOT render the ‘diagonals’ in the wireframe? Or failing that, is there a way I can get LineSegments to animate, or maybe replicate that look on a mesh that WILL animate?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 15, 2018, 3:17pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/2 "2018-03-15T15:17:07Z")

</div>

Have a look at those threads:  
[https://discourse.threejs.org/t/grids-of-waves-shaders/1168](https://discourse.threejs.org/t/grids-of-waves-shaders/1168)  
[https://discourse.threejs.org/t/gridboxgeometry/1420](https://discourse.threejs.org/t/gridboxgeometry/1420)  
[https://discourse.threejs.org/t/grid-collection/1893](https://discourse.threejs.org/t/grid-collection/1893)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [March 15, 2018, 4:23pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/3 "2018-03-15T16:23:50Z")

</div>

This grid was created with my addon THREEf. The parameters are visible. Almost all default, only style cover and quad line selected. And material cover 0.

![20180315-1703-40352](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/f/f3eddea906578f944042d2daf178030c9a2c3ebe.png)

The code can be found at  
[https://github.com/hofk/THREEf.js/blob/dev/THREEf\_90/THREEf.js](https://github.com/hofk/THREEf.js/blob/dev/THREEf_90/THREEf.js)

lines  
313  
and for Geometry and indexed / non indexed BufferGeometry  
2370  
2582  
2983

Try it out at [http://sandboxthreef.threejs.hofk.de/](http://sandboxthreef.threejs.hofk.de/)  
Maybe something can be used?

---

<div class="post-metadata">

**Author:** ![ps111](https://avatars.discourse-cdn.com/v4/letter/p/df705f/32.png) [@ps111](https://discourse.threejs.org/u/ps111)\
**Post date:** [March 15, 2018, 7:58pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/4 "2018-03-15T19:58:53Z")

</div>

Forgot to mention earlier – I’m using r83.

Thank you for your replies, but unfortunately I don’t think these will help me. The animation MUST be compatible with AnimationMixer. I’ve come to the opinion that the answer lies within the getWireframeAttribute function of THREE.js. I’m convinced there’s a way to arrange to indices so that the diagonals will simply not be rendered. If so, I can just set wireframe = true. Any ideas on how to set the indices so that this might work?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 15, 2018, 9:34pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/5 "2018-03-15T21:34:02Z")

</div>

Just out of curiousity. Is it working, when you use wireframe?

---

<div class="post-metadata">

**Author:** ![ps111](https://avatars.discourse-cdn.com/v4/letter/p/df705f/32.png) [@ps111](https://discourse.threejs.org/u/ps111)\
**Post date:** [March 16, 2018, 2:34pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/6 "2018-03-16T14:34:40Z")

</div>

If you mean the wireframe property of the material, it will animate as normal, but the wireframe appears as in the second picture in the original post.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 16, 2018, 2:37pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/7 "2018-03-16T14:37:08Z")

</div>

It’s interesting. Can you provide a live example? (jsfiddle, codepen)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 16, 2018, 3:06pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/8 "2018-03-16T15:06:22Z")

</div>

> [@ps111](#):
>
> I’m convinced there’s a way to arrange to indices so that the diagonals will simply not be rendered.

Actually, that’s what `.toGrid()` does. It changes `index` of an indexed buffer geometry.

---

<div class="post-metadata">

**Author:** ![ps111](https://avatars.discourse-cdn.com/v4/letter/p/df705f/32.png) [@ps111](https://discourse.threejs.org/u/ps111)\
**Post date:** [March 16, 2018, 7:27pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/9 "2018-03-16T19:27:02Z")

</div>

I think the solution lies in a function something like the toGrid function, but I’m struggling to figure out how to apply it to my own issue. Your examples all use PlaneBufferGeometry,BoxBufferGeometry, etc. A generic BufferGeometry doesn’t have the widthSegments and heightSegments attributes, which seem to be the basis of the function.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 16, 2018, 7:39pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/10 "2018-03-16T19:39:29Z")

</div>

If you provide a live example, I can think on that question 🙂

---

<div class="post-metadata">

**Author:** ![ps111](https://avatars.discourse-cdn.com/v4/letter/p/df705f/32.png) [@ps111](https://discourse.threejs.org/u/ps111)\
**Post date:** [March 16, 2018, 7:58pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/11 "2018-03-16T19:58:44Z")

</div>

Sorry if this is a stupid question, but a live example of what, exactly? The code in question is within three.js (r83), specifically the getWireframeAttribute function. So, really any mesh whose material has wireframe = true should work as an example.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 16, 2018, 8:06pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/12 "2018-03-16T20:06:18Z")

</div>

> [@ps111](#):
>
> I’m got an MorphBlendMesh that I’m animating via AnimationMixer that I would like to add a quad-style wireframe to.

A live example of the technique you use. If it’s not a classified top-secret project 🙂  
Even if I know what you have, I can’t reproduce your specific case.  
Just an off-topic question: what’s the reason of using r83?

---

<div class="post-metadata">

**Author:** ![ps111](https://avatars.discourse-cdn.com/v4/letter/p/df705f/32.png) [@ps111](https://discourse.threejs.org/u/ps111)\
**Post date:** [March 16, 2018, 8:23pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/13 "2018-03-16T20:23:45Z")

</div>

There isn’t really one specific case though. All instances will use MeshLambertMaterial and Geometry to create a MorphBlendMesh, but the parameters of the geometry (along with colors, etc) will be supplied by the user (uploaded with JSONLoader) so it could be completely different every time. For the what it’s worth, AnimationMixer is no longer really relevant to this question.

As far as the technique, like I said it’s just Geometry + MeshLambertMaterial = MorphBlendMesh – everything after that is irrelevant. The AnimationMixer animates just fine with wireframe = true, it’s just that the wireframe appears as in the second picture, whereas I want it to appear as the first.

I’m working with an existing code base that uses r83.

---

<div class="post-metadata">

**Author:** ![ps111](https://avatars.discourse-cdn.com/v4/letter/p/df705f/32.png) [@ps111](https://discourse.threejs.org/u/ps111)\
**Post date:** [March 16, 2018, 8:35pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/14 "2018-03-16T20:35:53Z")

</div>

Or to put it another way, it’s more of a generic issue that’s independent of the technique used – it needs to be able to work on ANY Geometry, not just for one specific shape, or type of geometry.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 16, 2018, 8:45pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/15 "2018-03-16T20:45:32Z")

</div>

> [@ps111](#):
>
> ANY Geometry

Sounds interesting.  
Let’s take the simplest example, a plane of 1 x 1 (1 width segment x 1 height segment). It has 4 points and 2 triangles. When you know that it’s just a geometry (you don’t know its specific type - plane, circle, shape etc.), how will you know which sides of triangles you don’t have to show?

---

<div class="post-metadata">

**Author:** ![ps111](https://avatars.discourse-cdn.com/v4/letter/p/df705f/32.png) [@ps111](https://discourse.threejs.org/u/ps111)\
**Post date:** [March 16, 2018, 8:50pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/16 "2018-03-16T20:50:10Z")

</div>

I suppose thats the heart of the question. Can we consider both triangles at once, and not show the sides that overlap?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 16, 2018, 9:01pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/17 "2018-03-16T21:01:45Z")

</div>

Yeah, not impossible solution.  
And here comes the Devil with slight complexity of the geometry:  
 ![Devil_comes](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/7398ead79c61caf832ce5e50b36a7e32108e4060.png)

---

<div class="post-metadata">

**Author:** ![ps111](https://avatars.discourse-cdn.com/v4/letter/p/df705f/32.png) [@ps111](https://discourse.threejs.org/u/ps111)\
**Post date:** [March 16, 2018, 9:14pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/18 "2018-03-16T21:14:10Z")

</div>

This part I’m not sure. In this example, we could ignore the lines that overlap AND are the hypotenuse of their triangle, and the third triangle is fine on its own since it doesn’t have a partner, but that won’t apply to the general case, will it?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 16, 2018, 9:32pm UTC](https://discourse.threejs.org/t/eliminating-diagonals-on-wireframe/2137/19 "2018-03-16T21:32:28Z")

</div>

But we don’t know, where we have to start from.  
You offer solutions because you see that those faces are right triangles.  
Actually, what we know is that we have a geometry with sets of vertices and faces. That’s all. We even can’t rely on the order of faces:  
 ![Devil_comes_2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/81d4ba21276dac0c02d0821120a6441d15bb4f69.png)  
And we can’t be sure, that the faces are right triangles:  
 ![Devil_comes_3](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/896f190f29d6ffff465e5f6f74c5472bdd61f523.png)  
Of course, if I can’t imagine the logics of algorithm for analysis of geometries, then it doesn’t mean that it’s impossible. But it’s hell of math 🙂