How to create bokeh in Three.js (or any way to create bokeh programmatically)

I am thinking of this:

I would like to place some text over the bokeh like this:

The question is (a) how hard this is / if it has been done before so I don't have to recreate the wheel, and (b) how to implement it in JavaScript, perhaps in Three.js.

I haven't been able to find any examples of Depth of Field (DoF) or Bokeh for 3D text or just 3D lighting bokeh in Three.js or WebGL, which makes me wonder if it is too hard or not possible. It doesn't need to be highly optimized performant because I just want to generate bokeh images to save to a JPG file. Wondering how to go about this, if you could point me in the right direction.

I haven't been able to find any examples of Depth of Field (DoF) or Bokeh for 3D text or just 3D lighting bokeh in Three.js or WebGL, which makes me wonder if it is too hard or not possible.

three.js provides two DOF examples in the official repository. I recommend the second one since it's a bit more advanced shader. You will also notice that the example focuses the object that is hovered by the mouse.

In any event, implementing DOF is a post-processing task. So the idea is to render the scene and the respective depth information into render targets and then use and additional pass for the actual DOF effect.

https://threejs.org/examples/webgl_postprocessing_dof https://threejs.org/examples/webgl_postprocessing_dof2

three.js R105