MO Viewer

A static, dependency-free browser app for viewing molecular orbital / density isosurfaces from Gaussian cube files. Drop a .cube file in, get an interactive 3D view of the molecule plus its isosurface, tweak the styling, and export a print-quality PNG or a reusable settings file — all client-side, no server, no build step.

Open index.html directly (file:// works fine) or serve the folder with any static file server.

Features

• Cube file import — drag-and-drop or click-to-browse loading of .cube / .cub files (Gaussian's cubegen, ORCA's orca_plot, etc.). Atom positions are parsed directly; the volumetric grid is handed off to 3Dmol.js as-is for the isosurface pass.
• Isosurface controls — isovalue (log-scale slider covering 0.0005–1), opacity, independent show/hide and color for the positive and negative lobes.
• High-res isosurface (toggle) — locally supersamples the grid around the non-negligible field region (Catmull-Rom, C1-continuous — no new creases at the original cell boundaries) plus a light Gaussian denoise (σ = 0.35, keeps peak values within ~4% of the raw cube), fixed at 4× resolution. Fixes the blocky/faceted look small, steep features (e.g. tight spin density right at a metal center) otherwise get when the isosurface region only spans a handful of the original cube's voxels. Off by default; building it costs roughly 1–2 s one-time when switched on (cached afterwards, cleared on loading a new file).
• Molecule rendering — CPK-colored atom spheres, bicolor bonds (auto-detected from covalent radii with an adjustable tolerance), adjustable bond radius, click-to-toggle atom labels, and an element legend.
• Show axes (toggle) — overlays a small X/Y/Z axis indicator (red/green/blue) in the corner of the 3D view, tracking the cube file's real molecule-frame axes as you rotate — handy for checking a feature's orientation directly against the raw x/y/z values in the cube header.
• Per-element overrides — radius, color, and visibility can be customized per element once a file is loaded.
• Dark mode aware — the 3D background and a few low-contrast element colors adapt to the OS color-scheme preference.
• PNG export — renders the current view at higher resolution on a white background, auto-crops tightly around the molecule/isosurface, redraws the legend and (if enabled) the axes indicator onto the export canvas, and embeds 300 dpi metadata — suitable for pasting straight into a paper or slide deck.
• Settings save/load/reset — every control in the right-hand sidebar (isosurface incl. the high-res toggle, bond styling, legend, axes indicator, per-element overrides) can be saved to a JSON file, reloaded later, or reset back to the defaults in one click.

Using it

1. Open index.html in a browser and drop a cube file onto the field at the top (or click it to browse).
2. Adjust isosurface, molecule, and per-element styling from the sidebar. Click an atom in the 3D view to toggle its label.
3. Drop a different cube file at any point to replace the current view — the old molecule, bonds, labels, and isosurface are cleared first.
4. Export PNG (top of the viewer panel) saves a high-resolution, white-background, 300 dpi PNG named after the loaded cube file.
5. Settings (bottom of the sidebar):
   • Save settings… downloads the current sidebar configuration as JSON.
   • Load settings… opens a previously saved JSON file and applies it.
   • Reset to default restores every sidebar control to its initial value.

Project structure

index.html                    Page shell / layout
static/
  css/style.css                All styling (light/dark aware)
  vendor/3dmol.min.js           3Dmol.js (bundled, see 3dmol.LICENSE)
  js/
    chem.js                     Element colors/radii + bond detection
    cube-import.js               Gaussian cube file parser (atoms + raw text)
    cube-supersample.js          Optional high-res isosurface: local trim +
                                  Catmull-Rom supersampling + Gaussian
                                  denoise, builds a 3Dmol VolumeData object
                                  directly (no cube-text round trip)
    viewer.js                    3Dmol.js wrapper: molecule + isosurface
                                  rendering, PNG export/crop/dpi-tagging
    ui.js                        DOM-building helpers (isovalue log-scale
                                  mapping, per-element control rows)
    app.js                       App state, event wiring, settings
                                  save/load/reset

Notes & limitations

• Multi-orbital cube files (header's atom count is negative, i.e. the file packs several MOs together) are detected and flagged in the file info line, but only a single volumetric value per voxel is rendered — the surface shown may not correspond to the orbital you expect. Most cubegen/orca_plot exports are one MO per file, which is the common case this targets.
• PNG export resolution is capped (default up to 3000 px per side) to keep the marching-cubes + readback step responsive; this is print-quality for figures but not meant for poster-sized exports.
• High-res isosurface only supports orthogonal (axis-aligned) cube grids — the same assumption the regular cube parser makes, and true for essentially all cubegen/orca_plot output. Its Gaussian denoise step (fixed σ = 0.35) genuinely changes the underlying values, not just how they're interpolated — it's tuned to keep peak values within ~4% of the raw cube, but don't rely on the high-res surface for exact quantitative peak heights.
• Everything runs entirely in the browser — no file ever leaves your machine.

Dependencies

Only 3Dmol.js (bundled under static/vendor/, see 3dmol.LICENSE). No build tooling, no package manager, no bundler — just static files.

3Dmol.js

This application uses 3Dmol.js for molecular visualization.

3Dmol.js is licensed under a permissive BSD-3-Clause license (see static/vendor/3dmol.LICENSE).

Please cite:

Rego, N. and Koes, D. (2015). 3Dmol.js: molecular visualization with WebGL. Bioinformatics, 31(8), 1322–1324. https://academic.oup.com/bioinformatics/article/31/8/1322/213186