Confusion with PBR + Bug with inspector?

[Kevin]

Hello everyone!

I am quite new with PBR material - it’s really awesome! At the moment, I think I am struggeling with the correct textures, especially the color channels and their switches with roughness / metallness.

This is what I am trying to achieve:

I made a greyscale and normal version for the polishing,
I cannot show here because of the new user restriction, but you will see them in the playground.

I created an appropiate UV Map for the object.

So far so good. What I struggle with is: I think I would need a correct metallness / Roughness map for the lighting and/or antristophic light? I think I will be able to create Red/Green/Channel maps with layers in Affinity Photo - but so far I am lost… it looks “ok” with albedo texture but I just used it to test the UV mapping.

Questions:

• What do you masters of the pbr think should be done to get better effect? I tried bump, but I don’t think its correct since it’s not acutally uneven material
• Is there a way to let the shadow not get specualar at all? It gets lightened like it’s not there from the environment

Of course I got a playgound for you to just tweak some values and not build anything:
https://playground.babylonjs.com/#QRFGGJ

Addition regarding inspector:
Unfortunately in my case the inspector simply “closes” when I try to play with my PBR Material “Stand” / “Shell” … is this a knowing bug? Whats wrong?

[Deltakosh]

pinging @PatrickRyan

[Kevin]

Hi Deltakosh,

you answered questions of me like 4 years ago! Glad to see you are still active!

I think this is a small pretty example for PBR and someone might have fun helping me

This is the error raised by the inspector, when inspecting one of my materials:
babylon.inspector.bundle.js:26 Uncaught TypeError: Cannot read property ‘clone’ of undefined
at new t (babylon.inspector.bundle.js:26)
at Xa (babylon.inspector.bundle.js:46)
at si (babylon.inspector.bundle.js:46)
at Rl (babylon.inspector.bundle.js:46)
at xl (babylon.inspector.bundle.js:46)
at Cl (babylon.inspector.bundle.js:46)
at bl (babylon.inspector.bundle.js:46)
at babylon.inspector.bundle.js:46
at t.unstable_runWithPriority (babylon.inspector.bundle.js:54)
at ha (babylon.inspector.bundle.js:46)

It’s happening in my playground example. No idea, what should be wrong. It stopped working at some point in the blender export and preview progress. Looks it tries to clone something that is not there? Maybe blender tried to export something that is somehow errorful?

[Deltakosh]

How do you get that error? What is the walkthrough to get the error? (I cannot repro on the PG )

[Kevin]

Oh! Okay, thought it might happen everywhere. I got the same error in sandbox with this object.
Maybe a Chrome error?!

These are my steps:

