Add depth-of-field fog or blurring rendering options

[ghutchis]

Avogadro 1 included "fog" to add some simple depth-of-field effects, e.g.:

VTK offers other kinds of depth-of-field effects including blurring:

[ghutchis]

From Avo1:

      glFogi(GL_FOG_MODE, GL_LINEAR);
      GLfloat fogColor[4]= {d->background.redF(), d->background.greenF(),
                            d->background.blueF(), d->background.alphaF()};
      glFogfv(GL_FOG_COLOR, fogColor);
      Vector3d distance = camera()->modelview() * d->center;
      double distanceToCenter = distance.norm();
      glFogf(GL_FOG_DENSITY, 1.0);
      glHint(GL_FOG_HINT, GL_NICEST);
      glFogf(GL_FOG_START, distanceToCenter - (d->fogLevel / 8.0) * d->radius);
      glFogf(GL_FOG_END, distanceToCenter + ((10-d->fogLevel)/8.0 * 2.0) * d->radius);
      glEnable(GL_FOG);

[ghutchis]

This doesn't work in OpenGL core AFAICT, but there are shader options, e.g.:

https://vicrucann.github.io/tutorials/osg-shader-fog/

[aerkiaga]

Related to this, I'd suggest (once OpenGL 3 is in place) trying to have a set of common fragment shaders (fog, ambient occlusion...) rather than one per render type, and moving color computation, if applicable, into the geometry shader. Then all render types would be able to use any shader. Also simpler, more orthogonal code.

[ghutchis]

Absolutely. See #582 which I don't think even requires switching to OpenGL 3. (It also includes an "outline" shader which would be nice for surfaces.)

IIRC 3Dmol.js uses a similar strategy and it enables a volumetric render for orbitals / electron density:
http://3dmol.csb.pitt.edu

I can imagine a "View Options" window that allows tuning the global shader options.

[ghutchis]

I'm going to leave this one open, since a blurring shader would still be nice.

[ghutchis]

That's right. At the moment, avogadrolibs has some work on ambient occlusion / shading, but nothing for fog or blur effects.

This is mainly a "it would be nice to implement these in the future" issue, but if you're willing to help, I'd be happy to discuss how to implement them.

[ghutchis]

One example of depth-of-field blurring: http://wwwtyro.github.io/speck/

[perminder-17]

Hi @ghutchis , I've been working on solving all the bugs of blur effects and am currently adding fog features to another repository in p5.js. After going through the codebase, it seems like these features aren't currently included maybe. Forgive me if I am wrong, as i just got the overview of the codebase. Could you clarify what exactly we're aiming for with these additions? Do we want to implement them with or without depth considerations? My plan is to integrate them into fragment shaders to keep things streamlined, as we can utilize a single default.vert shader. Additionally, we can explore adding other rendering options in the future. Could you provide some thoughts on this?? Thanks:)

I have prety understood the codebase, may my plan could be wrong. Maybe you can give me an overview, how we are demanding these features. Or we are still discussing about how they must be implemented?

update: Sorry for the message delete, I was editing something else

[perminder-17]

That's right. At the moment, avogadrolibs has some work on ambient occlusion / shading, but nothing for fog or blur effects.

This is mainly a "it would be nice to implement these in the future" issue, but if you're willing to help, I'd be happy to discuss how to implement them.

Sounds good, let's have a discussion. My plan is to begin with implementing blur effects by creating uniforms in the code and linking them with shaders (a two-pass blur shader, unweighted kernel) through new fragment and vertex shaders. Do we have any community channels dedicated to this repository where we can discuss these ideas? Or maybe we can discuss it here in this issue? @ghutchis . Is it okay to ping you on the discourse form?

[perminder-17]

One example of depth-of-field blurring: http://wwwtyro.github.io/speck/

Looks great.

[perminder-17]

I was just considering using two uniforms in a sampler2D, one for texture and one for depth, possibly incorporating additional parameters like radius, direction, and dimensions if opting for the fragment shader approach. Alternatively, we could avoid shaders altogether and implement the functionality directly in C++ code without relying on WebGL support. However, I'm uncertain about how we would handle the depth in blur when using in c++. How should we approach @ghutchis

[ghutchis]

While this is a C++ code, we use GLSL shaders and pass, for example, depth information.

I try to encourage discussion to https://discuss.avogadro.cc/

[perminder-17]

depth

Oops, I messed up things here...I have tagged you on the discourse form. Thanks:)

https://discuss.avogadro.cc/t/add-depth-of-field-fog-or-blurring-rendering-options/5332?u=perminder-17

[avo-bot]

This issue has been mentioned on Avogadro Discussion. There might be relevant details there:

https://discuss.avogadro.cc/t/add-depth-of-field-fog-or-blurring-rendering-options/5332/2