Skip to content
This repository has been archived by the owner on Apr 5, 2023. It is now read-only.

Setting Alpha in vanilla material doesn't work. #25

Closed
supermoos opened this issue Apr 7, 2022 · 10 comments
Closed

Setting Alpha in vanilla material doesn't work. #25

supermoos opened this issue Apr 7, 2022 · 10 comments
Labels
bug Something isn't working

Comments

@supermoos
Copy link

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
Copy link
Member

FarazzShaikh commented Apr 7, 2022

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
Copy link
Author

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
Copy link
Member

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.

@FarazzShaikh FarazzShaikh added the bug Something isn't working label Apr 7, 2022
@supermoos
Copy link
Author

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
Copy link
Member

FarazzShaikh commented Apr 11, 2022

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
Copy link
Author

supermoos commented Apr 12, 2022

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?
Screenshot 2022-04-12 at 12 12 24
?

@supermoos
Copy link
Author

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
Copy link
Member

FarazzShaikh commented Apr 12, 2022

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

@FarazzShaikh FarazzShaikh reopened this Apr 12, 2022
@supermoos
Copy link
Author

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

@shot-codes
Copy link

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
    });
  }
}

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants