mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 05:06:09 +03:00
Code Issues Projects Releases Wiki Activity

ThreeJSRenderer nearly complete, starting refactor of core to support plugin drawers.

Browse Source
This commit is contained in:
Tom 2023-02-21 18:59:40 -05:00
parent ebab356c20
commit f9ab63944b
9 changed files with 52361 additions and 588 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
src/drawer.js
View File

@ -94,7 +94,7 @@ $.Drawer = function( options ) {
* @member {Object} context
* @memberof OpenSeadragon.Drawer#
*/
this.context = this.useCanvas ? this.canvas.getContext( "2d" ) : null;
this.context = this.useCanvas ? this.canvas.getContext( this.useCanvas.contextType || "2d" ) : null;
/**
* Sketch canvas used to temporarily draw tiles which cannot be drawn directly
@ -142,33 +142,6 @@ $.Drawer = function( options ) {
/** @lends OpenSeadragon.Drawer.prototype */
$.Drawer.prototype = {
// deprecated
addOverlay: function( element, location, placement, onDraw ) {
$.console.error("drawer.addOverlay is deprecated. Use viewer.addOverlay instead.");
this.viewer.addOverlay( element, location, placement, onDraw );
return this;
},
// deprecated
updateOverlay: function( element, location, placement ) {
$.console.error("drawer.updateOverlay is deprecated. Use viewer.updateOverlay instead.");
this.viewer.updateOverlay( element, location, placement );
return this;
},
// deprecated
removeOverlay: function( element ) {
$.console.error("drawer.removeOverlay is deprecated. Use viewer.removeOverlay instead.");
this.viewer.removeOverlay( element );
return this;
},
// deprecated
clearOverlays: function() {
$.console.error("drawer.clearOverlays is deprecated. Use viewer.clearOverlays instead.");
this.viewer.clearOverlays();
return this;
},
/**
* This function converts the given point from to the drawer coordinate by
@ -206,63 +179,9 @@ $.Drawer.prototype = {
context.clip();
},
/**
* Set the opacity of the drawer.
* @param {Number} opacity
* @returns {OpenSeadragon.Drawer} Chainable.
*/
setOpacity: function( opacity ) {
$.console.error("drawer.setOpacity is deprecated. Use tiledImage.setOpacity instead.");
var world = this.viewer.world;
for (var i = 0; i < world.getItemCount(); i++) {
world.getItemAt( i ).setOpacity( opacity );
}
return this;
},
/**
* Get the opacity of the drawer.
* @returns {Number}
*/
getOpacity: function() {
$.console.error("drawer.getOpacity is deprecated. Use tiledImage.getOpacity instead.");
var world = this.viewer.world;
var maxOpacity = 0;
for (var i = 0; i < world.getItemCount(); i++) {
var opacity = world.getItemAt( i ).getOpacity();
if ( opacity > maxOpacity ) {
maxOpacity = opacity;
}
}
return maxOpacity;
},
// deprecated
needsUpdate: function() {
$.console.error( "[Drawer.needsUpdate] this function is deprecated. Use World.needsDraw instead." );
return this.viewer.world.needsDraw();
},
// deprecated
numTilesLoaded: function() {
$.console.error( "[Drawer.numTilesLoaded] this function is deprecated. Use TileCache.numTilesLoaded instead." );
return this.viewer.tileCache.numTilesLoaded();
},
// deprecated
reset: function() {
$.console.error( "[Drawer.reset] this function is deprecated. Use World.resetItems instead." );
this.viewer.world.resetItems();
return this;
},
// deprecated
update: function() {
$.console.error( "[Drawer.update] this function is deprecated. Use Drawer.clear and World.draw instead." );
this.clear();
this.viewer.world.draw();
return this;
},
/**
* @returns {Boolean} True if rotation is supported.
@ -761,7 +680,92 @@ $.Drawer.prototype = {
x: sketchCanvasSize,
y: sketchCanvasSize
};
}
},
// deprecated functions
// deprecated
addOverlay: function( element, location, placement, onDraw ) {
$.console.error("drawer.addOverlay is deprecated. Use viewer.addOverlay instead.");
this.viewer.addOverlay( element, location, placement, onDraw );
return this;
},
// deprecated
updateOverlay: function( element, location, placement ) {
$.console.error("drawer.updateOverlay is deprecated. Use viewer.updateOverlay instead.");
this.viewer.updateOverlay( element, location, placement );
return this;
},
// deprecated
removeOverlay: function( element ) {
$.console.error("drawer.removeOverlay is deprecated. Use viewer.removeOverlay instead.");
this.viewer.removeOverlay( element );
return this;
},
// deprecated
clearOverlays: function() {
$.console.error("drawer.clearOverlays is deprecated. Use viewer.clearOverlays instead.");
this.viewer.clearOverlays();
return this;
},
// deprecated
needsUpdate: function() {
$.console.error( "[Drawer.needsUpdate] this function is deprecated. Use World.needsDraw instead." );
return this.viewer.world.needsDraw();
},
// deprecated
numTilesLoaded: function() {
$.console.error( "[Drawer.numTilesLoaded] this function is deprecated. Use TileCache.numTilesLoaded instead." );
return this.viewer.tileCache.numTilesLoaded();
},
// deprecated
reset: function() {
$.console.error( "[Drawer.reset] this function is deprecated. Use World.resetItems instead." );
this.viewer.world.resetItems();
return this;
},
// deprecated
update: function() {
$.console.error( "[Drawer.update] this function is deprecated. Use Drawer.clear and World.draw instead." );
this.clear();
this.viewer.world.draw();
return this;
},
/**
* Set the opacity of the drawer.
* @param {Number} opacity
* @returns {OpenSeadragon.Drawer} Chainable.
*/
setOpacity: function( opacity ) {
$.console.error("drawer.setOpacity is deprecated. Use tiledImage.setOpacity instead.");
var world = this.viewer.world;
for (var i = 0; i < world.getItemCount(); i++) {
world.getItemAt( i ).setOpacity( opacity );
}
return this;
},
/**
* Get the opacity of the drawer.
* @returns {Number}
*/
getOpacity: function() {
$.console.error("drawer.getOpacity is deprecated. Use tiledImage.getOpacity instead.");
var world = this.viewer.world;
var maxOpacity = 0;
for (var i = 0; i < world.getItemCount(); i++) {
var opacity = world.getItemAt( i ).getOpacity();
if ( opacity > maxOpacity ) {
maxOpacity = opacity;
}
}
return maxOpacity;
},
};
}( OpenSeadragon ));

