What's the best way to achieve this dynamic switching of visual effects?

screenshots
I want to achieve the effect of changing the material of other objects in the picture when switching the focused object. What tasks do designers and developers need to do respectively? How does babylonjs achieve this effect?

Hi and Welcome to the Community,
Although not an expert in this domain, I’d rather attempt to work this through a node material (NME) post-process. Changing the materials and renderingGroup based on camera input sounds like something that’s very heavy (both to create and implement). Playing around with these parts will also create issues in performance and artefacts.

I’d suggest you have a first look at this post:

I believe the base of this FX created by (guru :grin:) @PatrickRyan can probably be revamped and twisted/enhanced to match your needs :thinking:. There’s a part in his last post around ‘masking’ where I think I did read he was thinking of adding it to the docs, but I couldn’t find it?! May be I didn’t look close enough :face_with_monocle: :dizzy_face: :wink: There will aso be a part around the camera and the ‘focus’ on object selection so it’s probably not the easiest thing to do (but then, if it was, why would need the expert? :joy:)

Now that I called in our expert on this topic (which I believe should be of Interest for him to take as a challenge :wink: :grin:), I’d suggest you wait for his answer (and always to the point analyses). Better than venturing into something that might just be completely inadequate :sweat_smile: Might need a bit of patience though since it’s the weekend :hourglass_flowing_sand:… Meanwhile, again, welcome to our Forum and have a great weekend :sunglasses:

1 Like

I’m sorry, I don’t know if you saw the first answer to your question, but this part of my post quoted above was referring to this first answer… given by… a bot :unamused: (a spam). My/our apologies for that :pray: We instantly removed the post and are working hard on keeping the forum safe from these ‘buggers’. :sweat_smile: :innocent:

As said above, I’d highly recommend you wait for the answer from our expert or other dedicated avanced members of the forum before proceeding (with something that’s fairly complex if not using the correct approach).

Meanwhile, enjoy your weekend :beach_umbrella:

@Buugeed, to achieve this effect, you need to create a clone of your mesh(es) that has the material.wireframe parameter set to true. You can then create two node materials, one for the original material render and a second for the wireframe render. After that, you are free to create whatever look you require.

In my example, I used a node material on the base mesh to interpolate between the base color and a solid color multiplied with the ambient occlusion texture. I left in the normal texure to help with scene lighting, but you could also interpolate to a flat normal color (128, 128, 255) if you wanted to remove surface perturbation when the wireframe is revealed. For the gradient to interpolate with, I used distance to world (0, 0, 0), but you could choose whatever world coordinate you wanted. You could also set it up as a mesh pick and use the world position of the transform to center the gradient. You will need to use values that work with your scene, of course.

For the wireframe mesh, I created a second node material that had the same logic for creating the distance gradient so the two shaders would match up with the same value passed to each. You can set the color of the wireframe based on the color passed to the fragment out, and I passed the gradient to the alpha of the fragment out. I also multiplied the gradient wired to alpha by a float to set the maximum value on alpha. In my case I used a value of 0.1 and chose a color that fit well with the base mesh shader color that it sits over. This way the wireframe feels far more integrated with the color on the base mesh.

This technique will work if you have only one mesh in scene (like I do) or if you have multiple meshes. You will just need to assign the same node materials to each mesh and clone each one for a wireframe mesh. Let me know if you have other questions about the process.

3 Likes