Is there any way to make image negative in Three.js

Questions
1

In our project there is a requirement to make roughness map negative.
Please can anyone help? Is there a way to make an image negate ( revert it )? I managed to do it with canvas ( create image negative and then append it to the Texture ) but in my opinion it’s not a good solution.

Thanks in advance.

2

The inverse of a roughness map is usually a glossiness map, if you mean…

glossiness = 1 - roughness

… instead of making roughness values negative? three.js materials cannot do this for you. You can patch shader materials (more advanced and not so easy to maintain) or pre-process the texture, preferably offline but in a canvas seems OK if the texture is not so large.

3

Thanks for response. Is there any code example or something you can share regarding the shader Materials? I’m new to three.js and the 3D world. The feature I’m implementing is very urgent to for our business so it would be great to have some example or something similar to understand briefly what I should do. If there is nothing no worries will try to figure out myself.

4

You can edit shader code with onBeforeCompile

material.onBeforeCompile=function(shader){
  shader.fragmentShader= shader.fragmentShader.replace('#include <roughnessmap_fragment>',
  //the line '#include <roughnessmap_fragment>' will replaced with text from THREE.ShaderChunk.roughnessmap_fragment
  //there is a line "vec4 texelRoughness = texture2D( roughnessMap, vUv );"
  //we need "invert" a value getting from texture: texelRoughness = 1. - texture2D( roughnessMap, vUv )
  THREE.ShaderChunk.roughnessmap_fragment.replace('texelRoughness =', 'texelRoughness = 1. -'))
}
1 Like
5

Thanks. It works.