Dynamic Texture projection after a CSG subtraction

Hi All, in 2017 JohnK helped me with a custom extrusion which I then perform CSG subtraction.

I used a multi material and it looks nice with the indented part in green.

I am trying to have a dynamic texture which fits the base object but continues onto the green material.

So in my playground, I need to have the american flag cover the green part inside the rectangle.

I also would like the sides and bottom of the mesh to look like before without the dynamic texture.

I spent hours looking at projection mapping and uv stuff but I can’t figure it out.

Here is the playground that shows the dynamic texture with the american flag.

https://playground.babylonjs.com/#BC4XLY

Thanks!

If you want the flag to be pasted all over the green part as well you will either need to cut the texture correctly and set it there or use a single material with correct uv mapping.
“correct uv mapping” is a rather interesting subject :slight_smile: First it is your decision how uvs are mapped around this kind of object. There are tools that can help you here, but if you want to do it programmatically you will need to know where each point is and assign the right uv coordinates for it.

As your object is planar you can try to generate the texture coordinates from the x/z coordinates of the vertices:

https://playground.babylonjs.com/#BC4XLY#1

However, the diffuse texture applies to the whole mesh, so even the back part of the mesh is textured with the flag… I think you would need to split the object into two parts if you want different texturing on the front/back.

@Evgeni_Popov This is great! Thank you SO much for your help! I think this will work for me.

Question, I added another shape and it has a plain background. (shapes will be polygons as well as rectangles…)

What would I need to do to have it work for all indentations?

Here is the new playground

https://playground.babylonjs.com/#BC4XLY#2

Thanks!

You should either add a new material to the multi material to account for the new submesh, or simply disable submeshes when calling cCSG.toMesh (4th parameter to false).

Disabling submeshes worked!

When would be a good reason to use submeshes?

Thanks!

When you need different materials for different parts but still want a single mesh (for ease of use, as opposed to having one mesh per part), but in your case you wan’t the same material applied for the whole mesh.

Thank you for the explanation.

I have one last question which I hope will be my last.

In my application I have switched the axis (it was so long ago so I don’t remember exactly) but my z goes up and down.

It’s kind of hard to see but the texture is ending up on the side instead of the face.

Instead of x and z, would i change to y and z somehow?

Sorry, I don’t understand the picture nor the question(?)

@Evgeni_Popov I was able to figure it out and it works really great!

I can’t thank you enough!!!

1 Like

Thanks to @Evgeni_Popov I have the texture mapping nicely.

My problem is that I really can’t have the texture on the sides of the interior indentations.

So just need black walls there and not the flag.

Any ideas?

https://playground.babylonjs.com/#BC4XLY#3

I’m thinking there are at least two ways to do this. (I haven’t tried these myself.) One would be to add geometry for the vertical walls and use a different material on them (or maybe change the normals to face a direction >180 degrees of the light to make them black). Another would be use a custom shader with derivative (dfdy, dfdx) checks to black out the vertical parts.

1 Like

Hi @Evgeni_Popov, it turns out my idea for getting the sides and bottom to be solid did not work… You mentioned somehow splitting the object into two parts so I can get a different texture for sides and bottom? How would I go about doing that? Thanks!

I don’t really know how you can create separated objects, as you are using CSG… The easiest way would be to build it in Blender or a DCC tool like that.

You can also apply the idea from @bghgary regarding usage of the derivatives:
https://playground.babylonjs.com/#BC4XLY#4

You can change the color of the back line 177 and the color of the vertical parts lines 226 and 227. It is currently (0.2, 0.2, 0.2) = dark grey.

1 Like

@Evgeni_Popov This is perfect! exactly what I need.

I am getting this error : matPrinted.Vertex_Definitions is not a function

Maybe I have an old version of Babylon?

I don’t know, I think Vertex_Definitions exists for a long time. We can’t test in the Playground for the time being, however, as using an older version of Babylon is broken at the time (should be fixed today).

I upgraded the version and still get the same issue

mat1.Vertex_Definitions( varying vec3 vLocalPos; );

It is thinking that this is a function.

I wonder why it works in the Playground…

** UPDATED - I forgot to change the standard material to CustomMaterial. Works now **

@Evgeni_Popov Almost working perfectly!

In my production code, I needed to switch the Z direction by rotating the mesh before my CSG.

Bottom line, using this change,
matPrinted.Fragment_Custom_Diffuse( vec3 d1 = dFdx(vLocalPos); vec3 d2 = dFdy(vLocalPos); if (abs(d1.z) > 1e-3 || abs(d2.z) > 1e-3) baseColor.rgb = vec3(0.2, 0.2, 0.2); );
I was able to modify your code a bit to get the Texture on sides (in what is now my Z direction to turn black. but the bottom still has the texture

I have tried everything I could think of but can’t figure out how to keep the top texture and turn the bottom black… ) here is snapshot of the bottom with some subtracted meshes

Thanks!!!

In this formula:

if (abs(d1.y) > 1e-3 || abs(d2.y) > 1e-3 || vLocalPos.y < 0.5) baseColor.rgb = vec3(0.2, 0.2, 0.2);

it’s the vLocalPos.y < 0.5 which is handling the color of the flat part under the part. You will need to adapt it if the top/bottom axis is not the Y axis for your mesh.

@Evgeni_Popov I was able to use this if (vLocalPos.z > 5.75) baseColor.rgb = vec3(0.2, 0.2, 0.2); and ir worked nicely.

Is there a way to make the vLocalPos.z > 5.75 to work with a variable? like vLocalPos.z > shapeDepth

Thanks!