Depth of field shader

[jywarren]

Is your feature request related to a problem? Please describe.

No, it's just a nice-to-have!

Describe the solution you'd like

I was using SketchFab and they have a really nice depth of field effect that I think would be really lovely in Hubs. Here's a model I'm using in hubs, with DOF and some other filters added

Describe alternatives you've considered

Manually blurring faraway things... obviously not flexible for large areas, and doesn't affect things near where a user can go close.

Additional context

I found a number of references to A-Frame custom shader use, including:

In addition, there are components developed by the A-Frame developer community that allow the use of existing shaders from repositories such as ShaderToy and ShaderFrog. (https://aframe.io/docs/1.3.0/components/material.html#using-a-custom-shader-and-component-together
)

However I wasn't able to find more about this. There are definitely plenty of nice examples of depth of field (DOF) shaders out there.

Three.js has an example too:

https://threejs.org/examples/webgl_postprocessing_dof.html (discussed at https://stackoverflow.com/questions/45842013/three-js-depth-of-field)

Also this one: https://threejs.org/examples/webgl_postprocessing_dof2

Aha -- OK, this is the thread where folks are trying to integrate a post-processing shader API into A-Frame:

• Introduce postprocessing API aframevr/aframe#3645
• Post-processing with WebXR mrdoob/three.js#18846

It seems like a pretty complex project, things haven't made a lot of progress recently. Much respect for the folks working on this!

I think based on this research this isn't yet actionable, but if anyone knows shaders and A-Frame code very well maybe they could use some help upstream.

Thanks, all!

[jywarren]

This is happening!!! At least the postprocessing plugin has been added: #5742

Some video about it here: https://www.youtube.com/watch?v=1-ca5qKivpY