• Open: Babylon.js Playground (the url from above, here it’s shown without #) in Chrome
• Click on the settings icon above when the object is shown
• Click inspector
• See inspector
• Click and open “Materials”
• Click “Shell”
• Inspector closes, error raised in console. Inpsector can be shown again by clicking “Inspector” two times (the first click seems to close the already “broken” one then open a new instance again)

[Deltakosh]

I do not repro
I did the same as you on Chrome and Edge

[Kevin]

Oh! That’s mystic?!

All I can say is, it’s using:
Version: Babylon.js v4.2.0-alpha.15 - WebGL2 - Parallel shader compilation
Driver: ANGLE (NVIDIA GeForce GTX 1070 Direct3D11 vs_5_0 ps_5_0)

I understand, you cannot do much without repo. For me this is happening consistently, even if I drag the object into sandbox
Oh it’s working in FireFox! This is okay to test
No idea, whats wrong with my chrome, I have nearly nothing installed in terms of addons/extensions.

Oh wait! Chrome says Parallel Shader Compilation “yes” - FireFox “no”
I am not really sure, but it might have stopped working when I created the second UV map. I have one for the Ambient texture and one for the surface.

[Deltakosh]

Well I have the same:

Are you on win10?

[Kevin]

Yes, it’s Windows 10 Pro all updates applied as far as I know. I have no idea.
We seem to watch from the same system.

[Deltakosh]

Chrome version?

[Kevin]

Chrome says the newest: Version 81.0.4044.138 (Offizieller Build) (64-Bit)

[Deltakosh]

LOL! I have STRICTLY the same:

Can you try this one and report the console errors?
https://playground.babylonjs.com/debug.html#QRFGGJ

[Kevin]

Well this is killing me
In the debug version it works!

Could there be bug in the minified version?
I feel sorry for this one, as it seems to be highly specific to a small detail

[Deltakosh]

I highly doubt that
Can you make sure to clean your cache so we are on the same version for sure?

[Kevin]

It really was a cache thing!
Should not ask about this! How often we tell customers to do so and it magically works again.
No idea what was in my cache right now, thought it stayed the same - but don’t know when I opened the page for the first time and it may have been cashed for quite long. Not sure

Question about the environment and PBR:
Can I control the environment reflection to be not shown where shadow is? Like the specular from the “normal light” ?

[Deltakosh]

Unfortunately no. The shadows are from the dynamic light whereas the IBL (environement) is computed as a static light with no shadow

[Kevin]

Okay, is there a common practice maybe?
Thanks for your investigation!

For the PBR I came some steps further to where I want to go: https://playground.babylonjs.com/#QRFGGJ#1

I used a bump now but I also created (a more or less correct) Metallic/Roughness texture.

I think what I need now is a correct “Anisotrpic Texture” … now I think I am completely lost, although I think it’s needed to get the final correct affect from the image I posted initially.

I found this tutorial for Blender: YouTube

I am not a shader expert by any means. It looks like a rather easy combination of R-G-B in the shader nodes section. Could I create a texture for this? How would I apply it on my specific mesh? I have no idea

I think there is someone able to help me here! And I think it would be a quite good PBR example as it also applies on Vinyl Discs (there is even an image of it in the Master PBR section).

It says something about “Tangents”. I can do some things with blender but really never used tangents.

Thanks in advance!

[Deltakosh]

Adding our PBR master @sebavan

[PatrickRyan]

@Kevin, here is a sample of what you want to do if you only want the radial texture in your anisotropic reflections. Rather than do something to your scene, I set up an isolated scene as an example.

This is how I built the asset. I started in Maya making the disc as a pipe and slicing off the top to use that.

I then UV unwrapped it so that the pipe was straightened out and used the entire 0-1 space.

And finally I scaled the inner vertices to the center. Note I did not collapse them as I need to keep the UVs intact using all of 0-1 space.

I then jumped to Substance Designer to make a quick Anisotropic texture with 1 in R, 0 in G and the anisotropic texture in blue. The first two channels are a direction which multiplied with the tangent space of the mesh and the anisotripic factor so you have control over the direction of the anisotropic stretch.

The reason I wanted to unwrap the asset in this way is because I wanted the UVs to bend the texture rather than needing to do a polar coordinates conversion. As you can see there is little warping at the center of the pipe, so this does a decent job with using some default square textures.

As you can see if you rotate away from a glancing angle, the anisotropic reflection disappears like it should so you aren’t left with the anisotropic detail in your roughness or normal.

Now you could want that detail in your normal if, for example, you were making a material that had been turned and left subtle scratches in the surface. But in the case you don’t want to tie the anisotropy into the base textures, this is the best way to achieve it (from the playground):

pbrMat.anisotropy.isEnabled = true;
pbrMat.anisotropy.texture = anisotropyLevel;
pbrMat.anisotropy.intensity = 0.4;

Of course, depending on your asset, you may need to configure your textures differently depending on how things are UVed, but this should be enough to get you rolling with your implementation. Let me know if you have more questions. Take care!!

[sebavan]

You totally need an anistropic texture for this

Basically you could use texture from Anisotropic Highlight Shader - Unify Community Wiki

It looks like a normal map and is kind of bending the light rays in a direction

If you use a texture, do not forget to set u and v to 1 as they multiply with the texture data.