yaustar
December 12, 2022, 4:16pm
21
Looking close up on the 16 bit normal map, it looks like the banding is gone on the sphere area:
Compared to 8 bit:
But not sure why the nozzle is still like it is on the model:
But looking on Apple Preview, the 16 bit png also has these streaks
@mdesign
Have I got the right normal map?
1 Like
I suspect this issue is more related to the way tangent space is used / normal maps generated for it, see more here
opened 11:20AM - 27 Jan 21 UTC
area: graphics
Thread: https://forum.playcanvas.com/t/weird-shading-lines-when-using-normal-map… s/17207/
Repro: https://playcanvas.com/editor/scene/1078580

It should look more like this:

OP mentions that lower image was taken when they use glb and export the mesh’s normals AND tangents (a setting which seems to have no effect in fbx files).
Importing the FBX as JSON and GLB into the Editor makes no difference.
Is this a problem with FBX or our rendering?
1 Like
yaustar
December 12, 2022, 5:42pm
23
Added a 16 bit texture format check first and automatically use 8bit if only that’s supported
Link https://playcanvas.com/project/1017976/overview/f-8bit-normal-map-vs-16bit
1 Like
mdesign
December 12, 2022, 6:03pm
24
So, is that all matter of that script? : test16bitNormal.js
Looks brilliant. All bandings are gone. This model is not perfect but the difference is visible.
Thanks a lot for that.
1 Like
yaustar
December 12, 2022, 7:01pm
25
The logic is all in that script but you will need to take that logic and apply it specifically for your project. This also includes freeing up textures when needed too.
It’s possible to write a generic script that will take 16 bit png.bin s and apply it to multiple materials and auto clean up when the script is destroyed.
Would that work for you?
1 Like
mdesign
December 12, 2022, 9:27pm
26
Would that work for you?
I need to understand it better to answer that question.
Thanks.
yaustar
December 13, 2022, 12:15pm
27
I’ve updated the project to have a more generic script that has an array of mappings of the 16 bit PNG binary to material assets to apply to.
It handles loading the PNG binary and material assets if they aren’t loaded yet and will destroy the textures when the script is destroyed.
It’s all in the folder: 16bit PNG Normal Loader
And the setup is pretty straightforward. Change your png filenames from .png to .png.bin so they are uploaded as a binary.
Add the script to an Entity somewhere and map the binary to the materials that it should be applied to:
Some considerations:
These textures are uncompressed so will use a good chunk of VRAM pending on the dimensions.
There is some cost when the script initialises to create the textures, load the PNG data etc. You may need to take this into consideration when it comes to loading times.
2 Likes
mdesign
December 13, 2022, 7:14pm
28
Thanks a lot. I will use that for sure. Some complex jewellery stuff also will benefit from that. Thanks a lot for your hard work and for being so helpful.
Cheers!!!