Debug winding validator

Questions
1

Hi!
I’m generating a Buffer geometry mesh from scratch manually and I’m not sure to do i correctly.
Is there a way to validate winding order of triangles of a Buffer Geometry?

Maybe a good thing that can help me to understand to debug it is to make something like a FaceNormalHelper but for BufferGeometry, is it possible?

2

When you just render the triangles, the winding order becomes obvious. Triangles (or their front-faces) are usually defined in CCW order. If you can only see a face if you move the camera around, you’ve obviously arranged your data in the wrong way.

1 Like
3

Hi @Mugen87 thanks for the reply. I’m asking because I’ve seen some visual glitches moving the camera around, but I’d like to do a better debug programmatically…

4

You can make such helpers yourself. I did something similar there:

for Geometry, indexed and non-indexed BufferGeometry:
THREEf.js/THREEf_90/THREEf.js at b263d88d9b783b5dca4f5008e718997b6a3e75f0 · hofk/THREEf.js · GitHub
See line 3859

and there only indexed BufferGeometry
THREEf.js/THREEf_90/THREEh.js at b263d88d9b783b5dca4f5008e718997b6a3e75f0 · hofk/THREEf.js · GitHub

and there only non-indexed BufferGeometry
THREEg.js/THREEg.js at d27efac3403a66113ddf302f8a71104655aba043 · hofk/THREEg.js · GitHub
See line 4629
Used there Magic Box part from sandbox THREEg

and there only Geometry
https://hofk.de/main/discourse.threejs/2018/HelperExample/HelperExample.html
see

1 Like
5

I’m curious, what do you imagine such a validator being? An AI that inspects your geometry and goes “yup, that’s exactly what the author wanted it to look like, no errors here!” or perhaps a validator that checks that you geometry has exactly one triangle and it has index order 1,2,3? You have me intrigued!

2 Likes
6

I would say “analytically”. You have to know what order of vertices is correct and decide how to indicate when it’s incorrect.

Maybe it’s enough to have, say, a “helper material” that you apply to your model and it paints front of faces in green and back of faces in red. I think it would be noticeable. Well, depends on complexity of a model and amount of faces. Creativity is up to you :slight_smile:

2 Likes
7

@Usnul I imagine something exactly like @prisoner849 described: an helper material that paints clockwise faces in green and other in red!

8

The simplest option of such material:

var mat = new THREE.MeshBasicMaterial({side: THREE.DoubleSide});
mat.onBeforeCompile = shader => {
  shader.fragmentShader = shader.fragmentShader.replace(
    `#include <fog_fragment>`,
    `#include <fog_fragment>
gl_FragColor.rgb = gl_FrontFacing ? vec3(0,1,0) : vec3(1, 0, 0);
`
  );
}
1 Like