Three.js: HDR cubemap background banding artifacts

[Ben-Mack]

The artifacts shown right in current three.js HDR envmap example: https://threejs.org/examples/?q=hdr#webgl_materials_envmaps_hdr
It only appears in HDR envMap, RGBM16 is fine.

It's not browser or device specific as I've checked on Chrome, Firefox, Desktop and Android.

[WestLangley]

The cause is this:

hdrCubeMap.magFilter = THREE.LinearFilter;

You will get artifacts applying linear filtering to RGBE-encoded images. You can do this:

hdrCubeMap.magFilter = THREE.NearestFilter;

but that will lead to blocky artifacts.

If it is supported by the browser/hardware, you can use this pattern with linear filtering:

hdrCubeMap = new HDRCubeTextureLoader()
    .setDataType( THREE.FloatType ) // or THREE.HalfFloatType