Support HDR environment maps in Meshcat blocked by `Meshcat` server

[SeanCurtis-TRI]

The problem

As of #19837, Meshcat can specify an environment map. However, the images that are supported (png, jpg) can only support low dynamic range images. This has an appreciable impact on the illumination of the scene and underutilizes the power of environment maps in PBR.

Ideally, we should also be supporting typical HDR image formats (rgbe, hdr). These are images that encode not a normalized color space value at each pixel but a radiance value (an amount of light) at each pixel allowing for highly dynamic lighting effects.

meshcat uses three.js as the underlying graphics engine. three.js has an RGBELoader. However, it has been architected differently from three.js's TextureLoader which we use to load png/jpg images. The RGBELoader (via the DataTextureLoader) does not appear to accept urls with the data:/ prefix.

This means we can't simply marshall the base64-encoded bits of an image and stream them over to meshcat. We need to provide a server that will actually host the image.

I've submitted a question on the three.js form to confirm.

The solution

Drake's Meshcat class needs to serve as a host more generally for textures, meshes, etc. In addition to unblocking HDR environment maps, this will also allow browsers to enable their caches more intelligently.

[jwnimmer-tri]

For reference, our meshcat server can serve files now just fine, and indeed already serves the environment map over a http:// URL.

Maybe this is actually finished, except for a few API docs that mention HDR?

[jwnimmer-tri]

Nope, not finished.

Even if I set Content-Type: image/vnd.radiance on the CAS URL, Chrome fetches the URL but it doesn't show on screen and Chome shows a console error: Failure to load the requested environment map; reverting to none. cas-v1-a34594492935ff05d142ff7ccbb7f82f0a51f91c79cbd09ab06f0b11527acea7.