1006
src/tile.js
View File

File diff suppressed because it is too large Load Diff

63
src/tiledimage.js
View File

@ -307,6 +307,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
if (xUpdated || yUpdated || scaleUpdated || degreesUpdated) {
this._updateForScale();
this._raiseBoundsChange();
this._needsDraw = true;
return true;
}
@ -413,7 +414,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
var yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y;
var bounds = this.source.getTileBounds(level, xMod, yMod);
if (this.getFlip()) {
bounds.x = 1 - bounds.x - bounds.width;
bounds.x = Math.max(0, 1 - bounds.x - bounds.width);
}
bounds.x += (x - xMod) / numTiles.x;
bounds.y += (this._worldHeightCurrent / this._worldWidthCurrent) * ((y - yMod) / numTiles.y);
@ -427,6 +428,46 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
return new $.Point(this.source.dimensions.x, this.source.dimensions.y);
},
/**
* Returns the x position and width of each column and y position and height of each row
* @function
* @param {Number} level
* @returns {Object} Dictionary which defines numRows, numColumns,
* dimensions (in pixels), normalizedDimensions (by image width), rowInfo (Array of [x, width]),
* and columnInfo (Array of [y, height]) for this level of the image
*/
getGridDefinition: function( level ) {
var numTiles = this.source.getNumTiles(level),
levelScale = this.source.getLevelScale(level),
tileWidth = this.source.getTileWidth(level) / levelScale,
tileHeight = this.source.getTileHeight(level) / levelScale,
size = this.getContentSize(),
def = {
numRows: numTiles.y,
numColumns: numTiles.x,
dimensions: size,
normalizedDimensions: size.divide(size.x),
rowInfo: [],
columnInfo: []
};
var i;
for(i = 0; i < numTiles.x; i++){
def.columnInfo[i] = {
x: i * tileWidth / size.x, // x is defined by regular grid spacing
width: (i === (numTiles.x - 1) ? Math.min(size.x - i * tileWidth, size.x) : tileWidth) / size.x, // width is standard except for last column
};
}
for(i = 0; i < numTiles.y; i++){
def.rowInfo[i] = {
y: i * tileHeight / size.x, // y is defined by regular grid spacing
height: (i === (numTiles.y - 1) ? Math.min(size.y - i * tileHeight, size.y) : tileHeight) / size.x, // height is standard except for last row
};
}
return def;
},
/**
* @returns {OpenSeadragon.Point} The TiledImage's content size, in window coordinates.
*/
@ -1272,8 +1313,10 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
}
// Perform the actual drawing
this._drawTiles(this.lastDrawn);
// Load the new 'best' tile
if (bestTile && !bestTile.context2D) {
this._loadTile(bestTile, currentTime);
@ -1776,6 +1819,24 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
tiledImage: _this
});
}
/**
* Triggered when a tile has just been loaded in memory. That means that the
* image has been downloaded and can be modified before being drawn to the canvas.
*
* @event tile-ready
* @memberof OpenSeadragon.Viewer
* @type {object}
* @property {*} data image data, the data sent to ImageJob.prototype.finish(), by default an Image object
* @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile.
* @property {OpenSeadragon.Tile} tile - The tile which has been loaded.
* @property {XMLHttpRequest} tileRequest - The AJAX request that loaded this tile (if applicable).
*/
_this.viewer.raiseEvent("tile-ready", {
tile: tile,
tiledImage: _this,
tileRequest: tileRequest,
data: data
});
_this._needsDraw = true;
}
}

35
src/tilesource.js
View File

