2023-02-22 02:59:40 +03:00
|
|
|
<!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">
|
2023-03-13 22:56:04 +03:00
|
|
|
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/17/Stats.js"></script> -->
|
2023-02-22 02:59:40 +03:00
|
|
|
<!-- <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">
|
2023-03-06 00:08:32 +03:00
|
|
|
.content{
|
|
|
|
|
max-width:960px;
|
|
|
|
|
margin: 0 auto;
|
2023-02-22 02:59:40 +03:00
|
|
|
}
|
2023-03-06 00:08:32 +03:00
|
|
|
.mirrored{
|
|
|
|
|
display:grid;
|
|
|
|
|
grid-template-columns:50% 50%;
|
|
|
|
|
gap: 2em;
|
|
|
|
|
}
|
|
|
|
|
.viewer-container {
|
|
|
|
|
/* width: 600px;
|
|
|
|
|
height: 400px; */
|
|
|
|
|
aspect-ratio: 4 / 3;
|
2023-02-22 02:59:40 +03:00
|
|
|
border: thin gray solid;
|
2023-03-06 00:08:32 +03:00
|
|
|
position:relative;
|
2023-02-22 02:59:40 +03:00
|
|
|
}
|
2023-03-06 00:08:32 +03:00
|
|
|
.example-code{
|
|
|
|
|
background-color:tan;
|
|
|
|
|
border: thin black solid;
|
|
|
|
|
padding:10px;
|
|
|
|
|
display:inline-block;
|
|
|
|
|
}
|
|
|
|
|
.description pre{
|
|
|
|
|
display:inline-block;
|
|
|
|
|
background-color:gainsboro;
|
|
|
|
|
padding:0;
|
|
|
|
|
margin:0;
|
|
|
|
|
}
|
|
|
|
|
|
2023-02-22 02:59:40 +03:00
|
|
|
.image-options{
|
|
|
|
|
display: grid;
|
2023-03-06 00:08:32 +03:00
|
|
|
grid-template-columns: 2em 9em 1fr;
|
|
|
|
|
padding:3px;
|
|
|
|
|
border: thin gray solid;
|
|
|
|
|
}
|
|
|
|
|
.option-grid{
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 7em 7em 10em 10em 10em;
|
|
|
|
|
/* grid-template-columns: repeat(5, auto); */
|
2023-02-22 02:59:40 +03:00
|
|
|
}
|
|
|
|
|
.image-options input[type=number]{
|
|
|
|
|
width: 5em;
|
|
|
|
|
}
|
2023-03-06 00:08:32 +03:00
|
|
|
.image-options select{
|
|
|
|
|
width: 5em;
|
|
|
|
|
}
|
2023-02-22 02:59:40 +03:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2023-03-06 00:08:32 +03:00
|
|
|
<div class="content">
|
|
|
|
|
<h2>Use a WebGL drawer implementation (using three.js) instead of the default context2d drawer</h2>
|
|
|
|
|
<div class="mirrored">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="description">
|
|
|
|
|
The context2d drawing operations in core OpenSeadragon have been
|
|
|
|
|
consolidated from the <pre>TiledImage</pre> and <pre>Tile</pre> classes into the
|
|
|
|
|
<pre>Drawer</pre> class, which inherits from a new <pre>DrawerBase</pre> base class.
|
|
|
|
|
The <pre>TiledImage</pre> and <pre>Tile</pre> classes now handle the logic of managing
|
|
|
|
|
tile positioning and image data, with cleaner separation from details of the rendering
|
|
|
|
|
process. <pre>DrawerBase</pre> 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 <pre>DrawerBase</pre> and implements the public API.
|
|
|
|
|
The constructor of this class can be passed in during construction of the viewer using the
|
|
|
|
|
new <pre>customDrawer</pre> option.
|
|
|
|
|
</div>
|
|
|
|
|
<pre class="example-code">
|
|
|
|
|
import { ThreeJSDrawer } from './threejsdrawer.js';
|
2023-02-22 02:59:40 +03:00
|
|
|
|
2023-03-06 00:08:32 +03:00
|
|
|
let viewer = OpenSeadragon({
|
|
|
|
|
...
|
|
|
|
|
customDrawer: ThreeJSDrawer,
|
|
|
|
|
...
|
|
|
|
|
});
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="three-viewer" class="viewer-container"></div>
|
2023-02-22 02:59:40 +03:00
|
|
|
</div>
|
2023-03-06 00:08:32 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Compare behavior of <strong>Context2d</strong> and <strong>WebGL</strong> (via three.js) drawers</h2>
|
|
|
|
|
<div class="mirrored">
|
|
|
|
|
<div>
|
|
|
|
|
<h3>Use default OpenSeadragon viewer to pan/zoom</h3>
|
|
|
|
|
<div id="contentDiv" class="viewer-container"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<h3>WebGL drawer linked using event listeners </h3>
|
|
|
|
|
<div id="three-canvas-container" class="viewer-container"></div>
|
|
|
|
|
</div>
|
2023-02-22 02:59:40 +03:00
|
|
|
</div>
|
2023-03-06 00:08:32 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="image-picker">
|
|
|
|
|
<h3>Image options (drag and drop to re-order images)</h3>
|
2023-03-11 19:38:21 +03:00
|
|
|
<!-- <div class="image-options">
|
2023-03-06 00:08:32 +03:00
|
|
|
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
|
|
|
|
|
<label><input type="checkbox" checked data-image="rainbow" class="toggle"> Rainbow Grid</label>
|
|
|
|
|
<div class="option-grid">
|
|
|
|
|
<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>
|
|
|
|
|
<label>Cropped: <input type="checkbox" data-image="rainbow" data-field="cropped"></label>
|
|
|
|
|
<label>Debug: <input type="checkbox" data-image="rainbow" data-field="debug"></label>
|
|
|
|
|
<label>Composite: <select data-image="rainbow" data-field="composite"></select></label>
|
|
|
|
|
<label>Wrapping: <select data-image="rainbow" data-field="wrapping"></select></label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</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>
|
|
|
|
|
<div class="option-grid">
|
|
|
|
|
<label>X: <input type="number" value="0" data-image="leaves" data-field="x"> </label>
|
|
|
|
|
<label>Y: <input type="number" value="0" data-image="leaves" data-field="y"> </label>
|
|
|
|
|
<label>Width: <input type="number" value="1" 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="1" 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>
|
|
|
|
|
<label>Cropped: <input type="checkbox" data-image="leaves" data-field="cropped"></label>
|
|
|
|
|
<label>Debug: <input type="checkbox" data-image="leaves" data-field="debug"></label>
|
|
|
|
|
<label>Composite: <select data-image="leaves" data-field="composite" ></select></label>
|
|
|
|
|
<label>Wrapping: <select data-image="leaves" data-field="wrapping"></select></label>
|
|
|
|
|
</div>
|
|
|
|
|
</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>
|
|
|
|
|
<div class="option-grid">
|
|
|
|
|
<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="1" 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>
|
|
|
|
|
<label>Cropped: <input type="checkbox" data-image="bblue" data-field="cropped"></label>
|
|
|
|
|
<label>Debug: <input type="checkbox" data-image="bblue" data-field="debug"></label>
|
|
|
|
|
<label>Composite: <select data-image="bblue" data-field="composite"></select></label>
|
|
|
|
|
<label>Wrapping: <select data-image="bblue" data-field="wrapping"></select></label>
|
|
|
|
|
</div>
|
2023-03-11 19:38:21 +03:00
|
|
|
</div> -->
|
2023-03-06 00:08:32 +03:00
|
|
|
|
2023-02-22 02:59:40 +03:00
|
|
|
</div>
|
2023-03-06 00:08:32 +03:00
|
|
|
|
2023-02-22 02:59:40 +03:00
|
|
|
</div>
|
|
|
|
|
|
2023-03-06 00:08:32 +03:00
|
|
|
|
2023-02-22 02:59:40 +03:00
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
