Depth of Field Issue

Questions
1

Are there known issues with DoF and MultiMaterial?

I can get DoF to work with StandardMaterial and PBR, but when I try to use it on meshes that are using multimaterial, all the meshes seem to take on the same blur no matter what their distance to the camera.

I am cloning multimaterial for each mesh.

I’ll try to replicate the issue in a PG if there are no known issues.

2

Hi adam,

This sounds like something I’m unfamiliar with, at least. If you can post a link to a Playground repro, that’d be fantastic!

3

The problem appears to be caused by cloning the skeleton. I’ll have a PG to demonstrate the issue later today.

4

https://playground.babylonjs.com/#8F5HYV#20

The models in the middle all have the same blur.

Comment out line 47 and DoF works again.

I’m not sure why cloning the skeleton would cause this issue.

5

Thanks for the repro! This is fascinating, and it definitely seems like a bug. From looking at the scenarios in Spector.js, it looks like when mesh.skeleton is set, the mesh isn’t being drawn to the depth buffer at all. Curiously, this doesn’t seem to affect the cubes at all. I did a little fishing in the source, but I haven’t found or thought of any obvious reason why this might matter. @Evgeni_Popov, do you know where/why this might be happening?

1 Like
6

There’s a bug with the depth renderer and meshes with skeleton.

Here’s the PR:

1 Like
7

Thanks, Evgeni!

8

The fix works for the PG repro:

https://playground.babylonjs.com/#8F5HYV#25

but not for my project :frowning:
dof_issue

The fish are using MultiMaterial, PBR, CustomProceduralTexture:

var pbr1 = new BABYLON.PBRMaterial("ranchu"+this.num+"_pbr", scene);
var albedoTexture = new BABYLON.CustomProceduralTexture("ranchu"+this.num+"proctex", "./textures/shaders/goldfish", 1024, this.scene);
albedoTexture.hasAlpha = true;
pbr1.albedoTexture = albedoTexture;
pbr1.bumpTexture = new BABYLON.Texture('textures/ranchuBump.png', scene);
pbr1.reflectivityTexture = new BABYLON.Texture("textures/ranchuReflectivity.png", scene);

var pbr2 = new BABYLON.PBRMaterial("ranchu"+this.num+"_pbr2", scene);
pbr2.albedoTexture = albedoTexture;
pbr2.useAlphaFromAlbedoTexture = true;
pbr2.reflectivityTexture = new BABYLON.Texture("textures/ranchuReflectivity.png", scene);
pbr2.reflectionColor = BABYLON.Color3.White();

let multiMat = <BABYLON.MultiMaterial>mesh.material.clone('ranchu'+this.num+'multimat');
multiMat.subMaterials[0] = pbr1;
multiMat.subMaterials[1] = pbr2;
mesh.material = multiMat;

(pbr2 is applied to the tail fin)

9

When I comment out albedoTexture.hasAlpha = true, I get this:

dof_issue_2
dof_issue_21271×915 66.4 KB

The tail fin dof looks correct. The head / eye is still having issues, though.

10

and this is with reflectivity texture and bump texture commented out:

dof_issue_3
dof_issue_31255×935 68.1 KB

I’m still seeing the same DoF issue around the head / eye.

11

The transparent objects are not rendered into the depth buffer.

I have updated the PR to add a new forceDepthWriteTransparentMeshes property to force writing the transparent meshes to the depth buffer. You would use it like this:

scene.enableDepthRenderer().forceDepthWriteTransparentMeshes = true;
3 Likes
12

I really appreciate your work, Evgeni. I was ready to give up on DoF due to the transparency issue.

1 Like