solved Creating windows - make object behind transparent

[tomer]

Hello,

I want to create a wall with windows -  the wall is 2d and the window is a simple 3d model and I want the light to go through the window naturally.

The way I'm doing it now is based on floor plan tutorial - creating a wall Mesh with a "hole" for the window and then position the window mesh at the same place.

But... this code is getting pretty dirty, I need to support more than 1 window per wall, and I also want to update the window's position and wall size.

So I was thinking maybe there is a better way of doing it?

Is it possible to create the simplest wall (just a plane object) and define the window in a way that everything (can only be the wall) behind him doesn't get rendered?

 

To better explain what I mean here is a stupid illustration I made:

A - what I'm doing now (draw all the rectangles I need to do when there's a window on the wall)

B - What I want to do (only a simple wall but just a part of it sometimes not rendered)

 

* walls are can only be straight

* rooms I support only square rooms at the moment

 

Thoughts, anyone?  Thanks!

Tomer

[adam]

This PG should be helpful:

https://playground.babylonjs.com/#2DT16W#9

[tomer]

16 minutes ago, adam said:

This PG should be helpful:

https://playground.babylonjs.com/#2DT16W#9

Thanks for the quick reply! 

But, I think I didn't get it - which part should be helpful?

[adam]

Take a look at spotPlain.  You can use a texture with transparency to create your windows.

This might be a problem, though:

"and I also want to update the window's position and wall size."

You would need to create your texture dynamically using an offscreen canvas.

[tomer]

55 minutes ago, adam said:

Take a look at spotPlain.  You can use a texture with transparency to create your windows.

This might be a problem, though:

"and I also want to update the window's position and wall size."

You would need to create your texture dynamically using an offscreen canvas.

 

I see, thanks again!

Here is what I want to try now, tell me if you guys think it make any sense:

Create the Wall out of 2 triangles, create the window as a submesh .

Using multi-material I will provide the window transparent material and different material to the wall.

 

edit:

I didn't really understand the principle of sub-meshes, but now I don't think that's a solution to my problem, I will still need to create the wall as example A in the drawing.

[tomer]

does anyone have any idea?

[JohnK]

Have you seen this http://doc.babylonjs.com/how_to/polygonmeshbuilder it is the basis for http://doc.babylonjs.com/how_to/parametric_shapes#non-regular-polygon  which is the basis for the  'buildFromPlan' function. Both these references have links to PGs for shapes with holes.

The 'buildFromPlan' function will not work with one wall as the function assumes that all the walls meet to create a closed space. Having re-read the documentation for building from floorplans perhaps it is not clear in the documentation that the function from lines  1 - 22 and the function from lines 31 - 587  from this PG  https://www.babylonjs-playground.com/#4GBWI5#2 need to be copied into your own project before using the using the function as in lines 589 - 630. I will make this clearer in the documentation in the New Year. You are correct that using 'buildFromPlan' there is no easy way to update windows positions after the house is built.

If you want to build separate walls then this PG is worth a look https://www.babylonjs-playground.com/#RNCYVM#10

Merry Christmas

 

[tomer]

Thanks a lot

That's exactly what I was looking for and the PGs are very helpful as well.

Merry Christmas!