Hi!
How i can fix pixelity when i transform BW to normal map in NME:
https://nme.babylonjs.com/#CQ60FS
you can see the pixelate effect if you move away from the object as far as possible. I think the problem is in the derivative, but I don’t know what to do.
I believe you are going to need to create some sort of dynamic mipmap. This is just a normal artifact of computer graphics you are seeing and what mipmaps with textures are designed to counter.
Perlin noise works perfectly and does not create artifacts. Maybe accuracy of derivative computation is not enough?
Let s see if @PatrickRyan has a trick for this ?
I don’t think its an accuracy issue. I think it has more to do with what Gl dFdx and dFdy is doing. It would be measuring the derivative of the fragments, not specifically of the perlin noise “texture”. So the derivative between fragments could become much more harsh as you move the camera away and gradients and ramps are lost.
Do you need the noise to be generative or is it something you could get away with using a precomputed noise texture? If so you could probably pre compute the derivatives as well and then do normal sampling and blur/mipmap type approaches.
Like have a look at this out of bounds shading of the results. Notice how the derivatives changed based on the the distance from the camera.
In this case i need generative noise. So, how i understand i can’t achieve necessary effect only with nodeMaterial. But maybe i will find the way how to hack that. Will see.
One thing you can do to minimize some of it is to roll off your noise toward the fresnel of the mesh. If you are using this for a normal map, as the surface rolls away from the view direction, you will see less influence from the surface normal on lighting anyway, so this should not feel out of place.
This is just a simple example of lerping from the “flat normal” color to your noise texture based on the fresnel of the mesh:
Which will produce a look like:
This takes care of the worst of the pixelation on the edges, but you still have some as the surface rolls away so you would have to play with the strength/bias of the fresnel mask to minimize.
Babylon.js Node Material Editor (babylonjs.com)
However, I feel a better approach would be to create the normal map procedurally in an NME procedural graph, and then pump that dynamic normal map into regular UV space as a texture in your main shader. This way, you don’t need to worry about the texture wrapping correctly as it would work like any other texture.
An example of this type of flow would be the product demo we did for the last release where we used a procedural texture to morph between two texture sets on the mesh:
The project can be found at Website/build/Demos/ProductPage at master · BabylonJS/Website (github.com)
Thanks for that!
Thanks again! It is solve my problem. For some reason, I did not remember about the possibility of creating a procedural texture directly.
One other thing that may be helpful for your procedural texturing is triplanar projection if your don’t have a clean UV unwrap or are fighting UV seams with a procedural texture. We did a demo of a triplanar projection texture a while ago that you can find at Triplanar Projection with Procedural Texture | Babylon.js Playground (babylonjs.com)
Thanks for it!
One other option is just write your own derivatives like this:
Both solutions are great, thank you all)
