如何在 Three.js 中创建散景(或任何以编程方式创建散景的方式)

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

我在想this:

我想像这样在散景上放置一些文字:

问题是 (a) 这有多难/如果以前有人做过这样我就不必重新创建轮子,以及 (b) 如何在 JavaScript 中实现它,也许在Three.js.

我无法在 Three.js 或 WebGL 中找到任何景深 (DoF) 或 3D 文本散景或 3D 照明散景的示例,这让我想知道是否太难了或者不可能。它不需要高度优化的性能,因为我只想生成散景图像以保存到 JPG 文件。想知道如何解决这个问题,如果你能指出正确的方向。

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 在官方仓库中提供了两个 DOF 示例。我推荐第二个,因为它是更高级的着色器。您还会注意到该示例聚焦于鼠标悬停的对象。

无论如何,实施 DOF 是一项 post-processing 任务。所以这个想法是将场景和相应的深度信息渲染到渲染目标中,然后使用额外的通道来实现实际的 DOF 效果。

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

three.js R105