Tosyk
October 31, 2021, 6:22pm
1
hi, very often I need to invert green (Y) channel in normal maps back and force only because of different 3d app renders models differently. This inverting option exist almost everywhere but I can’t find it in three js. Maybe I miss something?
Here’s best explanation of why this needs:
Basically it’ not the matter of API used to render normal map but mostly a matter of inverting of a green channel.
I’m not concidering changing the image itself. Also, this question discussed here without a resolution:
opened 02:34AM - 18 Jun 14 UTC
closed 04:57AM - 01 Jul 14 UTC
Suggestion
I posted this question on stackoverflow a few days ago and didn't get any replie… s in regards to Three.js so I am going to assume that this feature isn't implemented yet.
http://stackoverflow.com/questions/24208504/three-js-mirrored-normal-maps-flipped-channel
The issue is defined there but I will quickly summarize it. I have a model that is mirrored down the middle with a normal map. The normal map appears to have one channel (possibly red) that is flipped on the mirrored side of the model. I propose adding a new attribute to MeshPhongMaterial/Material that allows the developer to manually flip the channels of the mirrored side of the normal map.
For example, the three channels could be enumerated:
``` javascript
THREE.DefaultChannels
THREE.RedChannel
THREE.GreenChannel
THREE.BlueChannel
```
Then when defining the material, you would type:
``` javascript
var material = new MeshPhongMaterial()
... <material properties>
material.normal_mirrored_channel = THREE.RedChannel | Three.BlueChannel;
var mesh = new THREE.MorphAnimMesh( geometry, material );
```
This would flip both the red and blue channels on the mirrored side of the normal map using a bitwise OR on the enums with the default behavior as it is now. Obviously the names are just examples and something that better suits the conventions of Three.js should be used.
Might not be a bad idea to include the option to flip the non mirrored side as well if you need to compensate for tangent bias. For example, xNormal's default bias has the green channel flipped from 3DS Max.
3ds max example:
Have you tried setting normalScale.y to -1 in MeshStandardMaterial
1 Like
Tosyk
October 31, 2021, 7:03pm
4
nope, I never know it exists. will that invert a color of specific channel?
Its in phong material also.
normalScale.xy basically gets multiplied to xy of the normal from the map. So setting it to -1 should invert it.
1 Like
Tosyk
October 31, 2021, 7:09pm
6
thank you. seems like I can’t find a way to properly use it.
material.normalScale.set( 0.0, -1.0 );
yes, probably also set material.needsUpdate = true
Tosyk
October 31, 2021, 7:17pm
8
I use
material.normalScale.set( 1, -1 );
but that doesn’t seem work. also I haveTHREE.WebGLRenderer: Texture marked for update but image is undefined warning all the time with fbxloader()
I see this demo: three.js examples three.js/webgl_materials_displacementmap.html at 00a692864f541a3ec194d266e220efd597eb28fa · mrdoob/three.js · GitHub
but I can’t implement it to my code for some reason.
okay, I resolved update warning by this code:
var tex = material.map.clone();
tex.needsUpdate = true;
but normalScale still doesn’t work. any thoughts how to make it work?
Tosyk
October 31, 2021, 7:36pm
9
okay, I resolved it with:
material.normalScale = new THREE.Vector2(-1, -1);
but for some reason now it ignores my
material.normalScale.setScalar(2.0);
so, increasing these parameters actually fixed the issue:
material.normalScale = new THREE.Vector2(-2.2, -2.2);
case closed. thank you
