Added clear coat normal maps #17079

arobertson0 · 2019-07-23T21:59:32Z

In an effort to align more with the Enterprise PBR model (#16977) I've implemented clearcoat normals. This also addresses issue #12867

When a physical material receives a clear coat normal map, it enables independent clear coat normals and calculates them using the same formulas as the normals, but with a different map.

I've had to change the signature of many GLSL functions that implicitly assumed the clear coat normal was identical to the geometry normal.

To get smooth normals, one can set the clearcoat normalmap to anything as then setting the scale to (0, 0).

I haven't yet added object space clearcoat normals because I wanted to reduce the PR size as much as possible. Same goes for node physical materials.

Added the option to use a clearcoat normal independent from the (maybe) perturbed geometry normal.

Created a separate variable for cc normal, independent perturb implementations

Scale is fine as long as cc scale <= normal scale

WestLangley · 2019-07-23T22:54:07Z

Thanks for this! It's great.

I haven't yet added object space clearcoat normals

I'm not sure we need to worry about adding support for that, but Ben will know.

Same goes for node physical materials

@sunag will need to be aware of this change, unless you wish to take care of it in a later PR.

If someone can contribute a clearcoat normal map that simulates scratches, that would be great. (So would a golf ball normal map for the sphere.)

WestLangley · 2019-07-23T23:10:53Z

It would be helpful if you could clean up your formatting. Try https://zz85.github.io/mrdoobapproves/. It may have a bit of trouble parsing your code, but you can work it out.

sunag · 2019-07-24T05:30:47Z

Great job. I can add this feature in node material later once that this PR is merged.

arobertson0 · 2019-07-24T12:38:27Z

@sunag will need to be aware of this change, unless you wish to take care of it in a later PR.

Great job. I can add this feature in node material later once that this PR is merged.

I've already got work underway for node materials, I wanted to make the PRs as small as I could.

Try https://zz85.github.io/mrdoobapproves/

Can we add this to the contribution guidelines? That's an awesome tool!

EliasHasle · 2019-07-26T14:01:19Z

(So would a golf ball normal map for the sphere.)

(@WestLangley I presume it would be better for that case to work with a detailed Icosahedron (Polyhedron), making a high-resolution map for a single face. :-) Update: Or something like this, avoiding a map altogether: https://eliashasle.github.io/golf_ball.html (phew!))

arobertson0 · 2019-07-29T13:26:15Z

@WestLangley, I'm pretty new at Github, so I was wondering what the next step was after linting.

WestLangley · 2019-07-29T13:38:52Z

I expect @mrdoob will want to wait until a few days after the next release -- assuming there will be a release this month.

Personally, I would prefer a better example, but that can be for a subsequent PR.

/ping @bhouston I think you were supportive of this, right?

arobertson0 · 2019-07-30T13:34:43Z

Personally, I would prefer a better example, but that can be for a subsequent PR.

I think the golf ball idea is great. It would definitely look better than the face/tentacle maps.
I'm not a 3D modelling guy, do you know where I could grab a model / map for this? I would love to add it to my upcoming Node Material PR.

mrdoob · 2019-07-31T04:00:10Z

Unreal's clear coat example is pretty good:

bhouston · 2019-07-31T11:57:11Z

/ping @bhouston I think you were supportive of this, right?

Yeah, this looks good. I am very interested in the node material implementation.

Unreal's clear coat example is pretty good:

I believe to achieve the UE4 effect they have anisotropy on the underlying threads + a normal map.

WestLangley · 2019-08-05T01:29:42Z

@mrdoob Let's merge this if you approve, as it impacts other concurrent issues.

mrdoob · 2019-08-06T01:35:56Z

Thanks!

mrdoob · 2019-08-07T21:29:57Z

@arobertson0 @bhouston I've refactored the clear coat code a bit. e3dc226 4df6d7c

Now, if material.clearCoatNormalMap is not defined, the clearcoat surface will be smooth.

mrdoob · 2019-08-07T22:26:14Z

@arobertson0 @bhouston I've also updated the example:
https://raw.githack.com/mrdoob/three.js/dev/examples/webgl_materials_clearcoat_normalmap.html

top left: -
top right: normalMap
bottom left: clearCoatNormalMap
bottom right: clearCoatNormalMap + normalMap

The light code seems correct to me, but the reflection doesn't... Seems like the reflection is being "disturbed" by the normalmap in the clearcoat layer too?

(Trying to replicate the UE4 effect)

mrdoob · 2019-08-08T01:24:16Z

Nevermind, I figured it out! 93668f7

https://raw.githack.com/mrdoob/three.js/dev/examples/webgl_materials_clearcoat_normalmap.html

🙌

bhouston · 2019-08-08T14:10:01Z

A few suggestions:

We should have some text that explains what you are looking at, describe each sphere what they are showing in as short as possible form.
Looking at the two bottom spheres, it seems buggy because of the sparkles. Is this a bug or the normal map used it just too extreme or the scale wrong?

/ping @arobertson0

arobertson0 · 2019-08-08T15:29:10Z

Looking at the two bottom spheres, it seems buggy because of the sparkles. Is this a bug or the normal map used it just too extreme or the scale wrong?

I quickly checked, this also happens without clearcoat, on a reflective sphere:

clearCoat: 0.0,
roughness:0.0,
normalMap: clearCoatNormaMap,

IMO, the effect is "correct". We're seeing specular reflections on microfacets that are aligned with the normal. It looks weird because, due to the high normal scale, the adjacent fragments have a wildly varying normals. So, the highlight doesn't ramp off smoothly.

mrdoob · 2019-08-08T15:32:46Z

A few suggestions:

I'll work on improving the example and the bottom spheres later today. I was focusing on the top-right one.

EliasHasle · 2019-08-08T16:04:24Z

IMO, the effect is "correct". We're seeing specular reflections on microfacets that are aligned with the normal. It looks weird because, due to the high normal scale, the adjacent fragments have a wildly varying normals. So, the highlight doesn't ramp off smoothly.

One will see this exact effect in cold snow with a certain crystal type/size at night, when dimly lit by street lights. The snow looks like a night sky of "stars". When you stand still, the "stars" are static. When you walk, the "stars" disappear and appear "randomly". It is beautiful! (I do not have anything to say on whether the effect is correct in this particular case, though.)

mrdoob · 2019-08-08T16:49:54Z

arobertson0 · 2019-08-08T17:20:10Z

Thanks for the great demo @mrdoob. Should I also add the node material demo to webgl_materials_clearcoat_normalmap, or do I put it in webgl_materials_nodes?

/ping @sunag

mrdoob · 2019-08-08T17:21:04Z

Better add it to webgl_materials_nodes yes.

WestLangley · 2019-08-08T17:47:22Z

Temporary live link:

For easy comparison, my version with no scene lights, no rotating of spheres.

Textures may not be open-source.

WestLangley dev
https://raw.githack.com/WestLangley/three.js/dev/examples/webgl_materials_clearcoat_normalmap.html

three.js dev
https://raw.githack.com/mrdoob/three.js/dev/examples/webgl_materials_clearcoat_normalmap.html

mrdoob · 2019-08-08T18:14:50Z

Bottom-right is nice!

bhouston · 2019-08-08T18:47:00Z

I like all of these variations. :) I just wanted to get rid of the weird sparkles. It does appear it works correctly.

