<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="viaWebGL">
<title>GLSL shaders for zoomable DZI images: openSeadragonGL</title>
<meta name="description" content="GLSL shaders for zoomable DZI images: openSeadragonGL">
<style rel = "stylesheet">
#viaWebGL {
background-color:black;
position:absolute;
height:100%;
width:100%;
left:0px;
top:0px;
}
</style>
<script type="text/javascript" src='../../../../build/openseadragon/openseadragon.js'></script>
<script type='text/javascript' src='osd-gl.js'></script>
<script type='text/javascript' src='viawebgl.js'></script>
<script type='text/javascript'>
var DEMO = {};
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~
// DEMO for a viewer with custom shaders
*/
window.onload = function(e){
DEMO.view = new SOBEL.Viewer().init();
};
</script>
<script type='text/javascript'>
var SOBEL = {};
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~
/* SOBEL Viewer - Set a Sobel Shader for OpenSeaDragon
*/
SOBEL.Viewer = function() {
// Needed constants
this.tile_mode = 'tile-drawing';
this.iconPrefix = '../../../../build/openseadragon/images/';
this.source = "https://openseadragon.github.io/example-images/duomo/duomo.dzi";
this.vShader = 'vs.glsl';
this.fShader = 'fs.glsl';
}
SOBEL.Viewer.prototype.init = function() {
// Open a seadragon with two layers
this.openSD = OpenSeadragon({
tileSources: this.source,
prefixUrl: this.iconPrefix,
crossOriginPolicy: 'Anonymous',
id: 'viaWebGL',
drawer: 'canvas',
});
// Make a link to webGL
var seaGL = new openSeadragonGL(this.openSD);
seaGL.addHandler(this.tile_mode);
seaGL.vShader = this.vShader;
seaGL.fShader = this.fShader;
// Add a custom button
seaGL.button({
tooltip: 'Toggle shaders',
prefix: this.iconPrefix,
name: 'shade'
});
seaGL.init();
return this;
}
</script>
</head>
<body>
<div id='viaWebGL'></div>
</body>
</html>