Building windows with inside transparency and "real" outside reflections

Please read the previous thread:
https://forum.babylonjs.com/t/one-side-transparent-windows/20217/6

This is an enhanced version with MirrorTexture, so you can reflect any surroudings:
https://playground.babylonjs.com/#JQQX4Y#84

I don’t know whether this is the good approach, so please comment.

Thanks to @mawa for “pushing” me to create more realistic reflections :sunglasses:

EDIT: Some things needs to be fixed. The spheres are reflected upside down and one should play with the scaling of the reflected meshes as well.

6 Likes

That’s not me. I’m not the ‘pushy’ type :innocent: but I’m glad that you are willing to embrace the subject :smiley:
I believe I must have spent my entire digital designer carrier struggling with and challenging ‘reflection’. In 2D, in 3D, in real-time, everywhere, always and still today. There are just so many different types and techniques and all have their scope, advantages and downsides.

Not long ago, I remember this thread:

If anyone feels like sharing their own XP, I guess this would be a place to do so…

1 Like

This is an example for a reflection of a reflection of a … box which is rotating around itself and a stick in the middle of a circle room (the area of the real world). Each point of the circle is used as a reflection point and an other box is created in the imaginary mirror-room.
At the next recursive iteration each of the boxes in the mirror room were reflected again to each points of the circle. etc.

It is very interesting when you zoom out with the camera and get a first insight into how the mirrored objects are distributed in the imaginary space.

In the next example: what if the real box rotates out of the real world?

The next example shows some of the reflections within a 3D area

with some more reflections

… and more reflections (zoom out)

… and even more reflections… and so the stars were born! :smiley:

4 Likes

Gee, I somehow knew that if you would kick in on this one, things would go haywire :wink: :wink:
Let’s just all immerse ourselves in the fabulous world of reflections :smiley:

My apologies, I know… this is ENG forum, and ENG’s aren’t supposed to have emotions, correct? :wink:

Hi there @roland.csibrei,
I’m still working on this subject (of R&R, reflection, refraction, glass, metal, etc…)here or there;) hope you are too?
Lately did set-up a preview environment for my 3D commerce scene sketching/evaluation, released under the sexy name;) of ‘Project Chair’. You can find it here:

There is a big part on reflection (glass, metal and textile) in the sketch. I’m trying to give both a base and a freedom for others to experience. I would need to add more variants of materials/types, though… There’s a table with a glass made from a simple standard texture (no baking, probe or anything…at this very moment), but then may be you still want to have a look at it. Else, have a great day,

Hi!

Thanks a lot! :slight_smile:

Hi @mawa!

I have a building scene with several floors and a lot of objects in each floor. The user can select the active floor. All the floors above are hidden, but the floors below are visible. My PC (i9, RTX3080) can handle two floors with all the objects displayed, so I opted for the one sided transparent windows, thus I can hide the “heavy” objects on the floor below the current one. This way the user couldn’t see through the windows so it’s OK to hide these objects. …but I had an another idea: the objects on the floors are mainly chairs, desks, PCs, etc. It is an administrative building with open spaces, so each floor is very similar and there only a three types of chairs, four types of desks, etc. so why not use GPU instancing for these objects? So I went this way and it is so fast (I also moved the babylonjs enigne to a web worker), that I can use transparent windows (simple alpha texture with a bit of fake reflection) and I don’t need to hide the objects. That’s the reason I stopped research on reflection. Sorry :slight_smile:

Before abandoning the reflection approach I actually made some progress on the one sided reflection stuff. I positioned four cameras on the each side of the building. These camera are pointing outwards the building, like you were looking out of the window. These cameras renders to 4 textures and these textures are used as “reflection texture”. However this works well if you have a building with a non complicated shape.

According to you project. It is amazing, congratulations!
Seems, that yor GUI will get more complicated. I use Quasar framework for the GUI. Maybe you can have a look at it as well. :slight_smile:

Have a nice day!

R.

Interesting. Are these objects already clones/instances/thin instances?
Is the object source design built with the above design/tech approach? What is the load of these meshes/submeshes/prefabs (since they are supposed to be all the same and likely made from identical ‘parts’)?

Edit: Hum, I’m not sure of your project. But instinctively, I’d say it could be usefull to distinguish the ‘map’ or floor plan view from the ‘free view’. Where in case of a floor map/plan all meshes would eventually be merged/frozen and would also not take full dynamic reflection? Does this make some sort of sense in your project, I dont’ know?

Thanks for the info. I will certainly give it a try one of these days and project. But here I’m just trying to master and somehow push the BJS GUI (core) features;) And I have been told (insider news;) that there will be improvements in the upcoming version of BJS. I’m eager to see this (and see if it can, in fine, compete with ‘external’)

I got a blender file with the building scene and the problem with the object meshes is that they are not optimized, so I ended up with 3 million vertices/floor :smiley: I already tried to do some optimalizations, some retopology,. The architecture of the building is OK.

We have a very good desktop implementation of this project already done in Unity and it is used for years by now. The BJS project is just a proof of concept, so I dont want to play a lot with optimizing the meshes in Blender, because I can actually demonstrate the project with just 2 floors in 50-60 FPS range and maybe the boss will decide not to go with BJS. Funny is, that the same Blender file imported to Unity runs 2-3 faster like in BJS.

I will ask my boss for permission to share some screens, maybe a demo version of the project so you can see. There is no floor plan mode, however you can switch to 2D, but it just rotates the camera above the building and sets the target of the camera to the center of the floor, so no real 2D here.

The world matrix and the materials are already frozen, Maybe you can recommend some more optimiziation tricks after having a look at this code I am currently using:

Thanks!

R.

OUCH! If it fucks and cannot be managed anymore, one should always look back at the source.

I understand that. To be honest this is also still what I’m doing at this time;)

I have an MBP (actually had 3 over the past 7 years) that can run Windows faster in bootcamp than…Windows;)

The idea of the floor plan mode is to exclude most of effect/details so to make it more reactive when in this ‘interaction mode’. Where as in the ‘free’ of ‘FPS’ mode, you would be either constrained to a single floor or a transition (of any type) would be done when you switch floor.

So you have an MBP, maybe you can help me clear out an issue with shadows. When using Poisson shadows on MBP, the framrate drops by 40-50 frames. This is not happening on iPhones though, nor on android or windows dekstop. Did you ever experience something similar? Funny story is, that I was presenting the project to my boss and he insisted to do so on his notebook. What can go wrong? I asked myself. Boom, 8 FPS :smiley: I am surrounded by Windows users so I didn’t have a chance to test is yet. I am sure, the boss will not lend me his MBP :smiley: It’s an M1 MB, so maybe it is related.

Thanks!

R.

Thanks!

Very good idea! Thanks!

Well, I suppose if I could gain access to this source/preview, I would find some time to quickly run a test for you. I have an old 2013 with GT650 (1gb) and an early-2020 with radeon pro (4gb). I also get different results (in terms of framerate and overall look and feel depending on using mac OS or windows 10). But then not with such enormous differences.