…

On Thu, Aug 8, 2019 at 2:16 PM Mr.doob ***@***.***> wrote: Bottom-right is nice! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#17079?email_source=notifications&email_token=AAEPV7OEUBYQZROIKSMPV4TQDRPIXA5CNFSM4IGKAV5KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD34O47A#issuecomment-519630460>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAEPV7P3XVQ2F4HIT6M5R6LQDRPIXANCNFSM4IGKAV5A> .

-- *Ben Houston*CTO *M: *+1-613-762-4113 bhouston@threekit.com Ottawa, ON [image: LogoThreeKit215x491559143581.png] <https://www.threekit.com/> ThreeKit Visualization Platform: 3D, 2D, AV, VR <https://www.threekit.com/>

mrdoob · 2019-08-08T22:11:09Z

Should we rename all the properties before it's too late?

clearCoat > clearcoat
clearCoatRoughness > clearcoatRoughness
clearCoatNormalScale > clearcoatNormalScale
clearCoatNormalMap > clearcoatNormalMap

WestLangley · 2019-08-08T23:10:44Z

Yes. I think so.

mrdoob · 2019-08-21T00:17:35Z

@WestLangley Done! b75dd04

@arobertson0 @sunag @bhouston FYI

WestLangley · 2019-08-21T00:53:20Z

Don't forget the legacy getter/setters to prevent breakage.

mrdoob · 2019-08-21T02:04:37Z

@WestLangley I was thinking that these properties were so new that getters/setter wouldn't be needed? Was clearcoat used/useful without clearcoatNormalMap?

WestLangley · 2019-08-21T09:05:51Z

Was clearcoat used without clearcoatNormalMap?

My personal examples are broken, so I used it...

I added a migration note, but we usually do more than that for user convenience.

arobertson0 added 16 commits July 23, 2019 16:31

Bump

7187162

Merge branch 'dev' of github.com:mrdoob/three.js into dev

1d9f070

Logical separation of clearcoat normal from geometry normal

ae37503

Added the option to use a clearcoat normal independent from the (maybe) perturbed geometry normal.

Working on CC normal impl

1778a77

Created a separate variable for cc normal, independent perturb implementations

Created cc normal uniform

1da6ad4

(Mostly) Working independent scale

244d91a