@ -420,6 +420,41 @@ $.TileSource.prototype = {
return new $.Rect( px * scale, py * scale, sx * scale, sy * scale );
},
/**
* @function
* @param {Number} level
* @param {Number} x
* @param {Number} y
* @param {Boolean} [isSource=false] Whether to return the source bounds of the tile.
* @returns {OpenSeadragon.Rect} Either where this tile fits (in normalized coordinates unless imageCoordinates == true) or the
* portion of the tile to use as the source of the drawing operation (in pixels), depending on
* the isSource parameter, without overlap.
*/
getTileBoundsNoOverlap: function( level, x, y, isSource, imageCoordinates ) {
var dimensionsScaled = this.dimensions.times( this.getLevelScale( level ) ),
tileWidth = this.getTileWidth(level),
tileHeight = this.getTileHeight(level),
tileOverlap = this.tileOverlap || 0,
px = tileWidth * x,
py = tileHeight * y,
sx = tileWidth,
sy = tileHeight,
scale = 1.0 / dimensionsScaled.x;
sx = Math.min( sx, dimensionsScaled.x - px );
sy = Math.min( sy, dimensionsScaled.y - py );
if (isSource) {
return new $.Rect((x === 0 ? 0 : tileOverlap), (y === 0 ? 0 : tileOverlap), sx, sy);
} else if ( imageCoordinates ){
return new $.Rect( px, py, sx, sy).times(scale * this.width);
} else {
return new $.Rect( px, py, sx, sy).times(scale);
}
},
/**
* Responsible for retrieving, and caching the

18
test/demo/overlay.html
View File

@ -18,18 +18,34 @@
<input type="button" value="Rotate" id="rotate">
<span id="degrees">0deg</span>
</div>
<canvas id="test-canvas" width = "400" height="400" style="image-rendering: pixelated; position:fixed;right:10px;top:10px;width:400px;height:400px;background-color:white;border:thin gray solid;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('test-canvas');// width == height == 400
var context = canvas.getContext("2d");
context.fillRect(0, 0, 400, 400); // fill entire canvas with black rectangle
context.translate(200, 200); // translate to center
context.rotate(1 * Math.PI/180); // rotate by 1 degree
context.clearRect(-100, -100, 200, 200); // clear a 200 x 200 rectangle
context.fillRect(-100, -100, 100, 200); // draw a 100 x 200 rectangle in the left half
context.fillRect(-00, -100, 100, 200); // draw a 100 x 200 rectangle in the right half
window.context = context;
var viewer = OpenSeadragon({
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
tileSources: "../data/testpattern.dzi",
minZoomImageRatio: 0,
maxZoomPixelRatio: 10
maxZoomPixelRatio: 10,
subPixelRoundingForTransparency: OpenSeadragon.SUBPIXEL_ROUNDING_OCCURRENCES.ALWAYS
});
window.c = viewer.drawer.canvas.getContext("2d");
viewer.addHandler("open", function(event) {
viewer.world.getItemAt(0).source.hasTransparency = function(){ return true; }
viewer.viewport.rotateTo(1);
var elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "green";

841
test/demo/webgl-renderer.js Normal file
View File

@ -0,0 +1,841 @@
// import 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.149.0/three.min.js';
import '../lib/three.js';
const THREE = window.THREE;
const DEPTH_MULTIPLIER = 0.1;
export class ThreeJSRenderer extends OpenSeadragon.Drawer{
constructor(openSeadragonViewer, canvas){
this._viewer = openSeadragonViewer;
this._camera = null;
this._scene = null;
this._imageContainer = null;
this._renderer = null;
this._renderingContinously = false;
this._animationFrame = null;
if(canvas){
this._canvas = canvas;
} else {
let viewerCanvas = viewer.drawer.canvas;
this._canvas = viewer.drawer.canvas;
// let canvas = this._canvas = document.createElement('canvas');
// canvas.insertBefore(viewerCanvas);
// canvas.style.width = viewerCanvas.clientWidth+'px';
// canvas.style.height = viewerCanvas.clientHeight+'px';
// canvas.width = viewerCanvas.width;
// canvas.height = viewerCanvas.height;
// //make the test canvas mirror all changes to the viewer canvas
// viewer.addHandler("resize", function(){
// canvas.style.width = viewerCanvas.clientWidth+'px';
// canvas.style.height = viewerCanvas.clientHeight+'px';
// });
}
createThreeViewer(this);
}
renderFrame(){
if(this._animationFrame) {
cancelAnimationFrame(this._animationFrame);
}
this._animationFrame = requestAnimationFrame(()=>this.render());
}
render(){
// this.camera.updateProjectionMatrix();
this._renderer.render(this._scene, this._camera);
this._animationFrame = null;
if(this._renderingContinuously){
this.renderFrame();
}
}
renderContinuously(continuously){
if(continuously){
this._renderingContinuously = true;
} else {
this._renderingContinuously = false;
}
}
destroy(){
//clear all resources used by the renderer, geometries, textures etc
//to do: remove handlers from viewer and dispose of any remaining textures/materials
cleanupObject(this._scene);
cleanupObject(this._renderer);
cleanupObject(this._camera);
this._scene = null;
this._renderer = null;
this._camera = null;
}
//// Override API from OpenSeadragon.Drawer
/**
* This function will create multiple polygon paths on the drawing context by provided polygons,
* then clip the context to the paths.
* @param {OpenSeadragon.Point[][]} polygons - an array of polygons. A polygon is an array of OpenSeadragon.Point
* @param {Boolean} useSketch - Whether to use the sketch canvas or not.
*/
clipWithPolygons(polygons, useSketch) {
if (!this.useCanvas) {
return;
}
var context = this._getContext(useSketch);
context.beginPath();
polygons.forEach(function (polygon) {
polygon.forEach(function (coord, i) {
context[i === 0 ? 'moveTo' : 'lineTo'](coord.x, coord.y);
});
});
context.clip();
}
/**
* Destroy the drawer (unload current loaded tiles)
*/
destroy() {
//force unloading of current canvas (1x1 will be gc later, trick not necessarily needed)
this.canvas.width = 1;
this.canvas.height = 1;
this.sketchCanvas = null;
this.sketchContext = null;
}
/**
* Clears the Drawer so it's ready to draw another frame.
*/
clear(){
this.canvas.innerHTML = "";
if ( this.useCanvas ) {
var viewportSize = this._calculateCanvasSize();
if( this.canvas.width !== viewportSize.x ||
this.canvas.height !== viewportSize.y ) {
this.canvas.width = viewportSize.x;
this.canvas.height = viewportSize.y;
this._updateImageSmoothingEnabled(this.context);
if ( this.sketchCanvas !== null ) {
var sketchCanvasSize = this._calculateSketchCanvasSize();
this.sketchCanvas.width = sketchCanvasSize.x;
this.sketchCanvas.height = sketchCanvasSize.y;
this._updateImageSmoothingEnabled(this.sketchContext);
}
}
this._clear();
}
}
_clear(useSketch, bounds) {
if (!this.useCanvas) {
return;
}
var context = this._getContext(useSketch);
if (bounds) {
context.clearRect(bounds.x, bounds.y, bounds.width, bounds.height);
} else {
var canvas = context.canvas;
context.clearRect(0, 0, canvas.width, canvas.height);
}
}
/**
* Draws the given tile.
* @param {OpenSeadragon.Tile} tile - The tile to draw.
* @param {Function} drawingHandler - Method for firing the drawing event if using canvas.
* drawingHandler({context, tile, rendered})
* @param {Boolean} useSketch - Whether to use the sketch canvas or not.
* where <code>rendered</code> is the context with the pre-drawn image.
* @param {Float} [scale=1] - Apply a scale to tile position and size. Defaults to 1.
* @param {OpenSeadragon.Point} [translate] A translation vector to offset tile position
* @param {Boolean} [shouldRoundPositionAndSize] - Tells whether to round
* position and size of tiles supporting alpha channel in non-transparency
* context.
* @param {OpenSeadragon.TileSource} source - The source specification of the tile.
*/
drawTile( tile, drawingHandler, useSketch, scale, translate, shouldRoundPositionAndSize, source) {
$.console.assert(tile, '[Drawer.drawTile] tile is required');
$.console.assert(drawingHandler, '[Drawer.drawTile] drawingHandler is required');
if (this.useCanvas) {
var context = this._getContext(useSketch);
scale = scale || 1;
tile.drawCanvas(context, drawingHandler, scale, translate, shouldRoundPositionAndSize, source);
} else {
tile.drawHTML( this.canvas );
}
}
_getContext( useSketch ) {
var context = this.context;
if ( useSketch ) {
if (this.sketchCanvas === null) {
this.sketchCanvas = document.createElement( "canvas" );
var sketchCanvasSize = this._calculateSketchCanvasSize();
this.sketchCanvas.width = sketchCanvasSize.x;
this.sketchCanvas.height = sketchCanvasSize.y;
this.sketchContext = this.sketchCanvas.getContext( "2d" );
// If the viewport is not currently rotated, the sketchCanvas
// will have the same size as the main canvas. However, if
// the viewport get rotated later on, we will need to resize it.
if (this.viewport.getRotation() === 0) {
var self = this;
this.viewer.addHandler('rotate', function resizeSketchCanvas() {
if (self.viewport.getRotation() === 0) {
return;
}
self.viewer.removeHandler('rotate', resizeSketchCanvas);
var sketchCanvasSize = self._calculateSketchCanvasSize();
self.sketchCanvas.width = sketchCanvasSize.x;
self.sketchCanvas.height = sketchCanvasSize.y;
});
}
this._updateImageSmoothingEnabled(this.sketchContext);
}
context = this.sketchContext;
}
return context;
}
// private
saveContext() {
if (!this.useCanvas) {
return;
}
this._getContext( useSketch ).save();
}
// private
restoreContext( useSketch ) {
if (!this.useCanvas) {
return;
}
this._getContext( useSketch ).restore();
}
// private
setClip(rect, useSketch) {
if (!this.useCanvas) {
return;
}
var context = this._getContext( useSketch );
context.beginPath();
context.rect(rect.x, rect.y, rect.width, rect.height);
context.clip();
}
// private
drawRectangle(rect, fillStyle, useSketch) {
if (!this.useCanvas) {
return;
}
var context = this._getContext( useSketch );
context.save();
context.fillStyle = fillStyle;
context.fillRect(rect.x, rect.y, rect.width, rect.height);
context.restore();
}
/**
* Blends the sketch canvas in the main canvas.
* @param {Object} options The options
* @param {Float} options.opacity The opacity of the blending.
* @param {Float} [options.scale=1] The scale at which tiles were drawn on
* the sketch. Default is 1.
* Use scale to draw at a lower scale and then enlarge onto the main canvas.
* @param {OpenSeadragon.Point} [options.translate] A translation vector
* that was used to draw the tiles
* @param {String} [options.compositeOperation] - How the image is
* composited onto other images; see compositeOperation in
* {@link OpenSeadragon.Options} for possible values.
* @param {OpenSeadragon.Rect} [options.bounds] The part of the sketch
* canvas to blend in the main canvas. If specified, options.scale and
* options.translate get ignored.
*/
blendSketch(opacity, scale, translate, compositeOperation) {
var options = opacity;
if (!$.isPlainObject(options)) {
options = {
opacity: opacity,
scale: scale,
translate: translate,
compositeOperation: compositeOperation
};
}
if (!this.useCanvas || !this.sketchCanvas) {
return;
}
opacity = options.opacity;
compositeOperation = options.compositeOperation;
var bounds = options.bounds;
this.context.save();
this.context.globalAlpha = opacity;
if (compositeOperation) {
this.context.globalCompositeOperation = compositeOperation;
}
if (bounds) {
// Internet Explorer, Microsoft Edge, and Safari have problems
// when you call context.drawImage with negative x or y
// or x + width or y + height greater than the canvas width or height respectively.
if (bounds.x < 0) {
bounds.width += bounds.x;
bounds.x = 0;
}
if (bounds.x + bounds.width > this.canvas.width) {
bounds.width = this.canvas.width - bounds.x;
}
if (bounds.y < 0) {
bounds.height += bounds.y;
bounds.y = 0;
}
if (bounds.y + bounds.height > this.canvas.height) {
bounds.height = this.canvas.height - bounds.y;
}
this.context.drawImage(
this.sketchCanvas,
bounds.x,
bounds.y,
bounds.width,
bounds.height,
bounds.x,
bounds.y,
bounds.width,
bounds.height
);
} else {
scale = options.scale || 1;
translate = options.translate;
var position = translate instanceof $.Point ?
translate : new $.Point(0, 0);
var widthExt = 0;
var heightExt = 0;
if (translate) {
var widthDiff = this.sketchCanvas.width - this.canvas.width;
var heightDiff = this.sketchCanvas.height - this.canvas.height;
widthExt = Math.round(widthDiff / 2);
heightExt = Math.round(heightDiff / 2);
}
this.context.drawImage(
this.sketchCanvas,
position.x - widthExt * scale,
position.y - heightExt * scale,
(this.canvas.width + 2 * widthExt) * scale,
(this.canvas.height + 2 * heightExt) * scale,
-widthExt,
-heightExt,
this.canvas.width + 2 * widthExt,
this.canvas.height + 2 * heightExt
);
}
this.context.restore();
}
// private
drawDebugInfo(tile, count, i, tiledImage) {
if ( !this.useCanvas ) {
return;
}
var colorIndex = this.viewer.world.getIndexOfItem(tiledImage) % this.debugGridColor.length;
var context = this.context;
context.save();
context.lineWidth = 2 * $.pixelDensityRatio;
context.font = 'small-caps bold ' + (13 * $.pixelDensityRatio) + 'px arial';
context.strokeStyle = this.debugGridColor[colorIndex];
context.fillStyle = this.debugGridColor[colorIndex];
if (this.viewport.getRotation(true) % 360 !== 0 ) {
this._offsetForRotation({degrees: this.viewport.getRotation(true)});
}
if (tiledImage.getRotation(true) % 360 !== 0) {
this._offsetForRotation({
degrees: tiledImage.getRotation(true),
point: tiledImage.viewport.pixelFromPointNoRotate(
tiledImage._getRotationPoint(true), true)
});
}
if (tiledImage.viewport.getRotation(true) % 360 === 0 &&
tiledImage.getRotation(true) % 360 === 0) {
if(tiledImage._drawer.viewer.viewport.getFlip()) {
tiledImage._drawer._flip();
}
}
context.strokeRect(
tile.position.x * $.pixelDensityRatio,
tile.position.y * $.pixelDensityRatio,
tile.size.x * $.pixelDensityRatio,
tile.size.y * $.pixelDensityRatio
);
var tileCenterX = (tile.position.x + (tile.size.x / 2)) * $.pixelDensityRatio;
var tileCenterY = (tile.position.y + (tile.size.y / 2)) * $.pixelDensityRatio;
// Rotate the text the right way around.
context.translate( tileCenterX, tileCenterY );
context.rotate( Math.PI / 180 * -this.viewport.getRotation(true) );
context.translate( -tileCenterX, -tileCenterY );
if( tile.x === 0 && tile.y === 0 ){
context.fillText(
"Zoom: " + this.viewport.getZoom(),
tile.position.x * $.pixelDensityRatio,
(tile.position.y - 30) * $.pixelDensityRatio
);
context.fillText(
"Pan: " + this.viewport.getBounds().toString(),
tile.position.x * $.pixelDensityRatio,
(tile.position.y - 20) * $.pixelDensityRatio
);
}
context.fillText(
"Level: " + tile.level,
(tile.position.x + 10) * $.pixelDensityRatio,
(tile.position.y + 20) * $.pixelDensityRatio
);
context.fillText(
"Column: " + tile.x,
(tile.position.x + 10) * $.pixelDensityRatio,
(tile.position.y + 30) * $.pixelDensityRatio
);
context.fillText(
"Row: " + tile.y,
(tile.position.x + 10) * $.pixelDensityRatio,
(tile.position.y + 40) * $.pixelDensityRatio
);
context.fillText(
"Order: " + i + " of " + count,
(tile.position.x + 10) * $.pixelDensityRatio,
(tile.position.y + 50) * $.pixelDensityRatio
);
context.fillText(
"Size: " + tile.size.toString(),
(tile.position.x + 10) * $.pixelDensityRatio,
(tile.position.y + 60) * $.pixelDensityRatio
);
context.fillText(
"Position: " + tile.position.toString(),
(tile.position.x + 10) * $.pixelDensityRatio,
(tile.position.y + 70) * $.pixelDensityRatio
);
if (this.viewport.getRotation(true) % 360 !== 0 ) {
this._restoreRotationChanges();
}
if (tiledImage.getRotation(true) % 360 !== 0) {
this._restoreRotationChanges();
}
if (tiledImage.viewport.getRotation(true) % 360 === 0 &&
tiledImage.getRotation(true) % 360 === 0) {
if(tiledImage._drawer.viewer.viewport.getFlip()) {
tiledImage._drawer._flip();
}
}
context.restore();
}
// private
debugRect(rect) {
if ( this.useCanvas ) {
var context = this.context;
context.save();
context.lineWidth = 2 * $.pixelDensityRatio;
context.strokeStyle = this.debugGridColor[0];
context.fillStyle = this.debugGridColor[0];
context.strokeRect(
rect.x * $.pixelDensityRatio,
rect.y * $.pixelDensityRatio,
rect.width * $.pixelDensityRatio,
rect.height * $.pixelDensityRatio
);
context.restore();
}
}
}
/*** Create THREE.js version of rendering tiled images using WebGL ****/
function createThreeViewer(instance){
// Add listeners for events that require modifying the scene or camera
instance._viewer.addHandler("close", ()=>instance.destroy());
instance._viewer.world.addHandler("add-item", ev => addTiledImage(ev, instance));
instance._viewer.world.addHandler("remove-item", ev => removeTiledImage(ev, instance));
instance._viewer.world.addHandler("item-index-change", ev => setItemOrder(ev, instance));
instance._viewer.addHandler("tile-ready", ev => tileReady(ev, instance));
instance._viewer.addHandler("tile-unloaded", ev => tileUnloaded(ev, instance));
instance._viewer.addHandler("viewport-change", ev => viewportChange(ev, instance));
// instance._viewer.addHandler("update-viewport", ev => instance.renderFrame());
//to do: support pages of sequence mode
//to do: add handler for resize event to auto-sync
let viewerBounds = instance._viewer.viewport.getBoundsNoRotate();
instance._scene = new THREE.Scene();
instance._imageContainer = new THREE.Group();
instance._camera = new THREE.OrthographicCamera(
viewerBounds.width / -2,
viewerBounds.width / 2,
viewerBounds.height / 2,
viewerBounds.height / -2,
0,
10000
);
instance._camera.position.x = viewerBounds.x + viewerBounds.width/2;
instance._camera.position.y = -(viewerBounds.y + viewerBounds.height/2);
instance._camera.position.z = 100;
instance._camera.lookAt(instance._camera.position.x, instance._camera.position.y, 0);
instance._camera.updateProjectionMatrix();
var light = new THREE.AmbientLight();
instance._scene.add(light);
instance._scene.add(instance._imageContainer);
instance._scene.background = new THREE.Color(0.25, 0.25, 0.25);
instance._renderer = new THREE.WebGLRenderer({canvas: instance._canvas});
}
//private
function tileReady(event, instance){
let tile = event.tile;
let tiledImage = event.tiledImage;
//create a THREE.Material with the image data for this tile
let texture = new THREE.CanvasTexture(event.tile.getCanvasContext().canvas);
texture.flipY = false; // To match OSD reference frame
let material = new THREE.MeshLambertMaterial({
map: texture,
transparent: !!tile.hasTransparency || tiledImage.opacity < 1,
opacity: tiledImage.opacity
});
//attach the material to the tile so it can be queried by location using OpenSeadragon methods
tile._three = material;
//cache the bounds for this material so it doesn't have to be recomputed every time it is used to update the scene
material.userData._tileBounds = tiledImage.source.getTileBounds(tile.level, tile.x, tile.y);
material.userData.hasTransparency = !!tile.hasTransparency;
material.userData.tile = tile;
material.userData.tiledImage = tiledImage;
//since a new tile is available, update the image (if needed)
updateTiledImageRendering(tiledImage, tile, instance);
}
function tileUnloaded(event, instance){
let tile = event.tile;
cleanupObject(tile._three);
delete tile._three;
updateTiledImageRendering(event.tiledImage, tile, instance);
}
function viewportChange(event, instance){
let viewer = event.eventSource;
let viewerBounds = viewer.viewport.getBoundsNoRotate(true);
instance._camera.left = viewerBounds.width / -2;
instance._camera.right = viewerBounds.width / 2;
instance._camera.top = viewerBounds.height / 2;
instance._camera.bottom = viewerBounds.height / -2;
let center = viewer.viewport.getCenter(true);
instance._camera.position.x = center.x;
instance._camera.position.y = -center.y;
instance._camera.rotation.z = viewer.viewport.getRotation(true) * Math.PI / 180;
instance._camera.updateProjectionMatrix();
let numItems = viewer.world.getItemCount();
let i;
for(i = 0; i < numItems; i++){
let tiledImage = viewer.world.getItemAt(i);
updateMeshIfNeeded(tiledImage);
}
instance.renderFrame();
}
function addTiledImage(event, instance){
let tiledImage = event.item;
//create a Group for the tiles of this tiled image.
if(!tiledImage._three){
let tileContainer = new THREE.Group();
let rotationAxis = new THREE.Group();
let positioningGroup = new THREE.Group();
rotationAxis.add(tileContainer);
positioningGroup.add(rotationAxis);
positioningGroup.userData._tileContainer = tileContainer;
//add the object to the group of images (i.e. add to the scene)
instance._imageContainer.add(positioningGroup);
//save mutual references between OpenSceneGraph and ThreeJSRenderer versions of tiledImages
tiledImage._three = positioningGroup;
positioningGroup._tiledImage = tiledImage;
//offset the tileContainer so the center of the image is at the origin of the parent group
tileContainer.position.x = -0.5;
tileContainer.position.y = -0.5 / tiledImage.source.aspectRatio;
//undo the offset of the tileContainer, moving this back into original viewport coordinate space
rotationAxis.position.x = tileContainer.position.x * -1;
rotationAxis.position.y = tileContainer.position.y * -1;
updateTiledImageParameters(instance, tiledImage, positioningGroup, rotationAxis);
tiledImage.addHandler('bounds-change',()=>updateTiledImageParameters(instance, tiledImage, positioningGroup, rotationAxis, true));
tiledImage.addHandler('opacity-change',()=>updateTiledImageParameters(instance, tiledImage, positioningGroup, rotationAxis, true));
}
setItemOrder(null, instance);
}
function removeTiledImage(event){
let tiledImage = event.item;
//to do: make sure all resources for all tiles are unloaded (even if not actively in the tile group)
tiledImage._three.removeFromParent();
cleanupObject(tiledImage._three);
delete tiledImage._three;
}
function updateTiledImageParameters(instance, tiledImage, positioningGroup, rotationAxis, requestRender){
let bounds = tiledImage.getBoundsNoRotate(true);
let rotation = tiledImage.getRotation(true);
//set size and location
positioningGroup.scale.x = bounds.width; //scale the normalized image coordinates to match the size within the world
positioningGroup.scale.y = -bounds.width; //flip Y
positioningGroup.position.x = bounds.x;
positioningGroup.position.y = bounds.y * -1;//flip Y
// rotate about the rotation axis
rotationAxis.rotation.z = rotation * Math.PI / 180;
rotationAxis.scale.x = tiledImage.getFlip() ? -1 : 1;
updateOpacity(tiledImage._three.userData._tileContainer, tiledImage.opacity);
if(requestRender){
instance.renderFrame();
}
}
function updateOpacity(meshGroup, opacity){
meshGroup.children.forEach(mesh=>{
mesh.material.opacity = opacity;
if(opacity < 1 || mesh.material.userData.hasTransparency){
mesh.material.transparent = true;
} else {
mesh.material.transparent = false;
}
})
}
function updateTiledImageRendering(tiledImage, tile, instance){
updateMeshIfNeeded(tiledImage);
let tileContainer = tiledImage._three.userData._tileContainer;
let level = tileContainer.userData._tiledImageLevel;
//whether the tile was just loaded or unloaded, update any tiles that it overlaps in the current tileGrid (as needed)
let topLeft = tiledImage.source.getTileAtPoint(level, {x: tile.bounds.x, y: tile.bounds.y});
let bottomRight = tiledImage.source.getTileAtPoint(level, {x: tile.bounds.x + tile.bounds.width, y: tile.bounds.y + tile.bounds.height});
//iterate over the tiles overlapped by this one
let x, y;
for(x = topLeft.x; x<= bottomRight.x; x++){
for(y = topLeft.y; y <= bottomRight.y; y++){
let mesh = tileContainer.userData._tileMatrix[x][y];
loadBestImage(mesh);
}
}
instance.renderFrame();
}
function setItemOrder(event, instance){
instance._imageContainer.children.forEach(child=>{
child.position.z = DEPTH_MULTIPLIER * instance._viewer.world.getIndexOfItem(child._tiledImage);
});
instance.renderFrame();
}
function updateMeshIfNeeded(tiledImage){
let tileContainer = tiledImage._three.userData._tileContainer;
let levelsInterval = tiledImage._getLevelsInterval();
let level = levelsInterval.highestLevel;
if(tileContainer.userData._tiledImageLevel === level){
//we are already drawing the highest-resolution tiles, just return
return;
}
console.log('new level', level);
tileContainer.userData._tiledImageLevel = level;
//we need to update the grid.
//clear the old matrix
tileContainer.userData._tileMatrix = [];
//remove existing tiles
tileContainer.children.forEach(cleanupObject);
tileContainer.clear();
//create new set of tiles and add to the tileContainer
let gridInfo = tiledImage.getGridDefinition(level);
let col, row;
for(col = 0; col < gridInfo.numColumns; col += 1){
tileContainer.userData._tileMatrix[col] = [];
for(row = 0; row < gridInfo.numRows; row += 1){
let colInfo = gridInfo.columnInfo[col];
let rowInfo = gridInfo.rowInfo[row];
let left = colInfo.x;
let top = rowInfo.y;
let x = left + colInfo.width / 2;
let y = top + rowInfo.height / 2;
let z = 0;
let tileGeometry = new THREE.PlaneGeometry(colInfo.width, rowInfo.height);
let mesh = new THREE.Mesh(tileGeometry);
mesh.position.set(x, y, z);
mesh._tileInfo = {
row: row,
col: col,
level: level,
...rowInfo,
...colInfo,
tiledImage: tiledImage,
center: new OpenSeadragon.Point(x, y),
uvMapOriginal: [],
// uvMap
}
let i;
let uvAttribute = tileGeometry.attributes.uv;
for(i =0 ; i<uvAttribute.count; ++i){
let x = uvAttribute.getX(i);
let y = uvAttribute.getY(i);
mesh._tileInfo.uvMapOriginal[i] = [x, y];
}
tileContainer.add(mesh);
tileContainer.userData._tileMatrix[col][row] = mesh;
//get (current) best image data for the tile
loadBestImage(mesh);
}
}
}
function loadBestImage(mesh){
let tileInfo = mesh._tileInfo;
let tiledImage = tileInfo.tiledImage;
let tileSource = tiledImage.source;
let tilesMatrix = tiledImage.tilesMatrix;
//if we have our own texture, use it
// let tile = tilesMatrix[tileInfo.level][tileInfo.col][tileInfo.row];
let tile = hasMaterial(tilesMatrix, tileInfo.level, tileInfo.col, tileInfo.row);
if(tile){
addMaterialToMesh(mesh, tile, tiledImage);
} else {
//start at next highest level and work downward
let queryLevel = tileInfo.level - 1;
while(queryLevel >= 0){
let tileIndex = tileSource.getTileAtPoint(queryLevel, tileInfo.center);
let tile = hasMaterial(tilesMatrix, queryLevel, tileIndex.x, tileIndex.y);
if(tile){
addMaterialToMesh(mesh, tile, tiledImage);
break;
}
queryLevel--;
}
}
}
function hasMaterial(tileMatrix, level, x, y){
let tile = tileMatrix[level] && tileMatrix[level][x] && tileMatrix[level][x][y];
return tile && tile._three ? tile : null;
}
function addMaterialToMesh(mesh, tile, tiledImage){
let regionInfo = mesh._tileInfo;
let material = tile._three;
let materialBounds = material.userData._tileBounds;
//update transparent and opacity properties to reflect current state
let opacity = tiledImage.opacity;
let transparent = opacity < 1 || material.userData.hasTransparency;
material.transparent = transparent;
material.opacity = opacity;
mesh.material = material;
let uvMap = mesh._tileInfo.uvMapOriginal;
let uvAttribute = mesh.geometry.attributes.uv;
// iterate over UV map for each vertex and calculate position within material/texture
let xNew, yNew;
let regionLeft = regionInfo.x;
let regionTop = regionInfo.y;
let regionRight = regionLeft + regionInfo.width;
let regionBottom = regionTop + regionInfo.height;
//what is needed to calculate the right uv index for each vertex?
// 1) position of the vertex in normalized coordinates
// 2) position of the entire texture area (not just non-overlapped area) in normalized coordinates
uvMap.forEach(([x,y],i)=>{
// x, y describe which corner of the original texture to use
if(x==0){
xNew = (regionLeft - materialBounds.x) / materialBounds.width;
} else {
xNew = (regionRight - materialBounds.x) / materialBounds.width;
}
if(y == 0){
yNew = (regionTop - materialBounds.y) / materialBounds.height;
} else {
yNew = (regionBottom - materialBounds.y) / materialBounds.height;
}
uvAttribute.setXY(i, xNew, yNew);
});
uvAttribute.needsUpdate = true;
}
function cleanupObject(object){
if(object.children && object.children.forEach){
object.children.forEach(cleanupObject);
}
if(object.dispose){
object.dispose();
}
if(object.geometry){
object.geometry.dispose();
}
}

