Applying Alpha Map to model using material causes model to show up as white

Question

Attempting to use an alpha map to reveal reveal an underlying model according to the alpha maps. Currently the alpha map overrides the model texture and shows as all white.

I've tried loading the alpha map alone and applying it to a material which then gets attached to the object --> Shows the relevant alpha map as white, does not reveal the underlying model as expected

I've tried loading up the alpha map and also the texture into a MeshBasicMaterial --> Shows the full texture with none of it transparent

let material = new THREE.MeshBasicMaterial({
              // map: iceTexture,
              color: '0xffffff',
              transparent : false,
              side: THREE.DoubleSide,
              alphaTest: 0.5,
              alphaMap: this.alphaMaps[0]
            });

The current result is that the alpha map shows as all white --> Current Output

This is the underlying texture I expect to be showing (just where the alpha map allows it to) --> Underlying Texture

NOTE: I am currently not using any shaders, the underlying model is a simple glb with the ice texture above applied

NOTE 2: In this answer It says to add in a second object behind the first object...that does not work, it just shows the object on top with no transparency applied

I'm having a hard time understanding what you're trying to achieve. When you say "underlying texture", do you mean that there is a second `Mesh` under the one you're applying the `alphaMap` to? Or is it all in one single mesh? It looks like you've commented out `map: iceTexture`, which means there's no texture to sample, and it'll default to a white color, which you declared with `0xffffff`. From the looks of your screenshot, it's behaving as expected. — M -, Aug 02 '19 at 00:27
@Marquizzo I tried it both ways, with the iceTexture uncommented (the map and alphaMap on the same material) it simply renders the full 'Underlying Texture' without any transparency at all. I've also tried having two meshes, one with the alphaMap applied to the glb which has the ice texture and the other which is a second instance of the glb without any alpha Map applied and it renders the full 'Underlying Texture' again. The goal is to have this ice (what you see in the 'Underlying Texture' link) be revealed slowly as if a lake were freezing over. — Evan M. Rose, Aug 02 '19 at 01:32
What does `this.alphaMaps[0]` look like? Keep in mind that the `.alphaMap` [only reads the green channel](https://threejs.org/docs/index.html#api/en/materials/MeshBasicMaterial.alphaMap), not the alpha channel. If you want a growing transparency, you'd need to have a green to black gradient. — M -, Aug 02 '19 at 01:35
Here is the first alphaMap png which is [0] in the array I constructed--> [link](https://pasteboard.co/IqL4Iuu.png) Here is the final alphaMap png which is [49] in the array I constructed--> [link](https://pasteboard.co/IqL561U.png) — Evan M. Rose, Aug 02 '19 at 01:37
It is imported like this `const alphaMap = new THREE.TextureLoader().load(fileStr)` — Evan M. Rose, Aug 02 '19 at 01:48

M - · Accepted Answer · 2019-08-02T02:08:12.513

I think the line that's messing you up is transparent: false, when it should be transparent: true. I just tried the code below (click here for a live CodePen demo), and the transparency works as expected. I also don't think you need alphaTest: 0.5, since it seems you have an animation sequence that moves the gradient.

In the demo, I use this image as the alphaMap:

... and this image as the regular map:

The essence of the code is below:

// Load the textures
const texLoader = new THREE.TextureLoader();
var alphaTexture = texLoader.load("https://i.imgur.com/aH0jI5N.png");
var mapTexture = texLoader.load("https://i.imgur.com/qdWJkbc.jpg");

// Create geometry
var geometry = new THREE.PlaneBufferGeometry(10, 10, 10, 10);

// Create a basic material
var material = new THREE.MeshBasicMaterial({ 
  map: mapTexture,
  alphaMap: alphaTexture,
  transparent: true
});

var plane = new THREE.Mesh( geometry, material );

Thanks for this. There were a few other wrinkles but this got me there. For anyone looking who is trying to do this in A-Frame...you cant use the `a-plane` primitive. You need to use `a-entity` and then create the mesh like the snippet above then use `setObject3D` to add it to the scene — Evan M. Rose, Aug 02 '19 at 06:59

Applying Alpha Map to model using material causes model to show up as white

1 Answers1