Scale is fine as long as cc scale <= normal scale

Implemented normalmaps

cf95c7e

Fixed irradiance bug

03e61e3

Pertubation code refactoring

695c084

Uber shader defines fixes

ce035ac

Refactoring of cc normal code

b39e2c9

Beautyfied example and added to list

acf1b5a

Fixed inline shader for parallax envmap example

87cb760

Reverted built files to originals

58f5ef7

Linting

8b9a444

Merged node-clearcoat-normals into dev

bee7f0e

arobertson0 added 2 commits July 25, 2019 13:22

linted glsls using mrdood guidelines

e620cf3

minor formatting

c773fef

mrdoob added this to the r108 milestone Jul 31, 2019

mrdoob merged commit 1bb818e into mrdoob:dev Aug 6, 2019

donmccurdy mentioned this pull request Aug 7, 2019

MeshPhysicalMaterial: clearcoat should not use underlying normal map #12867

Closed

13 tasks

sunag mentioned this pull request Aug 8, 2019

Remove non-ENERGY_PRESERVATION code #17176

Merged

bhouston mentioned this pull request Aug 20, 2019

What would you like to see in next gen materials? KhronosGroup/glTF#1442

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added clear coat normal maps #17079

Added clear coat normal maps #17079

arobertson0 commented Jul 23, 2019

WestLangley commented Jul 23, 2019

WestLangley commented Jul 23, 2019

sunag commented Jul 24, 2019

arobertson0 commented Jul 24, 2019 •

edited

Loading

EliasHasle commented Jul 26, 2019 •

edited

Loading

arobertson0 commented Jul 29, 2019

WestLangley commented Jul 29, 2019

arobertson0 commented Jul 30, 2019

mrdoob commented Jul 31, 2019

bhouston commented Jul 31, 2019

WestLangley commented Aug 5, 2019

mrdoob commented Aug 6, 2019

mrdoob commented Aug 7, 2019 •

edited

Loading

mrdoob commented Aug 7, 2019 •

edited

Loading

mrdoob commented Aug 8, 2019 •

edited

Loading

bhouston commented Aug 8, 2019

arobertson0 commented Aug 8, 2019

mrdoob commented Aug 8, 2019

EliasHasle commented Aug 8, 2019 •

edited

Loading

mrdoob commented Aug 8, 2019

arobertson0 commented Aug 8, 2019 •

edited

Loading

mrdoob commented Aug 8, 2019

WestLangley commented Aug 8, 2019

mrdoob commented Aug 8, 2019

bhouston commented Aug 8, 2019 via email

mrdoob commented Aug 8, 2019

WestLangley commented Aug 8, 2019

mrdoob commented Aug 21, 2019

WestLangley commented Aug 21, 2019

mrdoob commented Aug 21, 2019

WestLangley commented Aug 21, 2019

Added clear coat normal maps #17079

Added clear coat normal maps #17079

Conversation

arobertson0 commented Jul 23, 2019

WestLangley commented Jul 23, 2019

WestLangley commented Jul 23, 2019

sunag commented Jul 24, 2019

arobertson0 commented Jul 24, 2019 • edited Loading

EliasHasle commented Jul 26, 2019 • edited Loading

arobertson0 commented Jul 29, 2019

WestLangley commented Jul 29, 2019

arobertson0 commented Jul 30, 2019

mrdoob commented Jul 31, 2019

bhouston commented Jul 31, 2019

WestLangley commented Aug 5, 2019

mrdoob commented Aug 6, 2019

mrdoob commented Aug 7, 2019 • edited Loading

mrdoob commented Aug 7, 2019 • edited Loading

mrdoob commented Aug 8, 2019 • edited Loading

bhouston commented Aug 8, 2019

arobertson0 commented Aug 8, 2019

mrdoob commented Aug 8, 2019

EliasHasle commented Aug 8, 2019 • edited Loading

mrdoob commented Aug 8, 2019

arobertson0 commented Aug 8, 2019 • edited Loading

mrdoob commented Aug 8, 2019

WestLangley commented Aug 8, 2019

mrdoob commented Aug 8, 2019

bhouston commented Aug 8, 2019 via email

mrdoob commented Aug 8, 2019

WestLangley commented Aug 8, 2019

mrdoob commented Aug 21, 2019

WestLangley commented Aug 21, 2019

mrdoob commented Aug 21, 2019

WestLangley commented Aug 21, 2019

arobertson0 commented Jul 24, 2019 •

edited

Loading

EliasHasle commented Jul 26, 2019 •

edited

Loading

mrdoob commented Aug 7, 2019 •

edited

Loading

mrdoob commented Aug 7, 2019 •

edited

Loading

mrdoob commented Aug 8, 2019 •

edited

Loading

EliasHasle commented Aug 8, 2019 •

edited

Loading

arobertson0 commented Aug 8, 2019 •

edited

Loading