Fog gradients / Different colors

[EvilPeanut]

Hello,

Is there any way to have gradient color for the fog or have the fog color change in certain areas of the fog, instead of fog being a single color?

Thanks,
Reece

[mrdoob]

Uh... nope. It's a nice idea though.

[EvilPeanut]

Hello,

@mrdoob Will you add it :) ?

Thanks,
Reece

[mrdoob]

I'll keep this issue open until it's somehow supported.

[donmccurdy]

I think it’s not fog exactly, but three-vignette-background does a nice background gradient effect. Probably good enough for many use cases?

[Itee]

A background gradient/color effect could be add to the scenes folder. This type of features should be supported by the library IMO.

[funwithtriangles]

Would love to try and implement this. In my case I'd want the fog to match a texture. For instance, let's say I have a perlin noise background in a scene which also has fog, the items in the scene currently fade out as one colour, so are still visible as silhouettes against the perlin background.

Does anyone have any pointers on how this could be achieved? I'd love to tackle the problem!

[dustinlacewell]

@funwithtriangles Any luck?

[funwithtriangles]

Unfortunately not. Still keen to try it when I get the time! Here's how I think it could work:

• Currently the fog just mixes the colour of mesh material
  with background colour basedd on distance from camera
• instead of mixing with a background colour, it needs to mix with a texture sampled at the correct location.
• If we're dealing with a simple texture that matches the canvas, it shouldn't be too hard to sample the texture based on the 2D projection.

Otherwise perhaps it's already achievable with a multi-pass approach?

[Mugen87]

I think it’s not fog exactly, but three-vignette-background does a nice background gradient effect. Probably good enough for many use cases?

Such gradient effects can be implemented now with TSL in different ways. There are existing example that demonstrate radial or linear gradients. E.g.:

https://threejs.org/examples/webgpu_postprocessing_ssr
https://threejs.org/examples/webgpu_backdrop

Custom fog can be implemented in TSL as well. webgpu_custom_fog_background use a single fog color but it can be enhanced to use two and interpolate between both colors depending on the fog factor. Something like fogFactor.mix( fogColor1, fogColor2 );.