RectAreaLightUniformsLib.js is broken on iOS 14

Describe the bug

examples/js/lights/RectAreaLightUniformsLib.js does not work in iOS 14. It used to work on iOS 13 (with some linear banding artefacts in the reflection of the area light), but under iOS 14 an area light created using this library is simply black and gives no light.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://threejs.org/examples/?q=area#webgl_lights_rectarealight
2. On desktop, the area light is completely white
3. On iOS 13, the area light reflection has horizontal bands
4. On iOS 14, the area light is black and does not illuminate the scene and an error message says “OES_texture_float_linear not supported”

Screenshots

Desktop (Chrome on Win 10):

iOS 13 (iPad Air 2019 model):

iOS 14 (iPhone 11):

Diagnosis:

The problem seems to be caused by a change in Webkit in Safari on iOS 14. Previously in iOS 13 Webkit would claim it supported the WebGL extension OES_texture_float_linear but it actually didn’t. Now in iOS 14, Webkit correctly reports that it does not support that extension.

Suggested fix:

Change RectAreaLightUniformsLib to fallback from THREE.LinearFilter to THREE.NearestFilter when the OES_texture_float_linear WebGL extension is not available.

[yellowtailfan]

Thanks @Mugen87 we’ll look into that. It’s nice to know a PR would be welcome!

[yellowtailfan]

I’ve created PR #20477 which uses half-float instead of float and renders area lighting without artefacts on Windows, iOS 13 and iOS 14.

I’ve put some to-do items and questions in the PR.