Setting Alpha in vanilla material doesn't work.

[supermoos]

export class JourneySphereMaterial extends LayerMaterial {
    constructor() {
        super({
            color: 'white',
            lighting: 'physical',
            transparent: true,
            transmission: 1,
            // @ts-ignore
            thickness: 0,
            alpha: 0.8,
        });
//This doesn't work, nor does using opacity.
        this.alpha= 0.2;
    }
}

[FarazzShaikh]

The alpha does indeed work: https://codesandbox.io/s/lamina-vanilla-blob-forked-hsyz2s?file=/src/index.js:379-429

Notice: for material alpha to be <1 all fragment layers alpha (if any) should also be <1

[supermoos]

Hmm, your demo doesn't seem to work, I forked it here: https://codesandbox.io/s/lamina-vanilla-blob-forked-7870z8 - line 23 should hide the material right? Or am I missing something?

[FarazzShaikh]

Here this works: https://codesandbox.io/s/lamina-vanilla-blob-forked-k10nmf?file=/src/index.js

alpha is a uniform, there is no setter for alpha or baseColor yet, I will fix this soon. For now, we can call this.refresh(); to manually rebuild the material after you update the alpha.

[supermoos]

Hmm, was that maybe the wrong link? Seems the code is from an unrelated demo?

Should this work then? Cause it doesn't seem to :-) this.uniforms['u_lamina_alpha'].value = 0

[FarazzShaikh]

Sorry about that. Fixed via 1.1.12

Here this example works: https://codesandbox.io/s/lamina-vanilla-blob-forked-4sy17k?file=/src/index.js

Couple notes:

• You need to set transparent: true in the constructor for it to be transparent
• All layers must have an alpha of >1 for it to be transprent

[supermoos]

Thanks for working on this! Your example doesn't seem to work though, I'm still seeing a red cube, I should be seeing nothing right? ?

[supermoos]

Here's a fork illustrating the issue: https://codesandbox.io/s/lamina-vanilla-blob-forked-p46uly This should render a 0.1 alpha blue blob as far as I can deduce?

[FarazzShaikh]

Can you try with 1.1.13? I updated the blend mode math to facilitate that scenario. Does this box look good?

https://codesandbox.io/s/lamina-vanilla-blob-forked-wtjf9q

[supermoos]

Yes I think so :-) Thanks so much for the effort!

[shot-codes]

I have this working with the following. Note I don't need to set alpha or transparent. The odd thing is that I get a linting error for the thickness prop, despite it working.

export class CustomLayerMaterial extends LayerMaterial {
  constructor(layers: Array<Depth | Displace | Fresnel>) {
    super({
      lighting: "physical",
      roughness: 0.2,
      transmission: 0.5,
      reflectivity: 1,
      thickness: 0.4,
      layers
    });
  }
}