I’m working on a new menu for my game and used the simple scene and mirror for a transparent plane that gives reflections from this PG:
Evrything worls great but when a mesh with a glow layer, and a mesh with no glow layer intersect, the glow layer makes the other mesh transparent and the glow is visible.
I tried setting:
material.needDepthPrePass = true; //
And also messed around with alpha index values for the glow layer, but I either get no glow at all, or the “jetpack” box still becomes transparent. I know this will be basically one line or one value to change to make this work, but I can’t seem to get it right.
private createSceneElements(): void {
// Create a camera pointing at the model
this.scene.createDefaultCameraOrLight(true, true, true);
const camera = this.scene.activeCamera as ArcRotateCamera;
camera.radius = 10; // Adjust the radius to move the camera further
camera.useAutoRotationBehavior = true;
camera.beta -= 0.7;
camera.upperBetaLimit = 1.45; // Ensure the camera stays above this beta value
// Dispose of the default light and create a directional light
this.scene.lights[0].dispose();
const light = new DirectionalLight("light1", new Vector3(-2, -3, 1), this.scene);
light.position = new Vector3(-6, 9, -3);
light.intensity = 0.7;
// Create a shadow generator
const generator = new ShadowGenerator(512, light);
generator.useBlurExponentialShadowMap = true;
//generator.blurKernel = 32;
// Create a capsule mesh
this.visualMesh = MeshBuilder.CreateCapsule("playerVisual", { height: 2.5, radius: 1 }, this.scene);
this.visualMesh.position.y = 1;
// Create and assign a Standard material
const material = new StandardMaterial("sciFiMaterial", this.scene);
material.diffuseColor = new Color3(0, 0.2, 0.7); // A dark base color
material.specularColor = new Color3(0, 0.2, 0.2); // Set specular color to black to reduce reflections
material.specularPower = 64; // Adjust specular power to control the shininess (higher value = smaller, sharper highlights)
material.roughness = 0.8; // Increase roughness to make the surface less shiny
material.emissiveColor = new Color3(0, 0.18, 0.3); // A bright, sci-fi blue emissive color
material.needDepthPrePass = true; // Ensure correct rendering orde
// Apply the material to the capsule mesh
this.visualMesh.material = material;
// Add capsule to shadow caster
generator.addShadowCaster(this.visualMesh);
// Add glow layer to the scene to make the emissive parts of the material glow
const glowLayer = new GlowLayer("glow", this.scene);
glowLayer.intensity = 1.1; // Adjust glow intensity
glowLayer.addIncludedOnlyMesh(this.visualMesh); // Include the capsule in the glow layer
// Set rendering group ID to ensure it renders after opaque meshes
//glowLayer.renderingGroupId = 0; // Render after the ground and stripes
// Set rendering group ID to ensure it renders after opaque meshes
// this.visualMesh.renderingGroupId = 2; // Render after the ground and stripes
// Set alphaIndex to control the render order within the same rendering group
//this.visualMesh.alphaIndex = 1;
// Create a default environment with ground mirror enabled
const helper = this.scene.createDefaultEnvironment({
enableGroundMirror: true,
groundShadowLevel: 1,
});
helper.setMainColor(Color3.Teal());
// Create the jetpack
this.createJetpack();
// Create the kicking diamond
this.createKickingDiamond();
}
private createJetpack(): void {
const jetpack = MeshBuilder.CreateBox("jetpack", {height: 1, width: 1, depth: 0.3}, this.scene);
// Position the jetpack relative to the player's visual mesh
jetpack.position = new Vector3(0, 0.25, -4.2); // Adjust these values as needed
// Optionally, set the jetpack's material or use an existing one
const jetpackMaterial = new StandardMaterial("jetpackMaterial", this.scene);
jetpackMaterial.diffuseColor = new Color3(0.5, 0.5, 0.5); // A simple gray color for the jetpack
jetpackMaterial.needDepthPrePass = true; // Ensure correct rendering order
jetpackMaterial.alpha = 1; // Ensure the material is fully opaque
jetpack.material = jetpackMaterial;
// Parent the jetpack to the visual mesh so it follows the player
jetpack.parent = this.visualMesh;
// Set rendering group ID to ensure it renders after opaque meshes
jetpack.renderingGroupId = 2; //
// Set alphaIndex to control the render order within the same rendering group
jetpack.alphaIndex = 1;
}
It’s strange as in another file I don’t seem to having this issue. Not sure if I’m missing something here… Any help would be super appreciated! 
Here are some screenshots to show the issue:
Box is not transparent, glow works:
Box becomes transparent when overlaps capsule mesh with glow:
When I add the alpha index value to the glow value, and no matter what I change it to, the box is opaque, but there is no glow.
