Combine materials/textures with alpha maps

Question

I have an object (brain) with a texture.

This brain-texture shall be overlayed/mixed with a heatmap that is integrating an alpha map. What I could archieve so far:

The heatmap texture combined with the alpha map becomes an material
The brain-texture combined with a pure heatmap-texture via Multiple transparent textures on the same mesh face in Three.js

The problem I have is the combination of both steps.

My brainmaterial step (combining heatmap and brain-texture)

brainTexture = new THREE.ImageUtils.loadTexture("/assets/textures/brain_tex.jpg");
  // uniforms
  uniforms = {
    color: { type: "c", value: new THREE.Color(0x0000ff) },
    texture: { type: "t", value: brainTexture },
    texture2: { type: "t", value: heatmapCanvasTexture }
  };
  brainMaterial = new THREE.ShaderMaterial({
    attributes: attributes,
    uniforms: uniforms,
    vertexShader: document.getElementById('vertex_shader').textContent,
    fragmentShader: document.getElementById('fragment_shader').textContent
  });

Fragmentshader I am using:

uniform sampler2D texture;
uniform sampler2D texture2;
uniform vec3 color;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vViewPosition;

void main() {
vec4 tc = vec4(color.r, color.g, color.b, 1.0 );
    vec4 tColor = texture2D( texture, vUv );
    vec4 tColor2 = texture2D( texture2, vUv );

    // hack in a fake pointlight at camera location, plus ambient
    vec3 normal = normalize( vNormal );
    vec3 lightDir = normalize( vViewPosition );

    float dotProduct = max( dot( normal, lightDir ), 0.0 ) + 0.2;

    //gl_FragColor = vec4( mix( tColor.rgb, tColor2.rgb, tColor2.a ), 1.0 ) * dotProduct;

    vec4 mix_c = tColor2 + tc * tColor2.a;
    gl_FragColor = vec4( mix( tColor.rgb, mix_c.xyz, tColor2.a ), 1.0 ) * dotProduct;

}

Result:

My alphamap step:

heatmapMaterial = new THREE.MeshBasicMaterial({
    map: heatmapCanvasTexture,
    side: THREE.DoubleSide,
    alphaTest: 0.5,
    alphaMap: THREE.ImageUtils.loadTexture("/assets/textures/heatmap_alphamap.jpg")
  });

Result:

How can I integrate the modified (by alphamap) heatmap-material into my brain-material (via shader programming?)?

To be clear: the brain-texture should be visible on the entire object but a specific part (alphamapped) should be mixed with a heatmap. So a specific region in the brain can have a heatmap overlay.

Desired result:

score 1 · Accepted Answer · answered Mar 28 '18 at 12:33

1

Something like this should work:

vec4 brain = texture2D( brainTexture, uv );
vec4 heatmap = texture2D( heatmapTexture, uv );
float alpha = texture2D( alphaTexture, uv ).r;
gl_FragColor = mix( brain, heatmap, alpha );

If you post your fragment shader I can try to be more specific.

answered Mar 28 '18 at 12:33

Ben West

3,665
1
12
15

I added my fragment shader code. I didn't expect it to change/matter. Still learning threejs. Thanks so far. – Wandang Mar 28 '18 at 12:54
Almost there, you need to send the alpha map into the shader as a uniform, and then you can implement the above. – Ben West Mar 28 '18 at 13:06
Yeah I wrote that comment b4 integrating your code. Now the only downside is loss of previous texture when I use mix. So I will try to add alpha to the calculation I took from the internet until I understand what is actually happening there. – Wandang Mar 28 '18 at 13:12
You mean the lighting? Try `gl_FragColor = vec4( mix( brain, heatmap, alpha ).rgb * dotProduct, 1.0 );` – Ben West Mar 28 '18 at 13:18

Combine materials/textures with alpha maps

1 Answers1