Engraving effect using babylon

[shaderbytes]

nice finding something to use here

[mawa]

I agree with the above replies. I believe a colored base only as an input might be hard to handle.

@shaderbytes

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.

This was also my thought and issue. It’s just much better explained here, obviously

From there, I would bounce again on my question regarding UX: “Would yours think it’s acceptable to have the user upload a plain black or white version of the logo (ideally in PNG with transparency)?”
I suppose it depends on the platform and type of user. If it’s a platform for pros, I suppose these rules and limitations could be handled. If it’s for the basic end-user, don’t know? And then, in production of the real thing (assuming this is the goal, is it?), engraving on different surfaces and shapes can have some very different aspect and limitations. It might be tricky to show the customer something that does not reflect the final product. I would be careful with this part but then of course, my opinion only.

[mawa]

Yup, nice finding. I’m gonna bookmark this one just in case. Thanks for sharing and have an awesome weekend

[tulashi]

yeah, we can allow user to upload only white png logos

[mawa]

That’s good news and kinda solves the major issue . We can assume that the user will upload the base of what can serve as a heightmap texture that can eventually be converted to normal/bump. Eventually we’ll ask for a plain black on white background (or the other way round or for whatever simple rules best suit the method).

Now, question is: Where do you stand from here? Do you still need help or are you able to work it from here or make progress on your side, eventually requesting help on a specific aspect later on? …Knowing that, eventually, it won’t be me giving you the final ‘out-of-the-box’ solution. I’m not sure I can commit to this at this moment in time (but hopefully some of the others will have more time?).

[tulashi]

I had already worked on this approach, I used the white png as bump texture. But the result was not convincing. CreateGroundFromHeightmap worked for me by increasing the number of subdivisions. but I could not apply the height map on a mesh form my glb. So, Is there any wat to apply the height to the mesh as well? That would be good. I have tried different approaches, and spend a lot of time but couldn’t find the best out of it.

[mawa]

Yes, I understand. Point is you cannot use the white png straight as a bump texture and a ground from a height map doesn’t really work as a solution for this use case for me.
We should put things in order first. Starting with some context. I assume you are not doing just a simple mug, are you? Am I correct when assuming that you creating an app that let’s a user customize a number of merch items to order the real thing? Or is it something different?

If my assumption is correct, I would assume you are creating the base for each merch item, based on the rules and limitations from the company/client who is producing the final/real thing, is it?

If that’s what it is (or for whatever else it is), the first thing (in my opinion) would be to choose from a method/workflow. At this point, we can imagine something around decals, a dynamic texture and/or a node material. I would (personally) leave the displacing of meshes vertices as it seems a bit too hard to master (read too fancy), but again, personal opinion.

As said by @labris I also believe the fx (using material) would be better if applied to the mesh directly. Else, the underlaying mesh of mug behind the ‘customizable area’ will eventually interfere. But then again, this is just a thought at first, not knowing about the entire scope and context… which you might want to share with us now for better input? …

EDIT: If (and only if) you are creating a customizable merch items app, this thread might be of interest to you. Although it does not include the ‘engraving’ part. But then, the ‘engraving’ would be just something added. The rest of the process, thinking, workflow and chosen method still applies.

Babylon project help

Hello, I am hired on a customizer project and I am thinking about the ways how would I be able to do something like this. I saw that I can separate geomerties on a plane like this. So I would use the plane and add one geometry on it, and I would enable user to add image on the geometry where the coordinates of the image could be copied and placed on a real mesh. The question with this is: How do I get the face where to place the image on the mesh? Since I have never used coordinates I am won…

And then the blog created around this subject:

Creating a Product Customization Experience with Babylon.js

And a direct link to the playground (worth looking at):

Babylon.js Playground

[tulashi]

Thanks, @mawa , and everyone who took part in this. I truly value the insights you all provided. It was wonderful engaging with the community.

[mawa]

No worries. You are welcome any time . I know I’ve been asking more questions then providing a straight-forward solution to just the title of your post. That’s because it’s basically what I do, as a PM and artDir. Can’t help it, sorry. But I do understand you may want to keep with a level of ‘secrecy’ eventually. Or else, may be I wasn’t on track on this one Anyways, since you didn’t ‘mark a solution’ yet, Others, that are better than me at just providing the answer without questionning might still give you their version solution …And if you can figure it out by yourself, that’s even better and we’ll give you all the credit for it. Meanwhile, have a great weekend