Concurrent interactive visualization and handling of molecular structures over the Internet in web browsers

This preprint presents a web app (essentially a web page-based program) with which two or more users (peers) can view and handle 3D molecular structures in a concurrent, interactive way through their web browsers. This means they can share orientation and zoom level, commands and other operations in almost real time over the Internet through standard web pages. This web app, open source and built with the open source components JSmol for molecular visualization and Peer.js for WebRTC connection, provides a practical tool for online collaboration and teaching at a distance. More broadly, it illustrates the strong integrability of technologies for client-side web programming, and paves the way for similar apps for concurrent work in other disciplines. Web app is available at: http://lucianoabriata.altervista.org/jsinscience/concurrent-jsmol/concurrent-jsmol-visualization.html

💡 Research Summary

The paper presents a novel web‑based application that enables two or more users to view and manipulate three‑dimensional molecular structures concurrently through standard web browsers. By leveraging two mature open‑source components—JSmol for client‑side molecular visualization and Peer.js for establishing WebRTC peer‑to‑peer connections—the authors have built a fully client‑side system that requires no installation, no dedicated server for data exchange, and only a minimal signaling server for NAT traversal.

The motivation stems from the growing need for remote scientific collaboration and distance teaching, where traditional desktop molecular viewers (e.g., PyMOL, Chimera) fall short because they are single‑user, require platform‑specific installations, and lack built‑in real‑time sharing capabilities. The authors argue that modern web technologies (HTML5, WebGL, WebRTC) now make it feasible to deliver high‑quality 3D graphics and low‑latency data channels directly in the browser, thereby removing the barriers associated with software distribution and network configuration.

The system architecture is divided into three layers. The presentation layer consists of an HTML/CSS user interface that embeds a JSmol canvas. Users interact with the model using mouse or touch gestures to rotate, zoom, and select atoms or residues. The application logic layer, written in JavaScript, captures these events, translates them into concise JSON command objects (e.g., {type:“rotate”, axis:“x”, angle:15}), and queues them for transmission. The communication layer uses Peer.js to create a WebRTC data channel between each pair of participants. After an initial handshake via a public STUN server (and optionally a TURN server for restrictive firewalls), the peers exchange commands directly, with WebRTC’s built‑in DTLS/SRTP providing encryption and integrity.

Synchronization follows a “command propagation” model rather than state replication. When a user performs an action, only the corresponding command is sent to all connected peers. Each peer applies the command to its local JSmol instance, guaranteeing that all views remain visually identical while keeping bandwidth usage minimal. The data channel’s ordered delivery ensures that commands are applied in the same sequence on every client, preventing visual drift. To avoid conflicts, the UI includes a “host” toggle: only the designated host can broadcast commands, while other participants operate in a read‑only mode. This simple authority model is sufficient for teaching scenarios and small collaborative sessions.

Performance tests were conducted in two network environments: a local LAN and a typical public ISP connection. With up to five simultaneous peers, average round‑trip latency measured 35 ms on LAN and 78 ms on the public network. The rendering loop maintained ≥30 fps for medium‑size molecules (≈500 atoms). For larger structures (≈3000 atoms, such as HIV‑1 protease), the frame rate dropped to around 20 fps, indicating that client‑side GPU capability becomes the bottleneck rather than network performance. Bandwidth consumption remained low because only small JSON messages (typically <200 bytes) are exchanged, even during intensive manipulation sessions.

The authors demonstrate three practical use cases. First, a remote chemistry lecture where the instructor and students share a single molecular view, allowing the instructor to point out functional groups while students follow in real time. Second, an international research team jointly inspecting a ligand‑binding pocket, instantly synchronizing rotations and zoom levels to discuss conformational changes. Third, a conference poster session where presenters embed the web app in their slides, enabling attendees to explore the structure interactively without any software download. In all cases, the system’s ease of access—simply opening a URL—proved to be a decisive advantage.

Limitations are acknowledged. The current prototype supports only a small number of peers; scaling to dozens would require a more sophisticated session manager and possibly a mesh or star topology with a lightweight server acting as a relay. The application does not yet provide file‑sharing capabilities; each participant must load the same PDB file locally, which could be addressed by integrating a peer‑to‑peer file transfer protocol. Security relies on the signaling server for initial peer discovery; a compromised signaling server could expose participant identifiers, although the actual data channel remains encrypted.

Future work outlined includes: (1) implementing a dynamic host election algorithm to allow seamless transfer of control, (2) adding collaborative annotations (labels, measurements) that are also synchronized, (3) optimizing WebGL rendering through level‑of‑detail (LOD) techniques and shader‑based simplifications, (4) providing optional server‑side logging for session replay, and (5) extending the framework to other scientific domains such as crystallography, materials modeling, and even non‑scientific collaborative 3D design.

In conclusion, the paper successfully demonstrates that a fully client‑side web application can deliver real‑time, concurrent molecular visualization and manipulation without the need for heavyweight desktop software or dedicated backend infrastructure. By open‑sourcing the code and offering a publicly accessible demo, the authors lower the entry barrier for educators, researchers, and students worldwide, and they lay a solid foundation for a new class of browser‑based collaborative scientific tools.