Help recreating a dynamic cubemap demo in Babylonjs ×

[lagauche]

I'd like to recreate a Three.js demo in Babylonjs for fun: https://threejs.org/examples/#webgl_materials_cubemap_dynamic2

I'm guessing a Reflection Probe is my best best? I'm just now beginning to transition from Three.js to Babylonjs so any pointers are welcome! If there is any technical limitation to doing this that would also be valuable info. I've read a few forum posts touching on the techniques I'll need here, but now with 3.0 and the 3.1 preview I thought it's worth asking.

Do you think I could get it so close you couldn't tell the difference?

 

 

[julien-moreau]

Hey @lagauche,

To give you a quick answer, yes you should use the reflection probes like this: https://www.babylonjs.com/demos/refprobe/ (type F12 to see the code example)

[lagauche]

@Luaacro Yup. I'm going to work off that example I think. I can't seem to get the antialiasing the same as that Three example. Is that just a difference between the two renderers right now? I know Babylonjs has been re-working their post-processing. FXAA 4x doesn't quite get there and I haven't gotten any Babylonjs code that can take you higher to work.

[lagauche]

So I got everything working in Babylonjs with a probe and PBRMaterial, but as you can see the jagged lines are pretty bad. I think this is something about PBRMaterials?

Do I even need to use PBRMaterial here? I assume not, but it worked when i tried it.

How can I get a standard material to look metallic and have the reflection probe do the reflection work? 

Or any other ideas?

[GameMonetize]

Hello! Do you mind creating a repro in the Playground? It will be easier to help you

I'm sure we have everything that you need to get rid of aliasing (could be blur, fxaa, msaa, etc..)

[lagauche]

@Deltakosh rock on. I will as soon as possible. I encountered a weird bug with the playground on a mac that misaligned the highlighting when selecting text so I haven't used it much. Seems to work on Windows fine though.

 

 

[lagauche]

@Deltakosh

(Sorry the scene will take a while to load).

 Here is a Playground: https://www.babylonjs-playground.com/#Z9MZRF#1

The skybox texture is here. It's very important for recreating this scene.

https://github.com/mrdoob/three.js/blob/master/examples/textures/2294472375_24a3b8ef46_o.jpg I don't yet know how to work with external textures in Playground.

Do I need to use PBRs to achieve this copy? How can I get the antialiasing to be similar to the original example I am copying : ) I haven't had much luck with getting code I've googled for anti-aliasing to work for some reason.

Thanks!

[GameMonetize]

Here we are:

https://www.babylonjs-playground.com/#Z9MZRF#2

[adam]

https://www.babylonjs-playground.com/#Z9MZRF#3

You were doing twice the work you needed to do. 

(I just removed the redundant scene.render())

[lagauche]

What the! @adam, @Deltakosh you two are amazing thank you!. This looks wonderful! That's really interesting about the redundant scene.render. I can't wait to get off work and tweak this!

If you happen to have a comment on my question as to whether I needed to use PBR materials, I'm still very curious. Since I'm using the reflection probe maybe another less advanced material would do the same? I simply tried the PBR material and of course it looked great so I went with it. I'm sure in time the docs and experimenting will answer this question for me and many more!

[GameMonetize]

You are right: as you only need reflection, the standard material is far enough:

https://www.babylonjs-playground.com/#Z9MZRF#4

 

[lagauche]

I have come a long way now. It's almost identical except the rotation. The only difference I notice is an interesting way the edges of the center sphere light up and flicker when near a window. I'm not sure what setting is causing that or if it's just a difference in the light/rendering.

https://www.babylonjs-playground.com/#Z9MZRF#5

I am trying to understand why I can't tell the difference in the scene with the follow code commented out: (of course all of this is the modified reflection probe example)

        // var probe = new BABYLON.ReflectionProbe("main", 512, scene);
        // probe.renderList.push(knot1);
        // probe.renderList.push(box1);
        // probe.renderList.push(skySphere);
        // probe.renderList.push(sphere1);

I am also wondering if I can get rid of this function even if it means repeating more code to assign the material and the probe to the appropriate objects such as with the code above?

        var generateSatelliteMaterial = function (root, others) {
            material = new BABYLON.StandardMaterial("satelliteMat" + root.name, scene);
            probe = new BABYLON.ReflectionProbe("satelliteProbe" + root.name, 128, scene);
            for (var index = 0; index < others.length; index++) {
                probe.renderList.push(others[index]);
            };

I will keep commenting out and breaking stuff, until hopefully I understand.

[GameMonetize]

Can you do a screen capture of "an interesting way the edges of the center sphere light up and flicker when near a window"

If I understand correctly this could be fixed with Fresnel: https://www.babylonjs-playground.com/#Z9MZRF#6

 

[lagauche]

Hi @Deltakosh!

Yes of course! Here's a picture (No FresnelParameters) clearly showing the difference. Babylonjs is on the left. This white edge occurs when a lighter color (such as in the windows) is behind the sphere and is being reflected along the edge of the sphere. The edge flickers/undulates in a way the original does not. To use an analogy, it's like looking into the distance on an extremely hot desert day where the air diffraction creates waves.

The FresnelParameters you added in change the overall color (darkening) too much. If I up the bias it helps, but there's still a black edge rim that gives a slight cartoon shader look. Once I cross that bias thresh-hold where the black edge gets thinner (around 0.5) the flickering light is back. Any ideas?

I am using your setHardwareScalingLevel code, but can I also add anti-aliasing on top of it? I can't get the anti-alias options in the post proc docs to work. Black and white for example does work.

 

The picture comparison isn't accurate because the placement of the reflection probe does make a difference as to whether the window from the skybox texture falls along the edges, but even when it does in the original, the difference in behavior/rendering is apparent. 

[GameMonetize]

The effect you are seeing is mostly due to how reflection is done

So here is a slight update which use fxaa (line #12) and mipmaps for the probe (line @27 at the end):

https://www.babylonjs-playground.com/#Z9MZRF#7

 

[GameMonetize]

the 3js sample also has it:

But is less visible because of where the probe is positioned.

 

[lagauche]

thanks for this. I'm totally aware of the probe position in relation to the window. I was wondering about the waviness, but I figured it out and I should have known. The sphere in my Babylonjs scene is actually very slightly rotating at the center of its axis whereas in the three.js example it is not. This is what is causing the waviness.

Thanks for taking the time help me with this! I love the flexibility of the fresnels! The anti-aliasing is very subtle, I can't really tell the difference, but it already looks amazing so it doesn't matter : )

 

[GameMonetize]

Thanks for your kind words!