Jump to content

Creating windows - make object behind transparent


tomer
 Share

Recommended Posts

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:

Screen_Shot_2017_12_20_at_18_23_34.png

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

  • RaananW changed the title to Creating windows - make object behind transparent

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...