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
TiledImageand
Tileclasses into the
Drawerclass, which inherits from a new
DrawerBasebase class. The
TiledImageand
Tileclasses now handle the logic of managing tile positioning and image data, with cleaner separation from details of the rendering process.
DrawerBasedefines 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
DrawerBaseand implements the public API. The constructor of this class can be passed in during construction of the viewer using the new
customDraweroption.
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, ... });