search

meshcat-dev / meshcat

Remotely-controllable 3D viewer, built on top of three.js
MIT License
256 stars 48 forks source link

Correct background with orthographic cameras #150

Closed SeanCurtis-TRI closed 1 year ago

SeanCurtis-TRI commented 1 year ago

three.js does not support rendering a background texture with environment-like mapping (e.g., equirectangular or cube mapping) with an orthographic camera. Attempting to do so converts the equivalent environment as a small box with unit-length half measures.

Therefore, we need two different sets of background textures based on whether we have a perspective or orthographic projection. This only impacts the texture used for the rendered background. The environment map (which affects the illumination of objects with PBR materials) will continue to be used when available, or using the gradient otherwise.

background.html has been updated to test/explore the behavior. It has been extended with some new controls, a feedback panel, and a cube with a simple PBR material. Various combinations of camera projection and environment configuration can be explored and the observed behavior reconciled with the documented expectations.

Finally, the background environment map has been pulled out of the gltf html file to reduce file bloat. It is now solely defined and used in background.html.

RussTedrake commented 1 year ago

I've tested (love the new background.html test!), and run the npm build. :lgtm: thanks.