Use a WebGL drawer implementation (using three.js) instead of the default context2d drawer

The context2d drawing operations in core OpenSeadragon have been consolidated from the
TiledImage
and
Tile
classes into the
Drawer
class, which inherits from a new
DrawerBase
base class. The
TiledImage
and
Tile
classes now handle the logic of managing tile positioning and image data, with cleaner separation from details of the rendering process.
DrawerBase
defines a public API that core OpenSeadragon code uses to interact with the drawer implementation. To use a custom drawer/render, define a new class that inherits from
DrawerBase
and implements the public API. The constructor of this class can be passed in during construction of the viewer using the new
customDrawer
option.
    import { ThreeJSDrawer } from './threejsdrawer.js';

    let viewer = OpenSeadragon({
        ...
        drawer: ThreeJSDrawer,
        ...
    });
                

Compare behavior of Context2d and WebGL (via three.js) drawers

Use default OpenSeadragon viewer to pan/zoom

WebGL drawer linked using event listeners

Image options (drag and drop to re-order images)

HTMLDrawer: legacy pre-HTML5 drawer that uses <img> elements for tiles

HTML-based rendering can be selected in two different ways:
    // via the 'html' drawer option:
    let viewer = OpenSeadragon({
        ...
        drawer: 'html',
        ...
    });

    // or by passing the HTMLDrawer constructor
    let viewer = OpenSeadragon({
        ...
        drawer:OpenSeadragon.HTMLDrawer,
        ...
    });