add fog

[titoasty]

Increasing Access

Unsure

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

Feature request details

Hi,

Would it be possible to add fog for WebGL rendering?

I tried adding it by hijacking some methods, here's how I did it:
https://github.com/titoasty/p5.js-boost/blob/main/fog.js
(it adds the function fog(r, g, b, start, end))

And the shader, based of phong.frag:
https://github.com/titoasty/p5.js-boost/blob/main/assets/shaders/phongFog.frag

The shader code comes from here: https://github.com/hughsk/glsl-fog

Thanks!

[Qianqianye]

The p5.js community has made a commitment to only add features to p5.js that expand access. Could you please add an access statement to the feature request? Thank you!

[harveymoon]

Hey just chiming in here.
Fog in 3D rendering can be a graceful trick to improve performance.
By clipping the camera view to a certain distance, you can render fewer polygons and improve performance and access to 3d works from less powerful computers.
Fog is a graceful way of hiding this clipping distance and making it feel more natural.

[davepagurek]

I agree this could be useful! Are there other material settings we might want to also consider, now that we're moving to a more modular material approach thanks to this GSoC project #5774? e.g.:

• Adding support for rim lighting to help make objects more distinct against backgrounds to improve visual clarity
• Possibly support for roughness/metallic properties like in the Threejs standard material, because although realism in renders isn't a goal of p5, it might be more intuitive to work with properties like this compared to changing the shininess of the existing specular material
• Possibly support for images as lighting sources, since correctly positioning lights can be hard, especially when there isn't an object in the scene that you can see as a reference for its position, and it can be a quick way to set up natural-looking light

We by no means need to do all or even any of those, but it might be useful deciding on a direction for the material system first in order to decide where fog fits in / where the best place to put it would be. If there's interest I can make an issue to discuss that! If we think those are all out of scope though, we can look at fog independently.

[Qianqianye]

Thanks @harveymoon and @davepagurek. I'm inviting more webGL stewards to this discussion @stalgiag, @aferriss, @kjhollen, @ShenpaiSharma, @calebfoss. Would love to hear what you think!

[davepagurek]

For organizational purposes, I'm going to close this issue in favour of #6144: Ideally, we will try to keep our core material fairly small, and built in a way where it is feasible for more rendering features to be added by plugins.