Improving lighting quality similar to PlayCanvas?

Questions
1

Does anyone know how to achieve renders close of the playcanvas viewer example. I am using IBL on the babylon example however even with adding a direction light and shadows I haven’t been able to figure it out.

babylon example

image
image1920×1156 81.6 KB

playcanvas example

image
image1920×1119 184 KB

2

As far as I see the IBL intensity in PlayCanvas example is bigger (or there is different environment texture).

3

From the screenshot it looks like your shadow is not working properl. Also you can add ssao2 to enhance the realism.

1 Like
4

several things, I guess you are missing an analytical light and probably some exposure/tonemapping but let me add @PatrickRyan to the thread.

5

@bsdacres, I agree with most of the comments in this thread already. I don’t have experience with Playcanvas so I don’t know their defaults, but here are the things I would look at for consistency between the renders:

  1. Both scenes using the same IBL. The color of the light looks similar, but I would confirm that both are using the same file or are sourced from the same file.

  2. Ensure the default value for IBL intensity is the same for each renderer. The best method to check this is placing a chrome ball in the scene for both to make sure that the environments are a consistent level in each renderer.

  3. IBL rotation. The lighting hitting the surfaces are inconsistent which makes me think that they have different rotations. The chrome ball from above is the best way to test this as well.

  4. Ensure any punctual lights (directional, point, etc) are in the same position/rotation in both scenes and ensure the falloff and intensity are the same. Falloff can vary between engines so pay particular attention here.

  5. If you are using PBRMaterial with roughness textures, make sure that the textures are packed in the correct channels such as metallic in RGB and roughness in A. Also make sure that the roughness map is used the same way between the engines. For example, Unity uses smoothness instead of roughness so any textures coming to Babylon from Unity need to be inverted. I am looking at the specularity in the lips for this one.

There may be other subtle areas that need focus, but for now, looking only at a render, this is where I would start. If you can share a PG we would be able to debug better. But please feel free to ping back with specific questions.

3 Likes
6

Thanks so much! I feel like I’m getting closer to the desired result but I’m having trouble implementing the shadows. Any suggestions?

image
image1920×1107 140 KB

right is playcanvas, right is babylon.

7

@bsdacres, without seeing the way you are setting up your scene in code, it’s very hard to guess at the issue here. But here are some things to confirm which should help narrow down any obvious things.

  1. The hair mesh and the face mesh should be different meshes, not combined into one. I assume this is how it is already set up, but it’s worth confirming. We don’t do any self-shadowing because of the cost during real-time rendering.
  2. Each shadow caster has been pushed to the shadow generator, in this case the hair needs to be assigned to cast a shadow.
  3. Each mesh that receives shadows is set to do so using mesh.receiveShadows = true;
  4. You have assigned the correct light to the shadow generator upon creation with const shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
  5. Your shadow casting light is close enough to the model and the frustrum is set correctly to encase only the shadow caster and the mesh catching shadows to ensure the highest quality shadow. If the frustrum does not include the caster or the catcher, your shadows won’t render.

If these tips don’t help you get your shadows rendering, sharing a PG with us, even in a private message, will go a long way to help us unblock you.

1 Like