Home Technical Talk

WebGL PBR Hair Rendering Solutions?

high dynamic range
Offline / Send Message
Brian "Panda" Choi high dynamic range

Does anyone know of an existing plugin/generator that will take a custom flow map, and use that flow map to generate and guide procedural markings/strokes so that they follow a direction in general?

And would that above description need more explanation?

For example, let's say I want to procedurally create noise-brush strokes that follow a custom made hair asset mesh "shell." And I can custom paint the flow map in Substance Painter. So when I use that generator in a mask or a bitmap, I can input in that custom painted flow map, and it will generally create lines/patterns/strokes based off the direction of the flow map.

Replies

  • poopipe
    Offline / Send Message
    poopipe grand marshal polycounter

    short answer - cant be done in painter or designer outside of very specific hacks


    longer answer - you are asking for a direction map , this requires information about how far you've gone as well as the changes in direction. this is ok if you can track a brush stroke or a spline, its not if you cant

    eg. if you bake a root map and derivative map from a groom in arnold you have all the information you need

    sadly painter can't tell you how far along a brush stroke you are so you can' generate on in there

    anyway, assuming you can generate one..


    painter cannot paint strokes based on anything in the layer stack so you're left trying to map a texture using the direction map. this is perfectly fine in principle (eg use the x/y value to offset V and use the distance travelled as U) but it wont necessarily give you the results you're hoping for (i.e itll be a mess)

    you might have some luck with a particle system brush in painter but i found creating my own to be an absolute bastard and gave up.

    it's a job for some sort of sim really - houdini/maya/whatever

    i think i'd probably end up writing my own tool if it needed automating tbh

  • Brian "Panda" Choi
    Offline / Send Message
    Brian "Panda" Choi high dynamic range

    @poopipe that was my concern was that this was far too low-level of a coding/scripting solution that it was outside the bounds of Substance.

    If I can crack this, it would help enable some pipeline things I've been thinking about and automate a lot more work between different types of assets that all shared the same roughness, etc.

  • poopipe
    Offline / Send Message
    poopipe grand marshal polycounter

    i'd have doubts about the impossibility under current circumstances if it were just me that had smashed their head against the problem but it's not.

    I've brought the full force of our maths phd laden render engineers down on the problem a few times now and the answer has always been that you can't do shit unless you have the information available.

    to generate strokes etc, you really need to grow or simulate their behaviour over time/a number of iterations. this is outside the capabilities of a pixel processor and while it's technically something that an fxmap "can" do you quickly run into serious limitations in terms of how to store data.

    That's really the main issue with substance - as long as you remain stateless or nearly stateless it's brilliant but as soon as you need to track back and remember stuff you have to start performing some pretty sneaky (or dirty) hacks .

    sadly its a bit of a dead end until some fairly substantial changes happen to painter .


    I've started to use Processing for more involved stuff recently rather than arguing with python - i'd recommend giving that a poke if you're intending to push this idea further. you'll have to write code but its a pretty clean java style language with good documentation and a lot of decent youtube content (coding train)

    its totally possible to launch a separate app and return data (eg an image) from a designer/painter plugin so you can integrate external tools fairly smoothly

  • Brian "Panda" Choi
    Offline / Send Message
    Brian "Panda" Choi high dynamic range

    @@poopipe

    As the addendum,


    I'm trying to figure out possible art direction and pipelines to best render PBR hair in a WebGL rendereer.


    The best examples of the sort of hair I'd like to emulate include:

    Animal Crossing New Horizons

    Problem being they're not using WebGL, but I still want to somehow emulate anisotropic shading WITHOUT having the option in the shader.


    What else could I look at or investigate that has something akin to the above?

  • poopipe
    Offline / Send Message
    poopipe grand marshal polycounter

    You can't really get that effect - which is anisotropic specular highlights - without doing anisotropic specular highlights.

    They're not hard to implement and a quick Google will find you the adjustments you need to make to the specular model and as far as I'm aware it's totally possible under webgl.

    Assuming you can do that, all you need is a root map or to infer a direction from UVs and you can squish your highlight in the appropriate direction.

  • Neox
    Offline / Send Message
    Neox godlike master sticky

    while it might not be the most accurate, you could do it like it was done in the old days before anisotropic shading was more common in games. just paint the spec and roughmaps accordingly.

  • Brian "Panda" Choi
    Offline / Send Message
    Brian "Panda" Choi high dynamic range

    Unfortunately, one of my stipulations is that I can't directly change/affect the WebGL code we're using to render. I have to work within the lack of anisotropic barring any changes on the other side.

  • Neox
    Offline / Send Message
    Neox godlike master sticky

    i only have a super from 2014 old example at hand. but here we also didnt have anisotropic shading here

    sadly i dont have the project files anymore so i can't check for other haircuts which certainly are closer to what you showed above. but it is definitely possible to fake this to some extend.

  • poopipe
    Offline / Send Message
    poopipe grand marshal polycounter

    A streaky, roughness with color in the specular (semi metallic or whatever) will get you there.

    If you generate a gradient from root to tip of the hair and combine that with a flowmap you can get the UVs you need


    In a pixel processor sample the gradient texture to get the get V coordinate

    Sample the flowmap red / green channels, range them to -1:1 and add that to the U coordinate.

    You'll need to multiply those results by numbers for scaling purposes but if you use them as UVs to sample a tiling hair texture it should look alright

  • Neox
    Offline / Send Message
    Neox godlike master sticky

    if i understand it right, all he has access to is a default pbr shader? diffuse, roughness, metalness, maybe spec?


    it is doable with diffuse and roughness, but spec would help selling it more


    metalness would be the cherry on top to tint the reflection a bit with the diffuse value for coloured hair. for the example above it isnt needed. i could whip up a quick example of how it could be done with just those standard inputs

  • Brian "Panda" Choi
    Offline / Send Message
    Brian "Panda" Choi high dynamic range

    This is all helpful! Threads for me to pursue in terms of googling.

    I'll get some brainstorming done.

  • Neox
    Offline / Send Message
    Neox godlike master sticky

    just did a simple setup in unreal 5

    what you want is stretch this highlight in a very specific region to sell the idea of it being hair.

    while you can not do it, with the roughness and spec maps you can force it to be in certain areas and not be in others.

    so what you'd need is a pretty wide highlight that covers an area which you can mask away.

    PBR has a significant downside when doing such things for stylized looks, a bigger highlight will also become a less bright highlight. but for your reference this shouldnt be an issue.

    so lets start with a ball and imagine its a haircut as image 5 or 7 on your reference

    pretty basic setup. a dark grey diffuse color, some roughness and spec value

    you want a highlight kinda light this in terms of flow and directionality.

    lets do this with the roughness first

    i am using this mask to drive a minimum and maximum roughness value inside unreal, but this can of course just be a texture with those values

    roughness on 1 for everything outside the line, roughness on 0.6 on everything on the line

    you can do the same with just the spec

    roughness of 0.6 on everything, 0.2 spec outside the line. 1 spec inside the line

    roughness and spec values combined

    now all you need to do is paint the line as you like. we used to just smudge it back in the days

    but for the same output as your reference you'd also have to implement some breakups and some secondary highlights



    tweak the values until you have something that works for you

Sign In or Register to comment.