92
test/demo/webgl.html Normal file
View File

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<title>OSD-ThreeJS</title>
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src='../lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js'></script>
<link rel="stylesheet" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css">
<!-- <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script> -->
<!-- <script type="importmap">
{
"imports": {
"three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.149.0/three.min.js"
}
} -->
</script>
<script type="module" src="./webgl.js"></script>
<style type="text/css">
.openseadragon1 {
width: 600px;
height: 400px;
}
#three-canvas{
position:fixed;
top:5px;
right:5px;
border: thin gray solid;
}
.image-options{
display: grid;
grid-template-columns: 2em repeat(7, 10em);
}
.image-options input[type=number]{
width: 5em;
}
</style>
</head>
<body>
<div>
Simple demo page to show three.js based rendering.
</div>
<div id="contentDiv" class="openseadragon1"></div>
<div id="image-picker">
<div class="image-options">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<label><input type="checkbox" checked data-image="rainbow" class="toggle"> Rainbow Grid</label>
<label>X: <input type="number" value="0" data-image="rainbow" data-field="x"> </label>
<label>Y: <input type="number" value="0" data-image="rainbow" data-field="y"> </label>
<label>Width: <input type="number" value="1" data-image="rainbow" data-field="width" min="0"> </label>
<label>Degrees: <input type="number" value="0" data-image="rainbow" data-field="degrees"> </label>
<label>Opacity: <input type="number" value="1" data-image="rainbow" data-field="opacity" min="0" max="1" step="0.2"> </label>
<label>Flipped: <input type="checkbox" data-image="rainbow" data-field="flipped"></label>
</div>
<div class="image-options">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<label><input type="checkbox" data-image="leaves" class="toggle"> Leaves</label>
<label>X: <input type="number" value="0.5" data-image="leaves" data-field="x"> </label>
<label>Y: <input type="number" value="0.5" data-image="leaves" data-field="y"> </label>
<label>Width: <input type="number" value="1.5" data-image="leaves" data-field="width" min="0"> </label>
<label>Degrees: <input type="number" value="0" data-image="leaves" data-field="degrees"> </label>
<label>Opacity: <input type="number" value="0.8" data-image="leaves" data-field="opacity" min="0" max="1" step="0.2"> </label>
<label>Flipped: <input type="checkbox" data-image="leaves" data-field="flipped"></label>
</div>
<div class="image-options">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<label><input type="checkbox" data-image="bblue" class="toggle"> BBlue PNG</label>
<label>X: <input type="number" value="0" data-image="bblue" data-field="x"> </label>
<label>Y: <input type="number" value="0" data-image="bblue" data-field="y"> </label>
<label>Width: <input type="number" value="0.5" data-image="bblue" data-field="width" min="0"> </label>
<label>Degrees: <input type="number" value="0" data-image="bblue" data-field="degrees"> </label>
<label>Opacity: <input type="number" value="1" data-image="bblue" data-field="opacity" min="0" max="1" step="0.2"> </label>
<label>Flipped: <input type="checkbox" data-image="bblue" data-field="flipped"></label>
</div>
<!-- <div class="image-options">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<label><input type="checkbox" data-image="duomo" class="toggle"> Duomo</label>
<label>X: <input type="number" value="0" data-image="duomo" data-field="x"> </label>
<label>Y: <input type="number" value="0" data-image="duomo" data-field="y"> </label>
<label>Width: <input type="number" value="0.5" data-image="duomo" data-field="width"> </label>
<label>Degrees: <input type="number" value="0" data-image="duomo" data-field="degrees"> </label>
<label>Opacity: <input type="number" value="1" data-image="duomo" data-field="opacity"> </label>
<label>Flipped: <input type="checkbox" data-image="duomo" data-field="flipped"></label>
</div> -->
</div>
<canvas id="three-canvas"></canvas>
</body>
</html>

