Skip to content

GLTFLoader: Fixed variants normal map scale #21148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 27, 2021
Merged

GLTFLoader: Fixed variants normal map scale #21148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f1124b
fixed GLTF variants normal map scale
elalish Jan 26, 2021
65d597d
adding notes
elalish Jan 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 15 additions & 17 deletions examples/js/loaders/GLTFLoader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -620,7 +620,8 @@ THREE.GLTFLoader = ( function () {

var scale = extension.clearcoatNormalTexture.scale;

materialParams.clearcoatNormalScale = new THREE.Vector2( scale, scale );
// https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
materialParams.clearcoatNormalScale = new THREE.Vector2( scale, -scale );

}

Expand Down Expand Up @@ -2621,11 +2622,20 @@ THREE.GLTFLoader = ( function () {
cachedMaterial = material.clone();

if ( useSkinning ) cachedMaterial.skinning = true;
if ( useVertexTangents ) cachedMaterial.vertexTangents = true;
if ( useVertexColors ) cachedMaterial.vertexColors = true;
if ( useFlatShading ) cachedMaterial.flatShading = true;
if ( useMorphTargets ) cachedMaterial.morphTargets = true;
if ( useMorphNormals ) cachedMaterial.morphNormals = true;

if ( useVertexTangents ) {

cachedMaterial.vertexTangents = true;

// https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
if ( material.normalScale ) material.normalScale.y *= -1;
if ( material.clearcoatNormalScale ) material.clearcoatNormalScale.y *= -1;
Copy link
Collaborator

@donmccurdy donmccurdy Jan 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These two lines are needed only if vertex tangents are not present — that's the issue in #21136 as well.

Copy link
Contributor Author

@elalish elalish Jan 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, because I reversed them by default above, so now they need to be re-reversed if vertexTangents are used, which can work because vertexTangents create a new cacheKey.

Copy link
Collaborator

@donmccurdy donmccurdy Jan 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, I see. Seems a little more confusing to have inversions in three places, was there a specific reason you prefer that? If we keep it that way, we should include a link to the github issue above in all three places.

Copy link
Contributor Author

@elalish elalish Jan 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I say, it was necessary in order to make the switch happen only inside a cached constructor, instead of every time assignFinalMaterial was called. That was the bug. I'll put in the comments.

Copy link
Collaborator

@donmccurdy donmccurdy Jan 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like this will introduce the opposite problem if the mesh did have vertex tangents with variants, no?

Copy link
Contributor Author

@elalish elalish Jan 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, I don't think so. Did you find that to be true in testing?

Copy link
Collaborator

@donmccurdy donmccurdy Jan 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have exactly one sample using variants, and it doesn't have vertex tangents, so I'm limited to guessing at this point. I think I see what you mean though.


}

this.cache.add( cacheKey, cachedMaterial );

Expand All @@ -2645,19 +2655,6 @@ THREE.GLTFLoader = ( function () {

}

// https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
if ( material.normalScale && ! useVertexTangents ) {

material.normalScale.y = - material.normalScale.y;

}

if ( material.clearcoatNormalScale && ! useVertexTangents ) {

material.clearcoatNormalScale.y = - material.clearcoatNormalScale.y;

}

mesh.material = material;

};
Expand Down Expand Up @@ -2778,11 +2775,12 @@ THREE.GLTFLoader = ( function () {

pending.push( parser.assignTexture( materialParams, 'normalMap', materialDef.normalTexture ) );

materialParams.normalScale = new THREE.Vector2( 1, 1 );
// https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
materialParams.normalScale = new THREE.Vector2( 1, -1 );

if ( materialDef.normalTexture.scale !== undefined ) {

materialParams.normalScale.set( materialDef.normalTexture.scale, materialDef.normalTexture.scale );
materialParams.normalScale.set( materialDef.normalTexture.scale, -materialDef.normalTexture.scale );

}

Expand Down
1 change: 1 addition & 0 deletions examples/jsm/loaders/GLTFLoader.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export class GLTFParser {

getDependency: ( type: string, index: number ) => Promise<any>;
getDependencies: ( type: string ) => Promise<any[]>;
assignFinalMaterial: ( object: Mesh ) => void;

}

Expand Down
32 changes: 15 additions & 17 deletions examples/jsm/loaders/GLTFLoader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -685,7 +685,8 @@ var GLTFLoader = ( function () {

var scale = extension.clearcoatNormalTexture.scale;

materialParams.clearcoatNormalScale = new Vector2( scale, scale );
// https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
materialParams.clearcoatNormalScale = new Vector2( scale, -scale );

}

Expand Down Expand Up @@ -2686,12 +2687,21 @@ var GLTFLoader = ( function () {
cachedMaterial = material.clone();

if ( useSkinning ) cachedMaterial.skinning = true;
if ( useVertexTangents ) cachedMaterial.vertexTangents = true;
if ( useVertexColors ) cachedMaterial.vertexColors = true;
if ( useFlatShading ) cachedMaterial.flatShading = true;
if ( useMorphTargets ) cachedMaterial.morphTargets = true;
if ( useMorphNormals ) cachedMaterial.morphNormals = true;

if ( useVertexTangents ) {

cachedMaterial.vertexTangents = true;

// https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
if ( material.normalScale ) material.normalScale.y *= -1;
if ( material.clearcoatNormalScale ) material.clearcoatNormalScale.y *= -1;

}

this.cache.add( cacheKey, cachedMaterial );

this.associations.set( cachedMaterial, this.associations.get( material ) );
Expand All @@ -2710,19 +2720,6 @@ var GLTFLoader = ( function () {

}

// https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
if ( material.normalScale && ! useVertexTangents ) {

material.normalScale.y = - material.normalScale.y;

}

if ( material.clearcoatNormalScale && ! useVertexTangents ) {

material.clearcoatNormalScale.y = - material.clearcoatNormalScale.y;

}

mesh.material = material;

};
Expand Down Expand Up @@ -2843,11 +2840,12 @@ var GLTFLoader = ( function () {

pending.push( parser.assignTexture( materialParams, 'normalMap', materialDef.normalTexture ) );

materialParams.normalScale = new Vector2( 1, 1 );
// https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
materialParams.normalScale = new Vector2( 1, -1 );

if ( materialDef.normalTexture.scale !== undefined ) {

materialParams.normalScale.set( materialDef.normalTexture.scale, materialDef.normalTexture.scale );
materialParams.normalScale.set( materialDef.normalTexture.scale, -materialDef.normalTexture.scale );

}

Expand Down
3 changes: 2 additions & 1 deletion examples/webgl_loader_gltf_variants.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,10 +132,11 @@
if ( mapping ) {

object.material = await parser.getDependency( 'material', mapping.material );
parser.assignFinalMaterial(object);

} else {

object.material = object.originalMaterial;
object.material = object.userData.originalMaterial;

}

Expand Down