Sky: Make sun disc optional.

[jwheare]

When rendering a SkyMesh to a cube camera render target or pmremgenerator for use as the scene environment, the sun disc can cause artifacts to appear on surfaces.

This PR adds a new option showSunDisc, on by default, that lets you selectively disable it when rendering the environment map.

I have also removed the extra unnecessary precision from constants that javascript will ignore. Let me know if you'd prefer this to be in a separate PR.

Here's a demo that shows the issue, you can toggle Sun -> showSunDiscEnv.

https://jwheare.com/threejs/skytest/

You can also adjust the time of day to see how the artifacting comes and goes.

Note that I'm using a cube camera and increasing the render target size doesn't help. The issue can be disguised by increasing roughness, but disabling the disc altogether and using a directional light for physical reflections works a lot better.

[jwheare]

I can't work out why this issue isn't manifesting in the ocean demo though. https://threejs.org/examples/webgpu_ocean.html

[Mugen87]

Before merging the PR, we should indeed find out why webgpu_ocean does not expose the issue.

[jwheare]

In case it's convenient, code for the demo is also here: https://github.com/jwheare/threejs-demos/tree/main/skytest

• sky.js app code
• skymesh.js - modified skymesh with changes from this PR

I added WaterMesh and pmrem tickbox options to more closely match the ocean example.

[WestLangley]

Note that https://threejs.org/examples/webgl_animation_keyframes.html show a similar artifact in the sun itself.

[Mugen87]

Before merging the PR, we should indeed find out why webgpu_ocean does not expose the issue.

Edit: You don't see clear roundish shape as well.

This is screenshot with different elevation/azimuth angle:

[jwheare]

Is that the mesh disc or the environment version? I can't replicate that with any azimuth/elevation. The closest I can get is on the webgl version of ocean there's a slightly pixellated reflection/environment disc, but not as bad as your screenshot.

What precise settings give you that?

[Mugen87]

This was just webgl_shaders_ocean with a static box: https://jsfiddle.net/14oxmcjs/

[Mugen87]

I think what webgl_animation_keyframes currently does isn't right. PMREMGenerator's output is intended for lighting and not for retaining as much detail as possible when creating PMREMs. The default PMREM size is 256 which is very low for detail preservation. So the idea is to use the sky mesh for the background, and the PMREM for Scene.environment.

The reflection issue can be somewhat mitigate by using a higher-resolution PMREM. Below fiddle uses 1024 as the PMRME size which mitigates the pixelation artifacts (at least it works better than in https://jwheare.com/threejs/skytest/). The sun is now much rounder: https://jsfiddle.net/13bc4L9a/1/

What also seems to help is to use a softer smoothstep boundary for the sun. Meaning instead of 0.00002 use 0.0002.

three.js/examples/jsm/objects/Sky.js

Line 259 in 8356932

float sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos + 0.00002, cosTheta );

But that is something I wouldn't change since you normally want the sharper sun disc look for the skydome.

[jwheare]

This was just webgl_shaders_ocean with a static box: https://jsfiddle.net/14oxmcjs/

Ah ok, I didn't realise that was looking at the cube itself, I've just been focusing on the flat plane reflections.

[jwheare]

I can't really afford the performance hit of the pmrem, even at the default lower resolution. A low res cube cam render target works ok for the overall effect, it's just the extremely pixelly sun that causes issues.

I'll experiment with the smoothstep, but would you agree that there will still be a need for disabling the disc in this PR or would you instead recommend just switching to a custom forked version?

[Mugen87]

I think a flag does make sense. I doubt this is "fixable" in SkyMesh or PMREMGenerator so it's probably best to exclude the sun disc as a high-frequency detail when generating env maps.

Would you be willing to add this to Sky.js as well?

[jwheare]

Done, also made some small other consistency/docs tweaks.