Skip to main content

On demand render (ODR)

The viewer now supports on demand render (ODR) for products that are rendered on demand rather than pre-rendered. To enable ODR for your products, please contact your Customer Success representative.

The viewer supports ODR mode for two items: <cylindo-360> and <cylindo-360-frame>.

Configuring ODR Frames​

For <cylindo-360>, you must specify a frames array attribute, as only a specific subset of frames configured at the product level are available in ODR mode. The default frames are [1,9,17,25]. Be sure to check your product settings for the exact frame configuration.

Similarly, for <cylindo-360-frame>, specify one of the supported ODR frames using the frame attribute.

info

In ODR mode, the standard linear progress bar is replaced with a circular loading spinner.

Enabling ODR mode disables the zoom functionality and zoom buttons for 360 frame items, as zooming is not supported in ODR mode for single frames.

Basic Usage​

Pass the on-demand-render="true" attribute along with the appropriate frames or frame attributes to your viewer items:

Result
Loading...
Live Editor
<cylindo-viewer
  customer-id="5098"
  code="SALSIE FF"
  configuration="articlenumber:24348263"
>
  <cylindo-360 frames="[1,9,17,25]" on-demand-render="true" interaction-prompt="none" />
  <cylindo-360-frame frame="9" on-demand-render="true" />
</cylindo-viewer>

Styling the ODR Loader​

You can customize the appearance of the ODR circular spinner using CSS custom properties on the viewer element.

:root {
  --spinner-size: 36px; /* Sets the diameter of the circular loader (default: 36px) */
  --spinner-color: #0009; /* Sets the stroke color of the circular loader (default: #0009) */
}

Navigate back and forth between these items to see the ODR loader.

Result
Loading...
Live Editor
<div className="styled-odr-loader">
  {/* For the purpose of the example, we are scoping the styles in the div element. */}
  <style>
    {`
      .styled-odr-loader cylindo-viewer {
        --spinner-size: 46px;
        --spinner-color: #50f30f;
      }
    `}
  </style>
  <cylindo-viewer
    customer-id="5098"
    code="SALSIE FF"
    configuration="articlenumber:24348263"
  >
    <cylindo-360 frames="[1,9,17,25]" on-demand-render="true" interaction-prompt="none" />
    <cylindo-360-frame frame="9" on-demand-render="true" />
  </cylindo-viewer>
</div>

Feature and Options with ODR​

When switching features in ODR mode, the viewer will load the required frame for the newly selected feature set on demand while displaying the circular loader.

Request Queuing and Cancellation​

  • Queuing: If features are changed while a render is already in progress, the new request is placed in a queue. Only one request can be queued at a time—if another change occurs before the active render finishes, the previously queued request is dismissed and replaced by the latest selection.
  • Cancellation: If an active render operation is interrupted before completion (such as when switching items or navigating away), an on-demand-render-cancel event is triggered.
info

While the viewer is loading odr frames, if features are changed, they will be queued. If the user changes features multiple times while the viewer is loading, only the last feature change will be applied once the viewer has finished loading.

Event Log

For more information on the events triggered during ODR (on-demand-render-complete, on-demand-render-queued, and on-demand-render-cancel), please refer to the API documentation