Jump to content

Help recreating a dynamic cubemap demo in Babylonjs ×


Recommended Posts

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?



Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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?


Link to comment
Share on other sites


(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.


Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.


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++) {

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 : )


Link to comment
Share on other sites

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.

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.


  • Recently Browsing   0 members

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