Three.js: RGB floating point textures broken on latest Firefox

[silvainSayduck]

The EXRLoader recently broke on Firefox, tested on MacOS and Windows.

See https://threejs.org/examples/webgl_materials_envmaps_exr.html

It works on Chrome (setting aside visual artefacts as reported on https://github.com/mrdoob/three.js/issues/16409)

[Mugen87]

Related: https://stackoverflow.com/questions/45379051/cant-render-on-floating-point-rgb-texture-on-firefox

It seems Firefox does only support floating point textures that have RGBA format. The loaded EXR texture in the example has RGB format.

[silvainSayduck]

I'm almost positive that the example (and my own code using EXR) worked on Firefox just a few weeks ago, so I guess something has changed on Firefox end.

In any case, this workaround for Android seems to also work in this case: https://github.com/mrdoob/three.js/issues/15343#issuecomment-457528822

[Mugen87]

I wonder if it's not better if EXRLoader would always return RGBA textures. As mentioned by @greggman at stackoverflow, it's not required that a WebGL (1) implementation has to support RGB floating point textures.

[WestLangley]

Similarly, the HDR example , which uses HDRCubeTextureLoader is also broken on Firefox _when the output data type is changed_ to THREE.FloatType or THREE.HalfFloatType.

[silvainSayduck]

Still broken on Firefox 68.0.1 (MacOS)

[Mugen87]

We can fix the issue if we switch to RGBA. However, I'm not sure everybody is okay with this change..

[silvainSayduck]

Hi @Mugen87 ,

In fact, a lot of devices are just breaking with the EXRLoader, I'm guessing related to the lack of support for RGB Floating point textures.
Right now, we need to wait for users to report that it doesn't work, and add a manual fix per reported device, which is not ideal since a lot of devices out there could still be breaking. Would it be possible to add a check of some sorts to the EXRLoader that would make sure it works (ie. at least check for RGB Floating point texture support)?
I realise this is half a support question instead of an issue, but it also still seems to me that this would be a good approach to make the EXRLoader production-ready.
I'm willing to add the needed checks, but I'm not sure how to figure out the exhaustive webGL extension/feature list that is required by the EXRLoader. Is there a way to figure that one out?

[silvainSayduck]

In case this might be of use to someone, I ended up using a modified version of @colejd's snippet:

const _checkSupport = (textureFormat, textureType) => {
  const canvas = document.createElement("canvas");
  const renderer = new THREE.WebGLRenderer({
    canvas
  });
  const renderTarget = new THREE.WebGLRenderTarget(16, 16, {
    format: textureFormat,
    type: textureType
  });
  renderer.render(new THREE.Scene(), new THREE.Camera(), renderTarget);
  var gl = renderer.context;
  var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
  const hasSupport = status === gl.FRAMEBUFFER_COMPLETE;
  renderTarget.dispose();
  renderer.dispose();
  return hasSupport;
};

Also, here are the results of my tests on different browsers/platforms:

• Chrome (macOS + Win)
• Firefox (macOS + Win)
• IE11
• Edge
• Opera (Win)
• iOS (Safari)
• Android (Chrome)
• ChromeOS (Chrome)

I tested support for combinations of THREE.RGBFormat / THREE.RGBAFormat and THREE.FloatType / THREE.HalfFloatType
Results
RGBA + Float -> Edge / Chrome / Opera / Firefox / IE11 / ChromeOS
RGBA + HalfFloat -> Edge / Chrome / Opera / Firefox / ChromeOS / iOS
RGB + Float -> Edge / Chrome / Opera / IE11
RGB + HalfFloat -> Edge / Chrome / Opera

[Mugen87]

@richardmonette What do you think about this issue? Couldn't EXRLoader just always return a RGBA texture in order to improve browser compatibility?