126
test/demo/webgl.js Normal file
View File

@ -0,0 +1,126 @@
//imports
import { ThreeJSRenderer } from './webgl-renderer.js';
//globals
const canvas = document.querySelector('#three-canvas');
const sources = {
"rainbow":"../data/testpattern.dzi",
"leaves":"../data/iiif_2_0_sizes/info.json",
"bblue":{
type:'image',
url: "../data/BBlue.png",
},
// "duomo":"https://openseadragon.github.io/example-images/highsmith/highsmith.dzi"
}
var viewer = window.viewer = OpenSeadragon({
// debugMode: true,
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
showNavigator:true,
minZoomImageRatio:0.001,
customRenderer: true, // set this to true to use a renderer plugin instead of the built-in drawer
useCanvas: {contextType: 'webgl2'} //set this to match the context type used by the plugin renderer
});
//sync size
// let viewerCanvas = viewer.drawer.canvas;
// canvas.style.width = viewerCanvas.clientWidth+'px';
// canvas.style.height = viewerCanvas.clientHeight+'px';
// canvas.width = viewerCanvas.width;
// canvas.height = viewerCanvas.height;
// //make the test canvas mirror all changes to the viewer canvas
// viewer.addHandler("resize", function(){
// canvas.style.width = viewerCanvas.clientWidth+'px';
// canvas.style.height = viewerCanvas.clientHeight+'px';
// })
let noCanvas;
let threeRenderer = window.threeRenderer = new ThreeJSRenderer(viewer, noCanvas);
// viewer.addHandler("open", () => viewer.world.getItemAt(0).source.hasTransparency = function(){ return true; });
$('#contentDiv').resizable(true);
$('#image-picker').sortable({
update: function(event, ui){
let thisItem = ui.item.find('.toggle').data('item');
let items = $('#image-picker input.toggle:checked').toArray().map(item=>$(item).data('item'));
let newIndex = items.indexOf(thisItem);
if(thisItem){
viewer.world.setItemIndex(thisItem, newIndex);
}
}
});
$('#image-picker input.toggle').on('change',function(){
let data = $(this).data();
if(this.checked){
addTileSource(data.image, this);
} else {
if(data.item){
viewer.world.removeItem(data.item);
$(this).data('item',null);
}
}
}).trigger('change');
$('#image-picker input:not(.toggle)').on('change',function(){
let data = $(this).data();
let value = $(this).val();
let tiledImage = $(`#image-picker input.toggle[data-image=${data.image}]`).data('item');
if(tiledImage){
//item = tiledImage
let field = data.field;
if(field == 'x'){
let bounds = tiledImage.getBoundsNoRotate();
let position = new OpenSeadragon.Point(Number(value), bounds.y);
tiledImage.setPosition(position);
} else if ( field == 'y'){
let bounds = tiledImage.getBoundsNoRotate();
let position = new OpenSeadragon.Point(bounds.x, Number(value));
tiledImage.setPosition(position);
} else if (field == 'width'){
tiledImage.setWidth(Number(value));
} else if (field == 'degrees'){
tiledImage.setRotation(Number(value));
} else if (field == 'opacity'){
tiledImage.setOpacity(Number(value));
} else if (field == 'flipped'){
tiledImage.setFlip($(this).prop('checked'));
}
}
})
function addTileSource(image, checkbox){
let options = $(`#image-picker input[data-image=${image}][type=number]`).toArray().reduce((acc, input)=>{
let field = $(input).data('field');
if(field){
acc[field] = Number(input.value);
}
return acc;
}, {});
options.flipped = $(`#image-picker input[data-image=${image}][data-type=flipped]`).prop('checked');
let items = $('#image-picker input.toggle:checked').toArray();
let insertionIndex = items.indexOf(checkbox);
let tileSource = sources[image];
if(tileSource){
viewer.addTiledImage({tileSource: tileSource, ...options, index: insertionIndex});
viewer.world.addOnceHandler('add-item',function(ev){
let item = ev.item;
$(checkbox).data('item',item);
item.source.hasTransparency = ()=>true; //simulate image with transparency, to show seams in default renderer
});
}
}

50598
test/lib/three.js Normal file
View File

File diff suppressed because one or more lines are too long