How to Engrave Text in a Box Using CSG.subtract?

Questions
1

Hi everyone,

I’m working on a project in Babylon.js and I’m trying to engrave (subtract) some text from a box mesh.

Here’s what I’ve done so far:

  1. Created a box mesh.
  2. Created a text mesh using BABYLON.MeshBuilder.CreateText.
  3. Converted both meshes to CSG.
  4. Subtracted the text CSG from the box CSG.

However, I can’t seem to get the final result to look correct.

Here is a playground with my code:
https://playground.babylonjs.com/#EE8UKY#2

What am I doing wrong? How can I properly engrave text in a box using CSG.subtract? Any guidance or code examples would be greatly appreciated!

Thanks in advance!

2

CSG has its limitations, especially when it comes to holes in other meshes. You can try reverting the roles and achieve something like this - CSG Subtract text from box | Babylon.js Playground (babylonjs.com)

1 Like
3

Imagine you have a pen-ball and press it to another mesh. Here you can see what happens if you inprint on a sphere from different directions:

image

(decal)

The meshwriter itself uses a specifiy syntax to draw lines and curves etc. which you could use to move the pen-ball on the surface.

Copied from another thread:

The MeshBulider.CreateText uses a json.data to draw the fonts.

image
image971×25 11.1 KB

This data representation looks like path coordinates used in vector graphics. It appears to be a sequence of commands and coordinates that define the shape of a path. Here is a brief explanation:

“m” stands for “move to” and indicates the starting point of the path.
“q” stands for “quadratic Bézier curve” and defines a Bézier curve with an anchor point and an end point.
“l” stands for “line to” and draws a line to the specified point.
The pairs of numbers after each command represent coordinates. For example, “m 1129 496” means that the path starts at the position (1129, 496). “q 1123 411 1129 454” means that a square Bézier curve is drawn that has the anchor point (1123, 411) and reaches the end point (1129, 454). And so on for each command in the path.

1 Like
4

Hey! Welcome!

You can use heightmaps to simulate engraving. in/out.

The idea is to create a texture with the text. Use it as a heightmap. Create a plane from it.

image
image1592×822 41.4 KB

image
image1468×838 46.3 KB

Now all you need to do is add some faces to the plane so it becomes a cube. I don’t have time to showcase it now but if you’ll struggle, let me know, I can help you tomorrow.

EDIT: I had another idea to use bumpTexture, did a quick forum search and here you go:

1 Like
5

That’s exactly what I wanted. Thanks for your help!

1 Like