How to set transparency / opacity only for material texture

Question

I want to achieve a highlight effect over an object by changing it's material color when hovering it with the cursor. The object's material has a texture map (checkerboard let's say). I am using an easing function to animate the material color from red to blue.

The effect I want to achieve is to have the material with red colored checkerd board go to blue colored without checkered board texture. I want to make texture map loose all opacity while the color shifts from red to blue. I have achieved this effect by using two meshes one with red checkerd board material and a second one with the blue material transparent and opacity set to zero. I have animated the opacity from zero to one and achieved the desiered effect.

However I was wondering if it is possible to attain the same effect by using only one mesh with a single material. That would be possible if I could set map transparency independent of material transparency. I am concerned of performance issue of having duplicate meshes only for this purpose. One way to mitigate the problem would be to create the hovered mesh clone at run time and dispose of it after hovering.

Any thoughts on this?

Answer 1

You cannot change an opacity of a texture, but you may change an opacity of an image you pass. Simply draw it on a canvas element and pass this canvas to a texture instead of an image. When you need to change an opacity just re-draw an image on this canvas with opacity needed and then mark texture as needed update:

texture.needsUpdate = true;

Answer 2

You can achieve the effect you want by creating a custom ShaderMaterial.

Here is how you can hack WebGLRenderer to visualize the effect:

Rewrite map_fragment.glsl, like so:

vec4 texelColor = texture2D( map, vUv );

texelColor.xyz = inputToLinear( texelColor.xyz );

//diffuseColor *= texelColor;
diffuseColor.rgb *= ( texelColor.rgb - vec3( 1.0 ) ) * opacity + vec3( 1.0 );

three.js r.73