How to calculate Tangent in shader?

Questions
1

Is this method feasible?

attribute vec3 tangent;

2

If your model has tangents, yes. If you’re using a DCC tool like Blender or Maya, you should have an option at export time to generate tangents. This is the best option, as calculating tangents at runtime takes time and the result may not be as good as if it had been pre-calculated.

2 Likes
3

At present, the model I exported does not have tangent.I want to calculate it in shader.What should I do?

4

Why don’t you ask an AI like Gemini how to use tangend in a shader?

// Create a custom shader material
const shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
    vertex: "custom",
    fragment: "custom",
},
{
    attributes: ["position", "normal", "uv"],
    uniforms: ["worldViewProjection", "world", "worldInverseTranspose", "_LightPosition"],
    samplers: ["_NormalMap"]
});

// Vertex Shader (custom.vertex.fx)
BABYLON.Effect.ShadersStore["customVertexShader"] = `
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;

uniform mat4 worldViewProjection;
uniform mat4 world;
uniform mat4 worldInverseTranspose;

varying vec3 vWorldPos;
varying vec3 vNormal;
varying vec2 vUV;
varying vec3 vTangent;
varying vec3 vBitangent;

void main() {
    vec4 worldPosition = world * vec4(position, 1.0);
    vWorldPos = worldPosition.xyz;
    vNormal = normalize(mat3(worldInverseTranspose) * normal);
    vUV = uv;

    // Calculate Tangent and Bitangent (Simplified - Ideally pre-calculated)
    // This is a very basic approximation and won't be accurate for all meshes.
    // Pre-calculated tangents are strongly recommended.
    vec3 tangent = vec3(1.0, 0.0, 0.0); // Placeholder
    vec3 bitangent = cross(vNormal, tangent);
    vTangent = normalize(mat3(world) * tangent);
    vBitangent = normalize(mat3(world) * bitangent);

    gl_Position = worldViewProjection * vec4(position, 1.0);
}
`;

// Fragment Shader (custom.fragment.fx)
BABYLON.Effect.ShadersStore["customFragmentShader"] = `
precision highp float;

varying vec3 vWorldPos;
varying vec3 vNormal;
varying vec2 vUV;
varying vec3 vTangent;
varying vec3 vBitangent;

uniform vec3 _LightPosition;
uniform sampler2D _NormalMap;

void main() {
    vec3 normal = normalize(vNormal);
    vec3 tangent = normalize(vTangent);
    vec3 bitangent = normalize(vBitangent);

    mat3 TBN = mat3(tangent, bitangent, normal);

    vec3 normalMap = texture2D(_NormalMap, vUV).rgb;
    normalMap = normalMap * 2.0 - 1.0;

    vec3 worldNormal = normalize(TBN * normalMap);

    vec3 lightDir = normalize(_LightPosition - vWorldPos);
    float diffuse = max(dot(worldNormal, lightDir), 0.0);

    gl_FragColor = vec4(vec3(diffuse), 1.0);
}
`;

// Create a mesh (e.g., a sphere)
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);

// Load the normal map texture
const normalMap = new BABYLON.Texture("path/to/your/normalmap.png", scene);
shaderMaterial.setTexture("_NormalMap", normalMap);

// Set the light position
shaderMaterial.setVector3("_LightPosition", new BABYLON.Vector3(10, 10, 10));

// Apply the shader material to the mesh
sphere.material = shaderMaterial;

// Important: If you have pre-calculated tangents in your mesh data:
// 1. Add "tangent" to the attributes in the ShaderMaterial constructor.
// 2. In the vertex shader, receive the tangent as an attribute: `attribute vec3 tangent;`
// 3. Pass the tangent to the fragment shader as a varying: `varying vec3 vTangent;`
// 4. Remove the tangent/bitangent calculation in the vertex shader and just pass the attribute value.
// Example:
/*
attributes: ["position", "normal", "uv", "tangent"],
...
attribute vec3 tangent;
varying vec3 vTangent;
...
vTangent = normalize(mat3(world) * tangent); // No more calculation
*/
5

Thank you for the reminder. You didn’t just help me solve this problem