How to remove an emissiveColor / make an item flatly colored and not glowing

Questions
1

Hi!

I have a sample here that shows my problem. When balls get hit, I want them to glow for 30 or 45 frames or so, then make them stop glowing. However when I try to remove the glow by setting thisItem.materials.emissiveColor = null; my whole app crashes lol!

Falling balls that make blocks glow | Babylon.js Playground (babylonjs.com)

I’m doing this by adding an emissiveColor effect to the items and also setting a paired glowFrames property, then pushing the item into an array called glowingIndicators .

In my register before render, I call a method that iterates through the items in the glowingIndicators array, and debit 1 from every item’s glowFrames. When glowFrames is zero, I am trying to remove the item from the array and then change it from emissiveColor to diffuseColor.

function updateGlowingIndicators() {    
    for (let i = glowingIndicators.length - 1; i >= 0; i--) {
        const thisItem = glowingIndicators[i];
        thisItem.glowFrames--;

        if (thisItem.glowFrames < 1) {
            // Log when the condition is met            

            // Check if the mesh is currently glowing
            if (glowLayer.hasMesh(thisItem)) {
                // Remove the mesh from the glow layer
                glowLayer.removeIncludedOnlyMesh(thisItem);
                console.log(`Removing item at index from glowLayer glowFrames reached less than 1`);

                // // Optionally, dispose of the glow layer if no other meshes are included
                // if (glowLayer.isEnabled && glowLayer.getRenderingMeshes().length === 0) {
                //     glowLayer.dispose();
                // }
            }

            thisItem.material.diffuseColor = thisItem.material.diffuseColor;        

            // Set emissiveColor to null makes it crash!
            // thisItem.material.emissiveColor = null;

            // try{
            //     glowingIndicators.splice(i, 1);
            // }
            // catch{
            //     glowingIndicators = [];
            //     break;
            // }
        }
    }
}
2

I am not sure that I completely understand how colors should change, but there is no crash with thisItem.material.emissiveColor = BABYLON.Color3.Black();
Example - https://playground.babylonjs.com/#VLCWD9#36

1 Like
3

This is great, thank you!

Here’s what I am trying to do if you can help me figure it out, that would be amazing!

When a block is struck, I assign both its suffuseColor and emissiveColor to the same color. I want the block to glow until it’s timer runs out, and then just be the plain suffuseColor and not glow.

Basically not too far off from this one, which sporadically glows. However in my case, it would glow at max brightness then not glow at all.

Node Material Glow Layer | Babylon.js Playground (babylonjs.com)

Thanks for your help :slight_smile:

4

Falling balls that make blocks glow | Babylon.js Playground (babylonjs.com)
Is this the effect you want?
In addition, the sphere and its materials created in the example are not cleared in time, and the frame rate will be severely affected by long runs.

4 Likes
5

Wow Xiehang! You really helped so much! Thank you for adding handling for the maximum life span of the spheres too. I had never heard of albedo color so it was really helpful for me :slight_smile:

6

PBRMaterial | Babylon.js Documentation (babylonjs.com)
This is PBRMaterial, which has more channels than StandardMaterial.
albedoColor - The base color, which is calculated with the light, is almost equivalent to the diffuseColor of the StandardMaterial.
unlit - Turns off the calculation of materials and lights.
emissiveIntensity - It is easier to control the emissive intensity, and you should be able to achieve a similar effect by dynamically calculating the rgb value of the emissiveColor yourself, the lower the rgb value, the lower the emissive intensity.

2 Likes