Reliable way to render wireframe over meshes?

[MiikaH]

Any suggestions what could be a reliable way to render a wireframe over generic gltf meshes?

I have looked into the renderWireframeOver() code that Babylon.js Inspector uses for the “Render wireframe over mesh” option. That clones the mesh to generate a second wireon variant of it. However, this approach fails with rigged meshes, the zero transform parent trick doesn’t reflect all transformations, animations might not be synchronized, and looks like it would get complicated when instanced meshes are involved. Not to mention having to keep track of changes in order to update the wireframe clones if meshes are altered.

Another way I can think of is to bind to one of the scene or render loop observers? So for example bind to onAfterRenderObservable or maybe onAfterDrawPhaseObservable. Or even registering to scene step(?) as outlineRenderer seems to do?: Babylon.js/outlineRenderer.ts at 44c29b9180daf9c49634becbb30ac7d626bddb0b · BabylonJS/Babylon.js · GitHub

In latter case I could iterate over the meshes, change the material, possibly also change the index buffer for wireframe specific one and render the same Mesh again. Then restore the original material.

However, that also seems hacky and there are so many possible observers to try this on. So I wanted to ask first if someone has insight what would be the best approach here.

[carolhmj]

Hello!

@MiikaH

However, this approach fails with rigged meshes

Do you have an example where it fails? I tried on some playgrounds, like: Available Mesh BoomBox | Babylon.js Playground (babylonjs.com), Available Mesh BrainStem | Babylon.js Playground (babylonjs.com), Simple Dude.babylon import and animation playing | Babylon.js Playground (babylonjs.com) which have rigged meshes and they all seemed to work fine

[MiikaH]

Interesting. In my testing either the wireframe didn’t show up at all or it wasn’t animated.

I need to investigate. Could be that it the slightly older Babylon.js version I was using. Or maybe something special about my test model or rest of the scene.

If rigged meshes start working then cloning approach starts looking feasible again.

[mawa]

Did you try to change the zOffset on your wireframe material

Flickering on moving

I did see the flickering, this was being caused by the edge lines z-fighting with the material. By tweaking the material’s zOffset property, I could eliminate the flicker: Flickering on moving | Babylon.js Playground (babylonjs.com)

May be it will do the trick?

[MiikaH]

Rigged meshes seem to be working another codebase that is using latest babylon.js version. Looks promising. At it looks like it should be possible to get it working on the another project as well.

Only remaining issue are instanced meshes. But I think getting them working should be matter of cloning the source mesh and generating new set of instances of that. So will be trying that next. Overall cloned mesh approach seems less hacky than trying to render same meshes twice per render call, so hopefully I can get it working.