Node Material: Dissolve Effect

[gbz]

Hi all!

Trying to make a dissolve effect, as shown in this video at time 7:59:

DISSOLVE using Unity Shader Graph

The node setup and dissolve effect are shown at time 7:59 in the video.

Here’s an attempt of making this in NME: https://nme.babylonjs.com/#20DWTX#1

I’m not sure how to isolate the diffuse red color and the emissive blue color. I tried copying the node setup in the Youtube video at 7:59.

The goal is to have a full red sphere at the beginning. Then, over time, holes with blue emissive/glowing outlines will appear and grow until the red sphere fully disappears.

At 7:59 in the video, the emission is being input into a Emission input in a PBR Master node. Could someone please show how we could do this in Babylon NME? Thank you!

For reference, the Perlin noise texture used is attached:

[Evgeni_Popov]

You can try to use a gradient as it is done in the post process example of the NME doc (How To use the Node Material - Babylon.js Documentation):

https://nme.babylonjs.com/#D0USYC

[gbz]

Thank you so much, @Evgeni_Popov!

Unsure if I’m using Gradient the right way, but it looks a lot cleaner thanks to your suggestion! https://nme.babylonjs.com/#20DWTX#2

Here is a playground using the Node Material: https://playground.babylonjs.com/#C6LD7D#1

Please wait a few seconds for ParseFromSnippetAsync to load the Node Material

Could someone please shed light on how to add glow/emission to only the blue outlines, similar to the examples in Make Mesh Glow - Babylon.js Documentation and Babylon.js Playground?

[PirateJC]

The creator of that playground effect @PatrickRyan put together this awesome video explaining how he got the glow effect set up.

Node Material Glow Effects

[gbz]

Thank you so much for sharing this awesome video, @PirateJC and @PatrickRyan!

I may not be understanding this fully, though it seems like the emission is coming from the lightMat material (bordered in red in the image below), which comes from importing lightFixture.glb.

I’m not sure how we could use this approach to apply emission to only the blue outline (not the whole red sphere) in the Playground above (where we are not importing .glb or other models with emissive materials defined in Blender or other modeling softwares).

[PatrickRyan]

@gbz, the material that was imported on the mesh that represents the light was replaced after load with the custom node material. So the loaded material is not used and this technique works with a Babylon node material. The material lightNodeMat is the node material that is applied to the mesh on line 42 of the playground:

The important part of lightNodeMat is this part:

The glow mask will isolate the color that are passed to the glow layer which is the color taken from the emissive texture. You then need to let the glow layer know to use the node material like this:

All of this is in the video, but if you have specific questions, please let me know.

[gbz]

@PatrickRyan, could you please shed light on how Babylon knows to treat the Block named emissiveTexture as an emissive texture? When looking into that Block, under Source Link, it says lightMat (Emissive), though I’m not sure how this Link is referring to the cyan texture image.

I’m confused how Babylon knows to treat the emissiveTexture Block as emissive when calling

var gl = new BABYLON.GlowLayer("glow", scene);

but somehow Babylon knows to treats the baseColorTexture Block as not emissive.

[PatrickRyan]

@gbz, the name emissive texture on the node is simply for ease is grabbing the node and assigning the texture. There is no difference here from any other texture. The reason that the emissive texture is the one that is passed to the glow layer is because of the glow mask portion of the shader above:

You can see here that when I set glow mask to 1.0, you only see the emissive texture:

Setting it back to 0.0 you will see a mix of the base color and emissive textures so you get a tint of the emissive color in the base color:

This is the important part because in this code:

// enable glow mask to render only emissive into glow layer, and then disable glow mask
    gl.onBeforeRenderMeshToEffect.add(() => {
        glowMask.value = 1.0;
    });

We are saying that before you apply the glow layer, set the glow mask value to 1.0. That will show only the emissive texture on the mesh and the glow effect will render. Then once that pass is done, you get this code:

        gl.onAfterRenderMeshToEffect.add(() => {
        glowMask.value = 0.0;
    });

Which says that after you are done with rendering the glow layer (which is rendered first and then added to the normal scene render) you return the glow mask value to 0 and render out the mesh with it’s normal texture.

This code is called first and is used to make sure that the mesh uses it’s own material for the glow layer or the onBeforeRenderMeshToEffect and onAfterRenderMeshToEffect will have no effect on the scene:

// set up material to use glow layer
gl.referenceMeshToUseItsOwnMaterial(lightMesh);

So basically, if you tell the glow layer to allow a mesh to reference it’s own material for glow, it will just use that material and the glow will be wrong. Using the trick above with onBeforeRenderMeshToEffect and onAfterRenderMeshToEffect will allow you to isolate the fragment output to only the emissive texture to pass to the glow layer. Hope this makes sense.

[gbz]

Thank you so much for taking the time to explain GlowLayer and emission in such detail, @PatrickRyan! Will be trying to implement your approach on the dissolving sphere!

Just adding

var gl = new BABYLON.GlowLayer("glow", scene);
gl.referenceMeshToUseItsOwnMaterial(sphere);

gave a beautiful effect: https://playground.babylonjs.com/#C6LD7D#2

Will be tweaking this Playground more

[gbz]

Thanks to @PatrickRyan, @PirateJC, @Evgeni_Popov, the updated dissolve animation looks great!

https://nme.babylonjs.com/#20DWTX#5

https://playground.babylonjs.com/#C6LD7D#4

[Evgeni_Popov]

Nice!

To avoid over-exposition because the glow layer is performed over the whole sphere, you can use the same trick than @PatrickRyan to have only the blue color being emissive:

https://playground.babylonjs.com/#C6LD7D#5

Starting frame:

Left: material without glow layer - Middle: updated material with glow layer - Right: your material with glow layer

As you can see, 1 and 2 are the same but 3 is over exposed.

One frame during animation:

Note that setting the clear color alpha value of the glow layer to 0 (gl.neutralColor.a) allows to get rid of the artefact around the sphere, so no need to add an animation that fades out the glow intensity.

[gbz]

OMG thank you @Evgeni_Popov, this is beautiful Thank you for taking the time to improve the effect. I really like how your effect is sharper, and thank you for showing us how to remove the outer border!

[Adrian_Meredith]

This playground no longer works on version 5! thought you might like to know!

[gbz]

Thank you for finding this, @Adrian_Meredith!

I’ve pasted the console log error but am currently unsure what is causing this:

babylon.js:16 Uncaught TypeError: i.setValue is not a function
    at t.initializeDefines (babylon.js:16)
    at babylon.js:16
    at Array.forEach (<anonymous>)
    at t._processDefines (babylon.js:16)
    at t.isReadyForSubMesh (babylon.js:16)
    at t.e._isReady (babylon.js:16)
    at t.isReady (babylon.js:16)
    at e._isReadyForMesh (babylon.js:16)
    at t.isReady (babylon.js:16)
    at t._checkIsReady (babylon.js:16)

[Evgeni_Popov]

Thanks for the report, this PR will fix the problem:

Fix wrong draw cache when changing material