We made some models for a WebGL product demo integrated into our website.One of them is a Philips Norelco series Trimmer. The mesh we uploaded is properly retopoed in topogun and the normals are baked in xnormals. There are no issues seen in maya with the normal map applied. But, some strange artifacts are appearing on the mesh after assigning the normal maps in Play Canvas. We have tried both on quad and tri models. Same result. Please Help…
Web GL uses different Normal maps from Direct X and some times looks wrong as a result in my experience, I typically go into Photoshop and select the green or red channels and invert and resave until they look correct in Web GL.
Thank you, will try this out.These screen grabs are from the playcanvas editor itself.We are new to playcanvas and are currently working our way around it.Thanks again!
Inverting green or red channel did not solve the issue. Please suggest another solution. By the way… what is the most perfect software to bake models for web? Please Help…
I use a variety depending. I bake in Substance Designer for High poly to low poly and use Photoshop filters like the built in one or the Xnormals Photoshop filter for converting 2D Images to normal maps. Mostly the later since we do arch viz work.
Looking at your project now
You might find a global cubemap might help showing the normals, Put a cubemap with filtering on it into the sky and see what happens. I can’t download the normal maps or branch the project to see what’s happening exactly, but nothing seems wrong from the limited look I could take though.
@WULFArts It’s easier to diagnose the problem if you share the link to a scene that highlights the issue. Without actually examining the maps assigned to your material, it’s extremely difficult to help.
Thank you Will for your support… I’m sharing a dropbox link. please see the mesh and maps… and suggest some solution…
Thanks for the assets. Even if I assign the material to a plane, I get the same effect:
It’s definitely something related to the normal map but I can’t see anything that’d cause a problem in Photoshop! Hey @Mr_F, what do you think??
This is related to specular anti-aliasing being overly sensitive to normal map inaccuracies unfortunately… For some reason the UI checkbox for it was removed, but you can disable it with script (in initialize):
pc.shaderChunks.specularAaToksvigPS = pc.shaderChunks.specularAaToksvigFloatPS = pc.shaderChunks.specularAaNonePS;
@Mr_F Can you please elaborate your point? Should I apply the script on the mesh in play canvas editor?
Not necessarily on the mesh, just anywhere, once. It’s a global tweak.
Scripts don’t run in the Editor. It fixes the problem when you run the app. I have verified that the fix does work.
Can you please tell how to run the app? Does it mean publishing our project?
Launch the app or run a published build.
1 Like
Thanks…for the help, 