Use Multiple Textures and Normals on UV-Spaces

Hallo dear Community and PlayCanvas-Team.

I am right now in a Process of deciding wether to use Unity3d, ThreeJS, BabylonJS or PlayCanvas for a future WebGL Project my Company is working on. PlayCanvas has some really nice Features and is fun to work with. But so far I reached certain Limitations.

I want to achieve the following:

1 Main Texture on an Object that defines the Main Color (this Texture would Use UV-Space 0)
1 Detail Texture on that Object (this would use UV1)
And for each of that textures i want to add a normal Map.

Is it somehow possible to achieve this without spending hours (or even days) in learning how to write an appropriate custom Shader?

PS: It is not possible for me to merge the Detail and Color textures into one Texture, we already tried that and it did not suit our needs in terms of Quality, so the only Option is to use two Textures.

Regards,
Markus

Hi, Markus.
Do you really need separate UVs for main/detail maps? Often detail maps just use same UVs, but scaled (so more tiling).

Hello,

thanks for the fast Reply. Unfortunately this is not possible because the Detail only gets applied to a part of the mesh. Using only one UV-Space would spread the Detail all over the mesh.

edit: To get a better understanding of the Problem. Lets assume I have a Plane. On that Plane i want to have a Cloth-Texture with its Normal Map. And on top of the Cloth material there shall be seams that have their own normal map.

Here, I made an example for you: https://playcanvas.com/project/397844/overview/detailmaptest
UV0 are simply planar and UV1 are used for small stitches around.

The difference, though, is that it uses greyscale detail height map for bump instead of additional normal map. Why? Normal mapping needs so called tangent space to work, which is simply 3 vectors:


Where N is your geometry normal and TB are defined by UV direction. That’s why using 2 normal maps on 2 different UVs is not efficient, because we need to compute additional vectors and store it on the mesh. PlayCanvas doesn’t support it, but there are also TBN-free ways of doing bump mapping, including the technique used in the example.

1 Like

Hello,

thank you for your work. In your Project it looks just like i imagined it :slight_smile: But if I try to recreate it I get the following Errors (seems like some Problem with the UV Spaces but my mesh has the correct spaces):

ERROR: 0:93: ‘vUv1’ : undeclared identifier
ERROR: 0:93: ‘perturb_normal’ : no matching overloaded function found
ERROR: 0:93: ‘assign’ : cannot convert from ‘const float’ to 'highp 3-component vector of float’
ERROR: 0:150: ‘vUv1’ : undeclared identifier
ERROR: 0:150: ‘texture2D’ : no matching overloaded function found
ERROR: 0:150: ‘rgb’ : field selection requires structure or vector on left hand side
ERROR: 0:150: ‘=’ : cannot convert from ‘const float’ to 'highp 3-component vector of float’
ERROR: Failed to link shader program. Error: invalid shaders

How exactly do I have to set up the Inspector Variables on the Script (because this is invisible if I look into your project)?
multiply2xMap -> Detail Diffuse Texture? ?
BumpMap -> Detail Height Map

edit: Got it working. Can I somehow modify the tiling of the textures via Script? Because Material-Tiling seems to get overwritten