3d house planner with Babylon js

Demos and projects
21

Looks very cool but it would look even better if you could add AO to the scene:

https://doc.babylonjs.com/features/featuresDeepDive/postProcesses/SSAORenderPipeline

22

I am struggling to adjust the parameters of this rendering pipeline as it generates some blur and noise in the scene depending on the distance of the camera. Do you know the best setups for this case?

23

Here is a cool PG:

(I believe the author is Evgeni_Popov, just donā€™t wanna disturb and tag him)

2 Likes
24

Hereā€™s the full project:

2 Likes
25

Toilet paper orientation dilemma LOL!

3 Likes
26

Awesome. I will implement this rendering pipeline based on this pg, and then I will show you the results

1 Like
27

it is no longer a dilema because I removed the toilet from the room , the screenshots are outdated :wink:

Two things to point out with SSAO ,

1 currently there is a known issue with the depth precision on all IOS devices , so it does not render properly on those , there is a thread about it here on the forums, and this is recent.

  1. the pipeline somehow removes / breaks the expected MSAA , and the post process FXAA is too blurry . This can be fixed though by adding the line of code :

prePassRenderer.samples = 16 // i think the samples must match the ssao samples , not sure

when this is set MSAA works again , so dont enable FXAA.

there are also threads about this on the forums.

( Honestly this gotcha about MSAA breaking when SSAO is used should be at the top of the page in the documents , font size 48 , in red text. Because no one seems to know this and its a serious deal breaker. I dont even understand why it cant just be solved internally by the engine since an end user can solve it with one line of code , and there is no reason in the world to not want to solve this.?? )

1 Like
28

I donā€™t know much about this prepassrenderer
I tried to reproduce based on your info,
Is that what you mean https://playground.babylonjs.com/#LCUPCU#28 ?

29

image
image1920Ɨ1446 114 KB

:stuck_out_tongue:

1 Like
30

interesting , ive never set texture samples myself , but just testing turning some stuff on and off in the code , I discovered something else ,

So in your code if I simply comment out :

// ssao.textureSamples = 4;

then MSAA is not functional , regardless of how you setting :

BABYLON.PrePassRenderer.samples = 16;

setting it via this global variable doesnt seem to workā€¦

So I then added the way i do it , on the scene object ( take note textureSamples is still commented out :

if (scene.prePassRenderer) {
     scene.prePassRenderer.samples = 16
}

then MSAA is working again.

So from this we can deduce :

Simply setting the textureSamples seems to fix MSAA without having to change prePassRenderer.samples

If not setting textureSamples , changing prePassRenderer.samples only fixes MSAA when doing it via the scene object reference , not the global oneā€¦

I think an advanced Babylon Engine Engineer would have to explain why that is though , i have no idea :wink:

please visit this PG , i have put comments and code to reproduce and display what im talking about above :

31

I tried SSAO in the app and concluded that this pipeline significantly reduces performance when the floor plan has lots of elements like walls, windows, furniture and others.

32

So make it switchable.

I would recommend to allow the user to turn on AO for the walls and for all the other stuff separately.

33

How do I separate AO for specific meshes?

34

You can use two cameras and attach the SSAO pipeline only to one of them:

The upper two cubes are rendered w/o AO:

image
image1358Ɨ1438 230 KB

    cameraNoAo.layerMask = 0x20000000;
    box1.layerMask = 0x20000000
    box2.layerMask = 0x20000000

https://doc.babylonjs.com/features/featuresDeepDive/cameras/layerMasksAndMultiCam

35

Isnā€™t there another way to do it? For example allowing AO rendering for only some meshes in the scene and activate it for all cameras? Or maybe using another type of method to get more realistic rendering
In my case I use 3 type of cameras, so now I need to have 6 cameras in total to make it work, which will increase the complexity of the code that I already set for the 3 cameras.

36

Itā€™s quite hard for me to give an advice without knowing anything about your app however you could try this to generate AO:

image
image1720Ɨ540 73.1 KB

1 Like
37

I tried to test it in a local server, but I got some errors.
Is there a playground or babylonjs docs using this Global Illumination?

38

FYI: A youtube video popped up while taking a look at your websiteā€™s landing page, but the video was ā€œWhy should you trust the Bible?ā€

My guess is thatā€™s not the video you intended to display. :grin:

3 Likes
39

Looks like a sponsored video to me. May be not the best way from a com aspect, to mix religion with tech making. It kind of ā€˜excludesā€™ 80% of the worldwide potential clients :laughing: I believe a chocolate bar or a soda would be a better choice (although you would still need to deal with the anti-sugar groups :chocolate_bar: :joy:). Hard to not hit just any ā€˜antiā€™ group these days :sweat_smile:. Our societies are claiming to be ā€˜inclusiveā€™ but yet, have never been so polarized :thinking: :innocent: Still, religion has always been and remains something ā€˜sensitiveā€™. Clearly not my first choice for sponsoring :face_with_hand_over_mouth:

2 Likes
40

Absolutely. I donā€™t get why do people mix religion with other stuff, like babylon.js. I immediately closed the window when the video popped out.

1 Like