I want to create an engraving effect from a logo on a glb model. How can i achieve this using babylon js. I used a normal map baked in blender, It works but it is just for a single logo. each time i add new logo i need new normal map. Can anyone help?
Hi and welcome to the Community,
I would consider using a material with Parallax occlusion. Then, either clone the material or make a procedural material to create for all your logos/images. Parallax occlusion works fine with both standard and PBR mats.
Here a couple of links that should help you get a grasp on it:
I hope this helps. Else, let us know and meanwhile, again, a warm welcome to our Community and have a great day 
EDIT: Forgot to mention, you can invert the values to create âengravingâ FX.
EDIT1: Just recalled another link that might be more straight forward. It also shows how it can work with a dynamicTexture.
A quick and dirty PG illustrating engraving FX from this base:
3 Likes
long time ago I created a method for this.
Decal with impression | Babylon.js Playground (babylonjs.com)
3 Likes
Thank you for the resources. Can you provide examples in which images are engraved. Iâm not able to achieve the effect with images
I think you can use height map:
1 Like
Can you help me with applying the height map in other meshes as well? CreateGroundFromHeightMap it is just applying height map to a ground and im not able to replicate same effect on any other meshes of the glb model
Here is what I want
BABYLON.SceneLoader.ImportMesh(ââ, â./â, âbeach.glbâ, scene, (meshes) => {
for (var i = 0; i < meshes.length; i++) {
if (meshes[i].name === âengraving-meshâ) {
// here i want to apply the engraving effect to the mesh. I want to apply height map here
}
}
});
CreateGroundFromHeightmap, as it says, can only be applied to a ground mesh. 
1 Like
Hi, Just came back to this topic incidentally.
I didnât realize you wanted to use a mesh for the engraving. From your original post, I thought it was a logo (an image/texture). Thus, the idea of using a dynamicTexture. The methods shared above change the geometry. I like the one from codingcrusader (always very inspired) but then, somewhat complex, depending on the actual use case. Itâs similar to a custom CSG operation (where CSG as a number of issues and blackholes). So, may we ask again, what is your actual case? Could you share a (non-working) PG or some more details towards whether your âengravingsâ shall be based on meshes/geometry or textures? I guess that would help us make more accurate proposals for the use of a method. Meanwhile, have a great sunday
2 Likes
hello, I was offline due to some reasons
here is the playground link: playground. I want to engrave the google logo. Can you helo me with this ??
the logo can change
Do you mean it is the user uploading the logo? Or is it from a set of image you pre-create and make available?
In essence, in order to use parallax youâre gonna need a bump/normal texture.
I would need to create the one for your example, so here is just a simple example from the available asset library (just for your understanding of how parallax works)
Now, you could attempt to generate one on the fly, eventually requesting the user to upload a plain black or plain white logo/image as a base for the bump and for a better result.
I think I remember there have been some threads and examples in the forum around this topic.
Give me a moment to search for it⌠Else, meanwhile, somebody eventually has it at hand.
1 Like
user will upload the logo
Well, I found a couple of threads but they are somewhat confusing for me. Normals are generated from a heightMap and the solutions are based around either creating a node material or using decals.
With the information above you provided, best is I call-in the expert who provided most of the solutions for similar use cases: @Evgeni_Popov Would you kindly reply and enlight (us) on this? 
1 Like
Probably decal textures may help here - https://playground.babylonjs.com/#9BVW2S#70 (click on alien to put logo anywhere).
1 Like
Yes, I thought about that, but the problem remains the same: Itâs still missing the engraving FX.
1 Like
As @mawa said, you would need either a normal map texture (if you want to use standard bump mapping), or a normal map + height texture (height in the alpha channel) for parallax mapping (see Parallax Mapping | Babylon.js Documentation for more context and comparison between bump, parallax and parallax occlusion mapping).
I donât really know how to automatically generate a normal / height map from a colored 2D picture, though⌠Maybe some artists would have some pointers?
1 Like
Here is the mug with dynamic normal level change - https://playground.babylonjs.com/#7EI5MA#5
Not very impressive, though.
I think one reason is that the texture applied not to the cylinder but to the âareaâ mesh.
1 Like
normally a color threshhold to get a black and white result , maybe invert if needed , maybe blur filter ( unless code doing normal map includes blurring ) , can use libraries like pixijs , that have many filters available. I cant gaurantee about threshold , but even that code could be found somewhere on the interwebs.
of course this technique has limitations and the input image should try to meet some expectations to make it work , logo is on either black bg , white or transparent. logo pixels cant have any of these expected background pixels within its edges , else the threshold assumes them as background.
converting to normal would also require finding some code online. I know the gimp application has this filter and that is open source , so I presume the code could be sourced as well. ( well sourced and ported to js ) edit , @labris seems to have found something for you
otherwise the grayscale used as heightmap would work , just not as good as a normal map.
so in the end all is possible with *some research and time 
*some - could mean many days or weeks even until you have it working or hit a dead end and decide to move along without it
4 Likes