pc.SEMANTIC_TANGENT appears to have no value

Eele_Roet · May 2, 2022, 7:57pm

Hello, I am working on a parallax shader where multiple layers can be displayed with appearent distance between the layers.

To determine how much i have to shift the UVs around to produce parallax I need to know the camera view angle in tangent space.

I read up on tangent space an found an implentation for playcanvas in post: [SOLVED] Add skinning code to a custom shader

I use the normal and tangent semantic to construct a TBN world-to-tangent matrix.

It works as it is supposed to. But i found that the tangent value, that is gotten through the pc.SEMANTIC_TANGENT is an empty vector (0,0,0).

I tested this by passing the tangent to the fragment shader and displaying the vector as color. Only blackness showed up.

Another problem I ran into is that when I hardcoded a value as the tangent, the effect only works on a plane that has not been rotated. I thought rotation would not be an issue since the tangent is multiplied by the model_matrix when it is used to make the TBN matrix.

link to project: PlayCanvas | HTML5 Game Engine

Let me know if I need to provide more info.

Thanks in advance.

Leonidas · May 2, 2022, 8:10pm

Hi @Eele_Roet and welcome,

Calling @mvaligursky on this.

mvaligursky · May 3, 2022, 8:45am

Playcanvas does not use SEMANTIC_TANGENT vertex attribute on majority of its meshes (not unless a user creates a mesh with it). TBN matrix is calculated without tangent attribute, based on Followup: Normal Mapping Without Precomputed Tangents | The Tenth Planet. See the code here: engine/TBNderivative.frag.js at main · playcanvas/engine · GitHub

So that’s the TBN you should likely be using.

You can also inspect the built in parallax mapping functionality to see how this is done. It’s enabled by specifying a heightMap on a standard material: engine/standard-material.js at 4bace9844e94e7bbdf7a1d6e339fa62fa8770e91 · playcanvas/engine · GitHub

Here’s the implementation of it, which uses TBN matrix to convert world view vector to tangent space:

github.com

playcanvas/engine/blob/main/src/graphics/program-lib/chunks/standard/parallax.frag.js

export default /* glsl */`
uniform sampler2D texture_heightMap;
uniform float material_heightMapFactor;

void getParallax() {
    float parallaxScale = material_heightMapFactor;

    float height = texture2D(texture_heightMap, $UV, textureBias).$CH;
    height = height * parallaxScale - parallaxScale*0.5;
    vec3 viewDirT = dViewDirW * dTBN;

    viewDirT.z += 0.42;
    dUvOffset = height * (viewDirT.xy / viewDirT.z);
}
`;

Eele_Roet · May 7, 2022, 12:13pm

Hey thanks for the reply, I got the parallax working. It’s all running on the vertex shader now so im really happy with the performance.

I had still did not get the tangent semantic working, though. I exported a couple fbx planes from blender with the tangent option on. But once i had it imported the data never showed up.

Did some googling and I saw others had this problem too. Not sure if it is a problem with the blender exporter or the playcanvas inporter tho.

mvaligursky · May 7, 2022, 12:20pm

Nice you got it to work.
Playcanvas fbx importer does not export tangent space to glb files. You could work around that by using glb directly most likely, nothing from those gets stripped.