Heya,
I recently learned about “hat chops” and I’ve been wondering what the best approach was in BBjs.
Hat chops are essentially a mesh “cut” at a certain place so that a hairline doesn’t render over a hat:
(Credit for image:
How to make hat chops for TS4 hair | Sims 4 Studio)
As far as I know, I could use CSG to generate something close to a hat chop and in real-time. If I have the mesh of hair and then the mesh of a hat. I could edit the hat in blender and add another mesh that is a cube but would represent the volume taken by the hat (see image). Of course you would have to edit the bottom of the hat to make it fit the base of hat.
This playground below is an example of hat chop using CSG:
I’m yet to make a playground using the method I mentioned above using actual glbs.
The problem with cutting meshes with CSG is that it can be pretty slow. And it can become much slower if the two meshes are pretty complex (meshes with large amount of polygons).
So my question is: Has anyone tried this? is there a better approach?
1 Like
Camera Zoom | Babylon.js Playground (babylonjs.com)
If the edges are closer, try using zOffset to tweak, but it doesn’t seem to be perfect.
Today I learned a new phrase!
@Evgeni_Popov did a pretty cool trick to clip a mesh that I think could work here? Clip parts of mesh inside a box - Questions - Babylon.js (babylonjs.com)
Both ideas are pretty good, thank you!
zOffset is a nice hack, you’d have to get a hat that’s massive (or volumetric) to hide all the hair though.
@carolhmj It is indeed a pretty cool trick. Thanks for sharing!
I’m guessing the only limitation of the clipPlugin is that you have to use planes and position them close to manually.
What I mean is that for example, not all hats will have a “base” (or an “opening”) as flat as the cowboy hat I shared above. It’s a strategy that works for flat-ish hats where the “opening” can be simplified, but not for complex hats;
Having looked around, it’s true that I could do multiple small clipPlanes that probably overlap to cover all the different regions we don’t want hair clipping through (inspired by https://www.babylonjs-playground.com/#XQ61ID#9 ) I’m scared it is the only solution. I could be wrong here but isn’t there also a limit to the amount of clippingPlanes you can have on a single mesh?
The guy in the link does it as pre-processing in Blender, and it’s probably the best thing to do.
Using CSG is probably not a good idea, it will tessellate your geometry a lot (more than 4x in your example) and I’m not sure it generates the right result in all cases…
You could try generating a hat chop mesh that plasters the hair to the head, as in the following example:
Once you have this mesh, you need to render it just before the hair, with depth write off / stencil write on. When you draw the hair, you must not draw where the stencil is set. This way, the hair won’t be rendered over the hat chop mesh.
2 Likes
Thank you, that essentially answers the question. Appreciate everyone’s time in this convo.
If I have flat-ish hats I think I could use clipPlanes without appearing too lazy 
else I might have to create a different hat<>hair combination on blender manually as mentioned above.
Cheers team
