Dear all, I'd like to achieve this effect :

Which you can see the eyebrow is always render on top of hair. And the eyebrow will not render on top of the rest of the body. I don't know how to do it in Godot but I think it should be related to shader. Does anyone has any idea? Thank you so much!!

I'm guessing the face is rendered as a decal and projected onto both the head mesh and the hair mesh. Both of which are separate meshes from the rest of the player character. The head and hair mesh might be the same mesh object/node though.

@aztecsensei said: hello! you may find this article useful: https://medium.com/@gordonnl/links-expressions-eb7beae2c62c cheers. :)

Thank you very much for the article! It is very useful. However, I didn't found the technology or explanation on how the author achieve the Eyebrows over Hair effect. It should be note that the eyebrow and eye in the demo will over hair only but not the other part of body.

I am not familiar with Threejs and may be I am wrong but I have checked the code and see the shader part of the eyebrow and eye and found it use transparent: true, depthTest: false, I have tried to set the same flags (which is transparent and no depth test) in Godot's spatial shader for eyebrow but I get the eyebrow over all objects, which means the eyebrow not only over the hair, but the whole body and also over all objects in my scene, which is not what I want.

So still how can I achieve the eyebrow over hair effect just like Wind Waker?

Thanks!!!

@Megalomaniak said: I'm guessing the face is rendered as a decal and projected onto both the head mesh and the hair mesh. Both of which are separate meshes from the rest of the player character. The head and hair mesh might be the same mesh object/node though.

Sorry for asking silly question. How can I do that in Godot? Thank you!

I haven't really looked at using decals in godot yet so not sure either.

5 years later

Any recent info to achieve this effect? I've been searching myself and hoping there's an easy way since this was asked in 2018

aztecsensei the face technique is almost identical to the same solution i made up.
truly, i am a genius.

9 months later

I "figured" it out yall. Took lots of trial and error. What you need to do is have the face (the parts that will be rendered over) be its own material with a shader. I would just use default material then convert it to a shader when done.

In the fragment function paste this at the bottom:

vec4 ndc = PROJECTION_MATRIX * vec4(VERTEX, 1.03);
float linearDepth = ndc.z / ndc.w;
float depthBias = 0.0001 * linearDepth;

DEPTH = linearDepth + depthBias;

the 1.03 is the amount you want it to offset.
You might need to mess with the 0.0001 's to get it to work. I found that keeping both values the same number works the best. It's not perfect. If you're using Toon Link as an example, his hair goes out so much that if you get super close it'll stop working, but it's the best I've found so far since I've been searching for this solution for months.

It still has its issues so if anyone is able to improve this please let me know. For example, this only works if the camera is far enough away

    kuligs2 eh 6 years and still no real solution. My thing works but its very limited. Still hoping someone comes along and has an actual solution because it seems like it shouldn't be too difficult.

    Nvm y'all the real solution is here. I found it on some random Reddit page. None of the credit goes to me but this pretty much works perfectly!

    First have a variable to control the depth.

    uniform float depth_offset = 0.0;

    then in the fragment function like before use this:

    vec3 gPos = (INV_VIEW_MATRIX * vec4(VERTEX,1)).xyz;
    vec3 dir2cam = normalize(CAMERA_POSITION_WORLD - gPos);
    gPos += dir2cam * depth_offset;
    vec4 ndc_offset = PROJECTION_MATRIX * VIEW_MATRIX * vec4(gPos,1);
    DEPTH = ndc_offset.z/ndc_offset.w;

    Works like a charm! I used a value of 0.15 for the offset but of course play around with it a bit

    Here's the thread for those wondering: [