Adding Depth of Field: Applying Blur Effect to Highlight Close-Up Model Parts

Questions
, , , , , , ,
1

Hello Everyone,

I am currently working on developing a product showcasing web application where we are utilizing Three.js to render 3D models of various products within our Three.js scene. As part of enhancing the visual appeal and realism of our application, we aim to incorporate a Depth of Field (DoF) or blur shader effect within the Three.js scene. Our goal is to blur parts of the 3D model that are distant from the camera while maintaining focus on the parts closer to the camera.

Here we have tried add post processing effects and custom shader effects but we are not able to achieve the satisfactory result. Maybe we are doing something wrong or lacking knowledge about post processing or shaders in Three.js. I am badly stuck with this thing and looking for guidance.

To provide a clear understanding of our objective, I have attached a reference video demonstrating the desired effect we are aiming for.

I am reaching out to seek guidance and assistance from the community. If anyone has experience or expertise in implementing DoF effects or similar shader effects in Three.js scenes, your insights and suggestions would be greatly appreciated.

Thanks!

2

Have you tried Three.js post processing depth of field? Example1, example2.

Update:

Sorry! Should’ve read more carefully :stuck_out_tongue:.

Still, with example2 you should have enough options, to get the desired dof effect.

3

@Fennec Yes, we tried post-processing examples also, It was giving very bad blur effect with some pixalated edges on the model and also changes the color tone of the model.

Here’s what I am getting after adding post-processing:

image
image1097×722 51.4 KB

4

@donmccurdy @Mugen87
Hey guys, Could please provide your suggestions and help me in achieving this.

5

As suggested by @Fennec, you need to use post-processing and DoF as shown in three.js/examples/webgl_postprocessing_dof.html at 2ff77e4b335e31c108aac839a07401664998c730 · mrdoob/three.js · GitHub. Also note the use of OutputPass as the last pass. You may also need to include an antialiasing pass for the pixelated edges. I can’t comment on your screenshot above, please share a minimal reproducible example of the problem if you’re having trouble with the three.js examples already provided.

6

@donmccurdy @Fennec

I tried Three.js dof2 example .
Here the problems I am facing:

  1. Difference in the colors of the model after adding post-processing dof2 example (see petrol tank color tone and light reflection).
  2. Blur is not coming good. I need soft blur as shown in the example above (in query).
  3. There are some white dots jittering (see the Royal Enfield Logos on the Toolbox).

I will try to provide the jsfiddle link to reproduce the error, as I can’t share the exact assets so I have to use a dublicate asset to recreate the same issue. For now I am sharing the video of the issue I am getting with the dof example from the threejs.