One side transparency in building windows

Demos and projects
1

Hi!

A demonstration of how to create building windows transparent from one side.

Playground

It replaces a given material (in our case called “Glass”) with a custom material with a custom simple shader, which sets transparency and tint from one side only. The other side uses a reflection texture.

Edit: I used this technique in my project on a standalone building with no surroundigs, there are just some trees behind it and the camera is not allowed to rotate to see the backside of the building so the user is not able to notice, that there are not reflections of the trees. The reflection texture is sort of just an abstract environment with gradients.

One might want to change the projection coordinates type for the reflection texture. It can be done like this:

customGlassMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.CUBIC_MODE

Or you can use diffuseTexture with a fake mirror texture, or just diffuseColor.

7 Likes
2

not bad. Although the reflection texture in this case is out of context. Reflection is everything to a glass material/object, isn’t it?:wink:

Sry, Edit (fast-typing)_ : What I wanted to say is that:

  1. I luv the topic and then, the sharing.
  2. I have seen a number of topics about the handling of glass (and there are many different types of glasses and also approaches and methods towards a ‘pseudo-accurate’ representation of this)
  3. There is currently (as far as I know) no PGs demonstrating how to properly account this in a complex scene/environment (assessment, I could have missed it)
  4. I think it would come in handy (for me and others) to have some more input on this
  5. If you fancy to pursue the (hard) work, I will happily follow and of course soak-up your input;) I will try to offer some sort of ‘compensation’ if I can;)
3

Hello @mawa !

Thanks a lot for you answer!

I couldn’t share my production reflection texture, because it is copyrighted for our project still in development, but I ensure you, it looks much better than this :slight_smile:

I will gladly share more information, if you let mne know what are you interested in.

4

Thanks for your replying,
Well, for me and (I assume) the community it’s already awesome if you share your project findings:)
Else, I (personally) am always looking for new input but don’t really need it as of just now. Though the realistic glass topic is kind of a topic that comes out (no matter the framework or technique), yes ? It is also the kind of thing that can help ‘engage’ people (project managers, designers). It could be just a personal feeling, but I think BJS could do with a bit more ‘showcasing’ in this aspect.

5

Some more info on the reflection texture:

It doesn’t contain any objects, it is something like the BJS TropicalSunnyDay texture (I think, you are already familiar with it), so it is very hard to spot, that is is not a real reflection.

6

I know. It’s kind of an issue when you want to use the PG assets. There aren’t as many. But, for however little number they are, strangely, nobody ever thought (again, assessment only) of showcasing the entire environment and reflection. May be at the same time, demonstrating how this works with using env, a cube map,etc… and as a environment, a skybox, a dome, etc… If I’d have some time, one day I would try to do (or contribute) to something like this. It would be awesome, to somehow be able compare the results? I mean for a newcomer, i.e., wouldn’t it?

Edit: Forgot to mention. It’s nice to have this logic and the code seems to work well.

7

I agree, it is a very good idea to have a showcase of all available options for the reflection stuff at one place and I hope you will have some spare time to contribute soon :slight_smile:

8

Hey, what do you think of this? Is it a good approach?

https://playground.babylonjs.com/#JQQX4Y#84

1 Like
9

Oh thanks for this amazing contribution. This is a really nice PG and approach (in my opinion).
Yes, using a mirror texture is an approach/possibility (sry, I’m speaking design here, I’m in essence an Art- Creative-Dir.:wink: But I very much like your personal input with this idea of handling depending on facing directions. That’s creative thinking, yes :smiley: I don’t think I have seen anything alike in the PGs. Pinging @RaananW @Evgeni_Popov.

In fact I’d have a number of questions about the handling of reflections and also some feedback/input from my own tests. One thing that strikes me most is the scaling (and sometimes also the .y position, i.e. when using an arcRotate camera) but yes, mostly the scale. This is true for all materials & approaches I’ve seen so far and in fact, this is also something I regularly experience (as a game luver and a long time hardcore gamer;) in many and even millions worth projects/games. Something just doesn’t feel right there most of the time… Would you agree?

10

Hey @mawa!

Thanks and thanks! :slight_smile:

Yes, the reflections are far from real and I have just noticed, that the spheres are reflected upside down and the scaling ehm, it is another story, but I leave the remaining issues to be fixed by someone else, maybe even by you :slight_smile:

Also it would be cool to calculate the relative position of reflected objects from the reflector origin and decide dynamically, which objects can be reflected by a given reflector.

Originally I wanted to share only the concept of the transparent custom shader and didn’t pay too much attention to the reflections, because as I already wrote, I don’t need them in my project, now. But I felt a bit dumb after demonstrating the shader with the cube reflection texture :smiley: so I tried to fix it by the new PG.

To tell the truth, I don’t have too much time to play with these things now and the lack of knowledge of some concepts also bothers me, but I will get back to this reflections stuff sooner or later. As you have noticed, I am a newbie here, so please, if you or anyone else have any suggestions I will gladly implement them, or will try to, at least.

Thanks!

EDIT: I started a new thread on the new PG here: Building windows with inside transparency and "real" outside reflections

11

I believe none of us have (except of course those who are on the BJS payroll;)
But the amazing thing I find with this forum (my opinion only) is that you can actually build something one brick after the other and everyone can in a way bring a valuable contribution. I mean, I’ve been here in this forum for just about 1y (started investigation and learning BJS in dec 2019) and since then, I’ve seen an amazing number of solutions arising from these exchanges. Even better, as a noob (coder) I have been able (here or there) to bring my own contribution. It’s not easy with these big brains out there;) but in a specific area where you have some background, it remains do-able:)

I’m eager to see what will come out of this thread

and will certainly try to nurture and propagate it as I have the feeling it is worth it (again, my opinion only).

Thanks a lot for your time and have an awesome WE,

1 Like
12

This topic of interior mapping could be of interest for your case. May be?

13

Hello!

Thanks for sharing! I already heard about this technique and already played some games on PS4 using this technique and it si really cool. However, I didn’t dig deeper, but I will put this on my list :slight_smile:

R.

1 Like