How to create multiple instances of glowlayers with different intensities around the geometrical objects?

Questions
,
1

I want to create multiple glowing objects with different intensity. But it is applying same intensity on all objects. How should I apply two different intensities to glow layer?

    <glowLayer name={'box1'} intensity={2}>
      <box name={'Green1'} position={new Vector3(0.95, 1.1, 5.92)} size={0.15}>
        <standardMaterial emissiveColor={ new Color3(1, 1, 0)} />
      </box>
    </glowLayer>
    <glowLayer name={'box2'} intensity={5}>
      <box name={'Green2'} position={new Vector3(2.5, 1.05, 5)} size={0.15}>
        <standardMaterial  emissiveColor={ new Color3(1, 1, 0)} />
      </box>
    </glowLayer>
 </Scene>
2

You may try to imitate different intensity with alpha channel - https://playground.babylonjs.com/#LRFB2D#322

1 Like
3

@labris thanks for the reply. But in above example, both (object and box) are glowing with same intensity value at the same time. But I want to glow two objects are different value of intensity at the same time.

User should able to observe that one object have higher glow than other.

The code I created, glowing both boxes with same intensity thought different intensity values are given to them.

4

Maybe this example will help - https://playground.babylonjs.com/#LRFB2D#323

2 Likes
5

@labris thank you. I will try like this.

6

@labris in above code https://playground.babylonjs.com/#LRFB2D#323, alpha component is different for both objects, but same intensity is getting applied to both boxes at the same time.
I want to keep alpha component same, but want to apply different intensity to both boxes.

7

Here is the example with 2 boxes and 2 glow layers with different intensity - https://playground.babylonjs.com/#LRFB2D#345

2 Likes
8

Hi @labris, In my scenario, glow is not getting added to the mesh. I have created one mesh having multiple children. and want to add glow to all children in that mesh. I below code, nodeId is name of Parent Mesh.

// To create glowlayer in mesh
useEffect(() => {
let scene = engRef?.current?.engine?.scenes[0];
Object.keys(draggedLightsData).map((key) => {
if (scene) {
let isLayerPresent = scene?.effectLayers?.find((gl) => gl.name === ${draggedLightsData[key].nodeId});
if (!isLayerPresent) {
const gl = new GlowLayer(${draggedLightsData[key].nodeId}, scene);
gl.intensity = 0;
}
}
});
}, [draggedLightsData]);

// To change the intensity of mesh
const onChangeIntensity = (nodeId, intensity) => {
let scene = engRef?.current?.engine?.scenes[0];
if (scene) {
let gl = scene?.effectLayers?.find((gl) => gl.name === ${nodeId});
let mesh = scene?.meshes?.find((mesh) => mesh.name === ${nodeId});
if (gl && mesh) {
gl.addIncludedOnlyMesh(mesh);
gl.intensity = intensity;
}
}
};

<box name={lightData.nodeId.toString()} position={new Vector3(x, y, z)} size={0.1} isVisible={false}>
{lightData?.data?.map((light) => (
<box name={${lightData.nodeId}-${light.outputId}} position={new Vector3(x, y, z)} size={0.02}>
<standardMaterial emissiveColor={new Color3.Magenta()}/>

))}

image
after adding intensity to glow layer, my mesh( displays children meshes only) is looking like in image. But actual glow is not getting displayed.

Can you please help me with this?

9

Can you iterate through child meshes using

and

gl.addIncludedOnlyMesh(submesh)

on each of them?

10

Thank you @Takemura and @labris . It is working as expected.

1 Like
11

I think since you need only meshes getChildMeshes() is better for this operation - TransformNode | Babylon.js Documentation

1 Like
12

Oh I posted wrong link, because I got to that page by getChildren, ofc it is getChildMeshes.

1 Like