NodeMaterial renders incorrectly when using mesh tangents

Bugs
16

Not sure what you mean about the last one not supported in PBR? The model does look fine even on back side if you throw the NormalTangentMirrorTest.glb into the sandbox.

I was actually just now playing around trying to figure out the last issue. I locally was able to make the TBNBlock work also in fragment only mode by:

UPDATED WITH SOME TWEAKS:
Changing target getter setter to:

  public get target() {
    return this._target;
  }

  public set target(value: NodeMaterialBlockTargets) {
    if (
      value === NodeMaterialBlockTargets.VertexAndFragment ||
      value === NodeMaterialBlockTargets.Fragment
    ) {
      this._target = value;
    }
  }

So that Fragment target is also allowed.

Adding TBN as excluded variable name in initialize():

    state._excludeVariableName('TBN');

And also changing _buildBlock() code to:

    const normal = this.normal;
    const tangent = this.tangent;
    const world = this.world;
    const TBN = this.TBN;

    const tbnTarget =
      this.target === NodeMaterialBlockTargets.Fragment
        ? NodeMaterialBlockTargets.Fragment
        : NodeMaterialBlockTargets.Vertex;

    // Vertex
    if (state.target === NodeMaterialBlockTargets.Vertex) {
      state._emitVaryingFromString(TBN.associatedVariableName, 'mat3');
    }

    if (state.target === tbnTarget) {
      // Declare output type for fragment only block as no varying is used in that case
      const tbnType =
        tbnTarget === NodeMaterialBlockTargets.Fragment ? 'mat3 ' : '';
      state.compilationString += `
          // ${this.name}
          vec3 tbnNormal = normalize(${normal.associatedVariableName}).xyz;
          vec3 tbnTangent = normalize(${tangent.associatedVariableName}.xyz);
          vec3 tbnBitangent = cross(tbnNormal, tbnTangent) * ${tangent.associatedVariableName}.w;
          ${tbnType}${TBN.associatedVariableName} = mat3(${world.associatedVariableName}) * mat3(tbnTangent, tbnBitangent, tbnNormal);
      `;
    }

    // Fragment
    if (state.target === NodeMaterialBlockTargets.Fragment) {
      state.sharedData.blocksWithDefines.push(this);
    }

With that in place I was able to pass a FrontFacingBlock determined normal to it and the backside is no longer black and front side was correct too.

  • However the reflections on the back were still messed up like in the original issue.
  • I also tried to flip the tangent w component for backfaces to see what would happen then. That caused backside reflections to appear otherwise normal, except they were right side up, even though they should be upside down on the concave backside. So I guess flipping the w coponent isn’t the solution there. :grimacing: