meshcat-dev / meshcat

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

Extend "Background" to include an environment map #148

Closed SeanCurtis-TRI closed 1 year ago

SeanCurtis-TRI commented 1 year ago

Basic 2D images (jpg, png, etc.) can now be loaded as environment maps. This affects the illumination of objects in the scene for PBR materials.

Furthermore, we've added GUI controls for the default gradient colors so it can be set in session rather than strictly through the API. The addition of GUI controls means that the preferred path to Background is no longer simply /Background, but /Background/<object>. That said, the old spelling still works but prompts users to change their reference.

Finally, we've modified the meshfile_object.gltf.html test/example to include the environment map (it already has an object which can easily be made metallic to show reflection of the environment map). The page also gets an encoded environment map -- a custom image representing the classic Cornell box.

The basic logic is that if an environment map is defined, it is used for both background and material environment. However, there is an option for those who feel the rendered environment map is too distracting; it can be decoupled from the environment map and simply render the gradient -- the gradient will not illuminate materials in this case.


This change is Reviewable

SeanCurtis-TRI commented 1 year ago

image

You can see the effect of the environment map in this image that shows a metallic cube reflecting both the light and the Cornell-box environment.

SeanCurtis-TRI commented 1 year ago

You should also be able to confirm that the gradients in the other test html files still work (and are now editable in browser).