1

I am thinking of this:

enter image description here enter image description here

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

enter image description here

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.

bigreddot
  • 33,642
  • 5
  • 69
  • 122
Lance
  • 75,200
  • 93
  • 289
  • 503
  • 2
    Just an FYI that I removed the `bokeh` tag because in the context of Stack Overflow, it is specifically for referencing the Open Source [Bokeh Project](https://github.com/bokeh/bokeh) – bigreddot Jun 02 '19 at 17:48

1 Answers1

3

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

Mugen87
  • 28,829
  • 4
  • 27
  • 50