Announcing Foxglove's New 3D Panel

A few months ago, we announced the beta release of Foxglove’s new 3D panel.

Today, we’re excited to announce that we’ve incorporated your feedback and are ready to release the latest iteration of our most popular panel. By reimplementing the 3D panel using three.js, we’re able to provide better rendering performance, a more streamlined user experience, and support for new messages.

Let’s walk through what exactly has changed!

New rendering improvements

Rewriting the 3D panel has unlocked some exciting new features in the process.

For example, it now supports new visualization primitives like cubes, spheres, and lines – previously accessible only via the ROS MarkerArray message type. With our newly released SceneUpdate schema, non-ROS users can now also take full advantage of the panel’s data visualization features. (Stay tuned for a tutorial demonstrating how to use these scene updates!)

We’ve also improved rendering support for transparent objects, so that you can more easily differentiate between stacked objects when navigating complex scenes.

The old 3D panel had trouble rendering overlapping markers with varying opacities. The new 3D panel, however, renders them perfectly.

And finally, we've added support for more renderable types – including multiple grids and URDF models, more mesh types, and camera images projected into 3D space.

Optimized user experience

The 3D panel is one of the most visually rich and information-dense panels in Foxglove’s suite. Previously, the topic selection controls covered up a significant portion of the panel view, and topic settings appeared in a modal dialog that completely obscured the scene you were trying to configure!

That’s why we’ve completely overhauled the panel’s interface to make it easier to use. Most noticeably, we’ve moved both the topic selector and settings editor into the sidebar, to maximize the real estate available to inspect your 3D data. Instead of obscuring your markers, settings are now neatly tucked away in an unobtrusive sidebar that can be collapsed when you want to focus on your 3D scene.

Improved maintainability

A major driver for this rewrite was maintainability. Our old 3D panel was written using regl (WebGL library that is no longer actively maintained) and worldview (regl rendering library written at Cruise that is also no longer maintained). With the rewrite, we switched our foundation to three.js – the most popular JavaScript 3D rendering library.

Because three.js is a large community-backed project, we knew we could rely on plentiful example code, TypeScript definitions, and ongoing support and continued improvements to the library. With this new foundation, we’ve reduced technical debt and better equipped ourselves to add new features – like our new SceneEntity schemas – quickly and confidently.

Performance gains

While performance was not the main reason we switched to three.js, the transition allowed us to leverage an open source codebase that implements innovative and performant rendering techniques. This opens the door for us to tap into the library’s most cutting-edge rendering techniques such as WebGPU in the future, to improve the performance and visual fidelity of various renderable types in Foxglove.

Stay tuned 💜

Rich and accurate data visualizations are critical to progress in the robotics industry. Leveraging these visualizations helps us explore and understand data more efficiently, iterate more intelligently, and get robots to market more quickly. By reducing the number of hours spent wading through terabytes of data and increasing the amount of time spent on the hardest robotics challenges, Foxglove frees up our best minds to focus on what they know best – robotics.

As we continue iterating on this new panel, we’re excited to hear your thoughts! You can share your feedback with us on Discord, Twitter, or GitHub. Whatever your project or workflow, we hope this new and improved 3D panel makes building your robots easier than ever.