Plenoview

Embed Plenoview

Publish interactive OpenEXR inspection directly inside documentation, papers, datasets, and project pages. The hosted web component wraps the Plenoview viewer in an iframe and can load EXR sources declaratively or through JavaScript.

Hosted component

Load embed/plenoview.js, then place <plenoview-viewer> where the viewer should appear.

<script src="https://elerac.github.io/plenoview/embed/plenoview.js"></script>

Embed examples

Each example shows the code used by the page and the live rendered viewer beside it. The snippets are written for a page inside an embed/ directory.

Basic custom element

The smallest embed loads the hosted script once and adds a <plenoview-viewer> element with a source and height. 

<script src="https://elerac.github.io/plenoview/embed/plenoview.js"></script>

<plenoview-viewer
  src="../cbox_rgb.exr"
  height="340">
</plenoview-viewer>

Named source with channel panel

Add name for the embed toolbar label and set bottom-panel="channels" when channel selection is more useful than the pixel probe readout. 

<plenoview-viewer
  src="../cbox_rgb.exr"
  name="Cornell Box RGB"
  bottom-panel="channels"
  height="360">
</plenoview-viewer>

Panorama view

Set view="panorama" for equirectangular HDRI data. This Poly Haven sample demonstrates embedded panorama mode with auto-rotation and hides the bottom panel to keep the camera view clean. 

<plenoview-viewer
  src="https://dl.polyhaven.org/file/ph-assets/HDRIs/exr/1k/brown_photostudio_02_1k.exr"
  name="Poly Haven Brown Photostudio 02"
  view="panorama"
  panorama-auto-rotate="true"
  bottom-panel="none"
  height="360">
</plenoview-viewer>

3D view

Set view="3d" for EXR files that include RGB plus depth or position data. Plenoview opens the compact point-cloud viewer when it can infer a source such as Z or P.X/P.Y/P.Z, and the embed can animate an orbit for quick shape inspection. 

<plenoview-viewer
  src="../middlebury_chess1_rgb_p.exr"
  name="Middlebury RGB + Position"
  view="3d"
  three-d-auto-orbit="true"
  bottom-panel="none"
  height="360">
</plenoview-viewer>

Deferred loading

Use auto-load="false" when an EXR should load only after the reader opts in. This is useful for pages with several heavy examples. 

<plenoview-viewer
  src="../cbox_rgb.exr"
  name="Deferred Cornell Box"
  auto-load="false"
  height="340">
</plenoview-viewer>

JavaScript API and local files

Create a viewer from JavaScript when the source comes from controls, application state, or a local file input. 

const controller = window.Plenoview.create("#plenoview-js-example", {
  height: "360",
  bottomPanel: "channels"
});

document.querySelector("#load-sample").addEventListener("click", () => {
  controller.loadUrl("../cbox_rgb.exr", { name: "Cornell Box RGB" });
});

document.querySelector("#local-exr").addEventListener("change", (event) => {
  const file = event.target.files?.[0];
  if (file) controller.loadFile(file, { name: file.name });
});

Element attributes

These attributes configure the iframe wrapper. Unknown or empty values fall back to the default embed behavior.

Attribute Values Use
src URL or relative path EXR source to load.
name Text Custom toolbar label and iframe title.
width CSS size or pixels Host element width. Defaults to 100%.
height CSS size or pixels Iframe height. Defaults to 320px.
view image, panorama, 3d Initial viewer mode when the loaded data supports it.
bottom-panel probe, channels, none Compact panel shown below the embedded viewport.
panorama-auto-rotate true or false Rotate panorama yaw automatically in embedded panorama view.
panorama-rotation-speed Degrees per second Signed panorama rotation speed. Defaults to 6.
three-d-auto-orbit true or false Animate a front-biased orbit in embedded 3D view.
three-d-orbit-speed Degrees per second Maximum center yaw speed. Defaults to 6.
three-d-orbit-yaw Degrees 3D orbit yaw amplitude. Defaults to 12.
three-d-orbit-pitch Degrees 3D orbit pitch amplitude. Defaults to 2.
auto-load true or false Set to false to wait for a click before fetching the source.
viewer-url Viewer app URL Override the iframe target when self-hosting the app.
source-origin auto, parent, viewer Choose whether the parent page or iframe fetches the EXR source.

JavaScript methods

window.Plenoview.create returns a controller for loading sources and cleaning up the embedded element.

Method Arguments Use
loadUrl(src, options) src, optional name, view, sourceOrigin, panorama animation fields, 3D orbit fields Load an EXR URL from the parent page or viewer iframe.
loadFile(file, options) File, optional name, view, panorama animation fields, 3D orbit fields Load a browser File object, such as one selected through a local file input.
setView(view) image, panorama, or 3d Update the viewer mode attribute and refresh the embedded iframe.
setPanoramaAutoRotate(enabled) true or false Enable or disable panorama auto-rotation without replacing the iframe.
setPanoramaRotationSpeed(speed) Degrees per second Set signed panorama rotation speed without replacing the iframe.
setThreeDAutoOrbit(enabled) true or false Enable or disable 3D orbit without replacing the iframe.
setThreeDOrbitSpeed(speed) Degrees per second Set 3D orbit speed without replacing the iframe.
setThreeDOrbitYaw(yaw) Degrees Set 3D orbit yaw amplitude without replacing the iframe.
setThreeDOrbitPitch(pitch) Degrees Set 3D orbit pitch amplitude without replacing the iframe.
destroy() None Remove the embedded custom element from the page.