mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-25 06:36:11 +03:00
Merge pull request #4 from Aiosa/rotation-seams
First modular webgl drawer implementation by @Aiosa Thanks for putting this together @Aiosa! I'm going to merge it into the large refactor PR. It'd be great to have a demo page that includes all these features, for testing/debugging and to show off the capabilities.
This commit is contained in:
pearcetm
GitHub
commit
e07745d790
14
Gruntfile.js
14
Gruntfile.js
@ -68,12 +68,12 @@ module.exports = function(grunt) {
|
|||||||
"src/world.js",
|
"src/world.js",
|
||||||
|
|
||||||
//Aiosa's webgl drawer - needs optimization, polishing, trimming
|
//Aiosa's webgl drawer - needs optimization, polishing, trimming
|
||||||
// "src/webgl/webGLWrapper.js",
|
"src/webgl/renderer.js",
|
||||||
// "src/webgl/visualisationLayer.js",
|
"src/webgl/shaderLayer.js",
|
||||||
// "src/webgl/dataLoader.js",
|
"src/webgl/dataLoader.js",
|
||||||
// "src/webgl/webGLContext.js",
|
"src/webgl/webGLContext.js",
|
||||||
// "src/webgl/drawer.js",
|
"src/webgl/drawer.js",
|
||||||
// "src/webgl/plainShader.js",
|
"src/webgl/plainShader.js",
|
||||||
];
|
];
|
||||||
|
|
||||||
var banner = "//! <%= pkg.name %> <%= pkg.version %>\n" +
|
var banner = "//! <%= pkg.name %> <%= pkg.version %>\n" +
|
||||||
@ -204,7 +204,7 @@ module.exports = function(grunt) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
files: [ "Gruntfile.js", "src/*.js", "images/*" /*, "src/webgl/*.js" */ ],
|
files: [ "Gruntfile.js", "src/*.js", "images/*", "src/webgl/*.js" ],
|
||||||
tasks: "watchTask"
|
tasks: "watchTask"
|
||||||
},
|
},
|
||||||
eslint: {
|
eslint: {
|
||||||
|
|||||||
@ -470,7 +470,7 @@ $.Viewer = function( options ) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// if the drawer is supported, create it and break the loop
|
// if the drawer is supported, create it and break the loop
|
||||||
if (Drawer.isSupported()) {
|
if (Drawer && Drawer.isSupported()) {
|
||||||
this.drawer = new Drawer({
|
this.drawer = new Drawer({
|
||||||
viewer: this,
|
viewer: this,
|
||||||
viewport: this.viewport,
|
viewport: this.viewport,
|
||||||
|
|||||||
542
src/webgl/dataLoader.js
Normal file
542
src/webgl/dataLoader.js
Normal file
@ -0,0 +1,542 @@
|
|||||||
|
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* IDataLoader conforms to a specific texture type and WebGL version.
|
||||||
|
* It provides API for uniform handling of textures:
|
||||||
|
* - texture loading
|
||||||
|
* - GLSL texture handling
|
||||||
|
*/
|
||||||
|
$.WebGLModule.IDataLoader = class {
|
||||||
|
/**
|
||||||
|
* Creation
|
||||||
|
* @param {WebGLRenderingContextBase} gl
|
||||||
|
* @param {string} webglVersion
|
||||||
|
* @param {object} options
|
||||||
|
* @param {GLuint} options.wrap texture wrap parameteri
|
||||||
|
* @param {GLuint} options.magFilter texture filter parameteri
|
||||||
|
* @param {GLuint} options.minFilter texture filter parameteri
|
||||||
|
* */
|
||||||
|
constructor(gl, webglVersion, options) {
|
||||||
|
//texture cache to keep track of loaded GPU data
|
||||||
|
this.__cache = new Map();
|
||||||
|
this.wrap = options.wrap;
|
||||||
|
this.minFilter = options.minFilter;
|
||||||
|
this.magFilter = options.magFilter;
|
||||||
|
this.maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loader strategy based on toString result, extend with your type if necessary.
|
||||||
|
* If your type cannot use the given version strategy (TEXTURE_2D_ARRAY UNIT), you have
|
||||||
|
* to re-define the whole API.
|
||||||
|
*
|
||||||
|
* When a data is sent to the shader for processing, `toString` method is called to
|
||||||
|
* get the data identifier. A typeLoaders key must be present to handle loading
|
||||||
|
* of that texture(s) data.
|
||||||
|
* @member typeLoaders
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule.IDataLoader
|
||||||
|
*
|
||||||
|
* @return {object} whatever you need to stare in the cache to later free the object
|
||||||
|
*/
|
||||||
|
this.typeLoaders = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} version
|
||||||
|
* @return {boolean} true if given webgl version is supported by the loader
|
||||||
|
*/
|
||||||
|
supportsWebglVersion(version) {
|
||||||
|
throw("::supportsWebglVersion must be implemented!");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get stored options under ID
|
||||||
|
* @param id
|
||||||
|
* @return {unknown} options stored by setLoaded
|
||||||
|
*/
|
||||||
|
getLoaded(id) {
|
||||||
|
return this.__cache.get(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Store options object
|
||||||
|
* @param id
|
||||||
|
* @param options
|
||||||
|
*/
|
||||||
|
setLoaded(id, options) {
|
||||||
|
this.__cache.set(id, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Unload stored options
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
setUnloaded(id) {
|
||||||
|
this.__cache.delete(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set texture sampling parameters
|
||||||
|
* @param {string} name one of 'minFilter', 'magFilter', 'wrap'
|
||||||
|
* @param {GLuint} value
|
||||||
|
*/
|
||||||
|
setTextureParam(name, value) {
|
||||||
|
if (!['minFilter', 'magFilter', 'wrap'].includes(name)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this[name] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param renderer
|
||||||
|
* @param id
|
||||||
|
* @param options
|
||||||
|
*/
|
||||||
|
unloadTexture(renderer, id, options) {
|
||||||
|
throw("::unloadTexture must be implemented!");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {OpenSeadragon.WebGLModule} renderer renderer renderer reference
|
||||||
|
* @param id
|
||||||
|
* @param data
|
||||||
|
* @param width
|
||||||
|
* @param height
|
||||||
|
* @param {[number]} shaderDataIndexToGlobalDataIndex mapping of array indices to data indices, e.g. texture 0 for
|
||||||
|
* this shader corresponds to index shaderDataIndexToGlobalDataIndex[0] in the data array,
|
||||||
|
* -1 value used for textures not loaded
|
||||||
|
*/
|
||||||
|
load(renderer, id, data, width, height, shaderDataIndexToGlobalDataIndex) {
|
||||||
|
if (!data) {
|
||||||
|
$.console.warn("Attempt to draw nullable data!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const textureLoader = this.typeLoaders[toString.apply(data)];
|
||||||
|
if (!textureLoader) {
|
||||||
|
throw "WebGL Renderer cannot load data as texture: " + toString.apply(data);
|
||||||
|
}
|
||||||
|
this.setLoaded(id, textureLoader(this, renderer, data, width, height, shaderDataIndexToGlobalDataIndex));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param renderer
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
free(renderer, id) {
|
||||||
|
this.unloadTexture(renderer, id, this.getLoaded(id));
|
||||||
|
this.setUnloaded(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when the program is being loaded (set as active)
|
||||||
|
* @param {OpenSeadragon.WebGLModule} renderer
|
||||||
|
* @param {WebGLRenderingContextBase} gl WebGL context
|
||||||
|
* @param {WebGLProgram} program
|
||||||
|
* @param {object} specification reference to the specification object used
|
||||||
|
*/
|
||||||
|
programLoaded(renderer, gl, program, specification) {
|
||||||
|
//not needed
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when tile is processed
|
||||||
|
* @param {OpenSeadragon.WebGLModule} renderer renderer renderer reference
|
||||||
|
* @param {object} specification reference to the current active specification object
|
||||||
|
* @param {*} id data object present in the texture cache
|
||||||
|
* @param {WebGLProgram} program current WebGLProgram
|
||||||
|
* @param {WebGL2RenderingContext} gl
|
||||||
|
*/
|
||||||
|
programUsed(renderer, specification, id, program, gl) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sample texture
|
||||||
|
* @param {number|string} index texture index, must respect index re-mapping (see declare())
|
||||||
|
* @param {string} vec2coords GLSL expression that evaluates to vec2
|
||||||
|
* @return {string} GLSL expression (unterminated) that evaluates to vec4
|
||||||
|
*/
|
||||||
|
sample(index, vec2coords) {
|
||||||
|
return `texture(_vis_data_sampler_array, vec3(${vec2coords}, _vis_data_sampler_array_indices[${index}]))`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Declare GLSL texture logic (global scope) in the GLSL shader
|
||||||
|
* @param {[number]} shaderDataIndexToGlobalDataIndex mapping of array indices to data indices, e.g. texture 0 for
|
||||||
|
* this shader corresponds to index shaderDataIndexToGlobalDataIndex[0] in the data array,
|
||||||
|
* -1 value used for textures not loaded
|
||||||
|
* @return {string} GLSL declaration (terminated with semicolon) of necessary elements for textures
|
||||||
|
*/
|
||||||
|
declare(shaderDataIndexToGlobalDataIndex) {
|
||||||
|
return `
|
||||||
|
vec4 osd_texture(float index, vec2 coords) {
|
||||||
|
//This method must be implemented!
|
||||||
|
}
|
||||||
|
|
||||||
|
//TODO: is this relevant?
|
||||||
|
// vec2 osd_texture_size() {
|
||||||
|
// //This method must be implemented!
|
||||||
|
// }
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Data loading strategies for different WebGL versions.
|
||||||
|
* Should you have your own data format, change/re-define these
|
||||||
|
* to correctly load the textures to GPU, based on the WebGL version used.
|
||||||
|
*
|
||||||
|
* The processing accepts arrays of images to feed to the shader built from configuration.
|
||||||
|
* This implementation supports data as Image or Canvas objects. We will refer to them as <image*>
|
||||||
|
*
|
||||||
|
* Implemented texture loaders support
|
||||||
|
* - working with <image*> object - image data chunks are vertically concatenated
|
||||||
|
* - working with [<image*>] object - images are in array
|
||||||
|
*
|
||||||
|
* @namespace OpenSeadragon.WebGLModule.Loaders
|
||||||
|
*/
|
||||||
|
$.WebGLModule.Loaders = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* //TODO: ugly
|
||||||
|
* In case the system is fed by anything but 'Image' (or the like) data object,
|
||||||
|
* implement here conversion so that debug mode can draw it.
|
||||||
|
* @param {*} data
|
||||||
|
* @return {HTMLElement} Dom Element
|
||||||
|
*/
|
||||||
|
dataAsHtmlElement: function(data) {
|
||||||
|
return {
|
||||||
|
"[object HTMLImageElement]": () => data,
|
||||||
|
"[object HTMLCanvasElement]": () => data,
|
||||||
|
//Image objects in Array, we assume image objects only
|
||||||
|
"[object Array]": function() {
|
||||||
|
const node = document.createElement("div");
|
||||||
|
for (let image of data) {
|
||||||
|
node.append(image);
|
||||||
|
}
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
}[toString.apply(data)]();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Data loader for WebGL 2.0. Must load the data to a Texture2DArray.
|
||||||
|
* The name of the texture is a constant. The order od the textures in
|
||||||
|
* the z-stacking is defined in shaderDataIndexToGlobalDataIndex.
|
||||||
|
*
|
||||||
|
* For details, please, see the implementation.
|
||||||
|
* @class OpenSeadragon.WebGLModule.Loaders.TEXTURE_2D_ARRAY
|
||||||
|
*/
|
||||||
|
TEXTURE_2D_ARRAY: class /**@lends $.WebGLModule.Loaders.TEXTURE_2D_ARRAY */ extends OpenSeadragon.WebGLModule.IDataLoader {
|
||||||
|
unloadTexture(renderer, id, options) {
|
||||||
|
renderer.gl.deleteTexture(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creation
|
||||||
|
* @param {WebGL2RenderingContext} gl
|
||||||
|
* @param {string} webglVersion
|
||||||
|
* @param {object} options
|
||||||
|
* @param {GLuint} options.wrap texture wrap parameteri
|
||||||
|
* @param {GLuint} options.magFilter texture filter parameteri
|
||||||
|
* @param {GLuint} options.minFilter texture filter parameteri
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule.Loaders.TEXTURE_2D_ARRAY
|
||||||
|
* */
|
||||||
|
constructor(gl, webglVersion, options) {
|
||||||
|
super(gl, webglVersion, options);
|
||||||
|
|
||||||
|
if (webglVersion !== "2.0") {
|
||||||
|
throw "Incompatible WebGL version for TEXTURE_2D_ARRAY data loader!";
|
||||||
|
}
|
||||||
|
|
||||||
|
// this.batchSize = 5;
|
||||||
|
// let lastBatch = null;
|
||||||
|
|
||||||
|
this.typeLoaders["[object HTMLImageElement]"] =
|
||||||
|
this.typeLoaders["[object HTMLCanvasElement]"] = function (self, webglModule, data, width, height,
|
||||||
|
shaderDataIndexToGlobalDataIndex) {
|
||||||
|
|
||||||
|
const NUM_IMAGES = Math.round(data.height / height);
|
||||||
|
const gl = webglModule.gl;
|
||||||
|
|
||||||
|
// //todo different tile sizes are problems
|
||||||
|
// if (!lastBatch || lastBatch.length < NUM_IMAGES) {
|
||||||
|
// lastBatch = {
|
||||||
|
// texId: gl.createTexture(),
|
||||||
|
// length: this.batchSize,
|
||||||
|
// texCount: 0,
|
||||||
|
// };
|
||||||
|
// gl.bindTexture(gl.TEXTURE_2D_ARRAY, options.texId);
|
||||||
|
// gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.RGBA8, data[0].width, data[0].height, data.length + 1);
|
||||||
|
// } else {
|
||||||
|
// gl.bindTexture(gl.TEXTURE_2D_ARRAY, options.texId);
|
||||||
|
// }
|
||||||
|
|
||||||
|
const textureId = gl.createTexture();
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D_ARRAY, textureId);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, self.magFilter);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, self.minFilter);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, self.wrap);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, self.wrap);
|
||||||
|
|
||||||
|
gl.texImage3D(
|
||||||
|
gl.TEXTURE_2D_ARRAY,
|
||||||
|
0,
|
||||||
|
gl.RGBA,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
NUM_IMAGES,
|
||||||
|
0,
|
||||||
|
gl.RGBA,
|
||||||
|
gl.UNSIGNED_BYTE,
|
||||||
|
data
|
||||||
|
);
|
||||||
|
|
||||||
|
return textureId;
|
||||||
|
};
|
||||||
|
|
||||||
|
//Image objects in Array, we assume image objects only todo ugly, can be array of anything
|
||||||
|
this.typeLoaders["[object Array]"] = function (self, webglModule, data, options, width, height, shaderDataIndexToGlobalDataIndex) {
|
||||||
|
const gl = webglModule.gl;
|
||||||
|
const textureId = gl.createTexture();
|
||||||
|
|
||||||
|
//gl.activeTexture(gl.TEXTURE0);
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D_ARRAY, textureId);
|
||||||
|
gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.RGBA8, data[0].width, data[0].height, data.length + 1);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAX_LEVEL, 0);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, self.minFilter);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, self.magFilter);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, self.wrap);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, self.wrap);
|
||||||
|
|
||||||
|
let index = 0;
|
||||||
|
for (let image of data) {
|
||||||
|
gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, index++, image.width, image.height,
|
||||||
|
1, gl.RGBA, gl.UNSIGNED_BYTE, image);
|
||||||
|
}
|
||||||
|
return textureId;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
supportsWebglVersion(version) {
|
||||||
|
return version === "2.0";
|
||||||
|
}
|
||||||
|
|
||||||
|
programUsed(renderer, specification, id, program, gl) {
|
||||||
|
gl.activeTexture(gl.TEXTURE0);
|
||||||
|
const tid = this.getLoaded(id);
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D_ARRAY, tid);
|
||||||
|
}
|
||||||
|
|
||||||
|
sample(index, vec2coords) {
|
||||||
|
return `texture(_vis_data_sampler_array, vec3(${vec2coords}, _vis_data_sampler_array_indices[${index}]))`;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare(shaderDataIndexToGlobalDataIndex) {
|
||||||
|
return `uniform sampler2DArray _vis_data_sampler_array;
|
||||||
|
int _vis_data_sampler_array_indices[${shaderDataIndexToGlobalDataIndex.length}] = int[${shaderDataIndexToGlobalDataIndex.length}](
|
||||||
|
${shaderDataIndexToGlobalDataIndex.join(",")}
|
||||||
|
);
|
||||||
|
|
||||||
|
vec4 osd_texture(int index, vec2 coords) {
|
||||||
|
return ${this.sample("index", "coords")};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Data loader for WebGL 2.0. Must load the data to a Texture2DArray.
|
||||||
|
* The name of the texture is a constant. The order od the textures in
|
||||||
|
* the z-stacking is defined in shaderDataIndexToGlobalDataIndex.
|
||||||
|
*
|
||||||
|
* For details, please, see the implementation.
|
||||||
|
* @class OpenSeadragon.WebGLModule.Loaders.TEXTURE_2D
|
||||||
|
*/
|
||||||
|
TEXTURE_2D: class /**@lends $.WebGLModule.Loaders.TEXTURE_2D */ extends OpenSeadragon.WebGLModule.IDataLoader {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creation
|
||||||
|
* @param {WebGL2RenderingContext} gl
|
||||||
|
* @param {string} webglVersion
|
||||||
|
* @param {object} options
|
||||||
|
* @param {GLuint} options.wrap texture wrap parameteri
|
||||||
|
* @param {GLuint} options.magFilter texture filter parameteri
|
||||||
|
* @param {GLuint} options.minFilter texture filter parameteri
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule.Loaders.TEXTURE_2D
|
||||||
|
* */
|
||||||
|
constructor(gl, webglVersion, options) {
|
||||||
|
super(gl, webglVersion, options);
|
||||||
|
|
||||||
|
this._samples = webglVersion === "1.0" ? "texture2D" : "texture";
|
||||||
|
|
||||||
|
this.typeLoaders["[object HTMLImageElement]"] =
|
||||||
|
this.typeLoaders["[object HTMLCanvasElement]"] = function (self, webglModule, data, width, height,
|
||||||
|
shaderDataIndexToGlobalDataIndex) {
|
||||||
|
|
||||||
|
//Avoid canvas slicing if possible
|
||||||
|
const NUM_IMAGES = Math.round(data.height / height);
|
||||||
|
if (NUM_IMAGES === 1) {
|
||||||
|
const texture = gl.createTexture();
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, self.wrap);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, self.wrap);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, self.minFilter);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, self.magFilter);
|
||||||
|
gl.texImage2D(gl.TEXTURE_2D,
|
||||||
|
0,
|
||||||
|
gl.RGBA,
|
||||||
|
gl.RGBA,
|
||||||
|
gl.UNSIGNED_BYTE,
|
||||||
|
data);
|
||||||
|
return [texture];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!self._canvas) {
|
||||||
|
self._canvas = document.createElement('canvas');
|
||||||
|
self._canvasReader = self._canvas.getContext('2d', {willReadFrequently: true});
|
||||||
|
self._canvasConverter = document.createElement('canvas');
|
||||||
|
self._canvasConverterReader = self._canvasConverter.getContext('2d',
|
||||||
|
{willReadFrequently: true});
|
||||||
|
}
|
||||||
|
|
||||||
|
let index = 0;
|
||||||
|
width = Math.round(width);
|
||||||
|
height = Math.round(height);
|
||||||
|
|
||||||
|
const units = [];
|
||||||
|
|
||||||
|
//we read from here
|
||||||
|
self._canvas.width = data.width;
|
||||||
|
self._canvas.height = data.height;
|
||||||
|
self._canvasReader.drawImage(data, 0, 0);
|
||||||
|
|
||||||
|
//Allowed texture size dimension only 256+ and power of two...
|
||||||
|
|
||||||
|
//it worked for arbitrary size until we begun with image arrays... is it necessary?
|
||||||
|
const IMAGE_SIZE = data.width < 256 ? 256 : Math.pow(2, Math.ceil(Math.log2(data.width)));
|
||||||
|
self._canvasConverter.width = IMAGE_SIZE;
|
||||||
|
self._canvasConverter.height = IMAGE_SIZE;
|
||||||
|
|
||||||
|
//just load all images and let shaders reference them...
|
||||||
|
for (let i = 0; i < shaderDataIndexToGlobalDataIndex.length; i++) {
|
||||||
|
if (shaderDataIndexToGlobalDataIndex[i] < 0) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (index >= NUM_IMAGES) {
|
||||||
|
console.warn("The visualisation contains less data than layers. Skipping layers ...");
|
||||||
|
return units;
|
||||||
|
}
|
||||||
|
|
||||||
|
units.push(gl.createTexture());
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, units[index]);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, self.wrap);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, self.wrap);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, self.minFilter);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, self.magFilter);
|
||||||
|
|
||||||
|
let pixels;
|
||||||
|
if (width !== IMAGE_SIZE || height !== IMAGE_SIZE) {
|
||||||
|
self._canvasConverterReader.drawImage(self._canvas, 0,
|
||||||
|
shaderDataIndexToGlobalDataIndex[i] * height,
|
||||||
|
width, height, 0, 0, IMAGE_SIZE, IMAGE_SIZE);
|
||||||
|
|
||||||
|
pixels = self._canvasConverterReader.getImageData(0, 0, IMAGE_SIZE, IMAGE_SIZE);
|
||||||
|
} else {
|
||||||
|
//load data
|
||||||
|
pixels = self._canvasReader.getImageData(0,
|
||||||
|
shaderDataIndexToGlobalDataIndex[i] * height, width, height);
|
||||||
|
}
|
||||||
|
|
||||||
|
gl.texImage2D(gl.TEXTURE_2D,
|
||||||
|
0,
|
||||||
|
gl.RGBA,
|
||||||
|
gl.RGBA,
|
||||||
|
gl.UNSIGNED_BYTE,
|
||||||
|
pixels);
|
||||||
|
index++;
|
||||||
|
}
|
||||||
|
return units;
|
||||||
|
};
|
||||||
|
|
||||||
|
//Image objects in Array, we assume image objects only todo ugly, can be array of anything
|
||||||
|
this.typeLoaders["[object Array]"] = function (self, webglModule, data, options, width, height, shaderDataIndexToGlobalDataIndex) {
|
||||||
|
const gl = webglModule.gl;
|
||||||
|
|
||||||
|
let index = 0;
|
||||||
|
const NUM_IMAGES = data.length;
|
||||||
|
const units = [];
|
||||||
|
|
||||||
|
//just load all images and let shaders reference them...
|
||||||
|
for (let i = 0; i < shaderDataIndexToGlobalDataIndex.length; i++) {
|
||||||
|
if (shaderDataIndexToGlobalDataIndex[i] < 0) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (index >= NUM_IMAGES) {
|
||||||
|
console.warn("The visualisation contains less data than layers. Skipping layers ...");
|
||||||
|
return units;
|
||||||
|
}
|
||||||
|
|
||||||
|
//create textures
|
||||||
|
units.push(gl.createTexture());
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, units[index]);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, self.wrap);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, self.wrap);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, self.minFilter);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, self.magFilter);
|
||||||
|
//do not check the image size, we render what wwe
|
||||||
|
gl.texImage2D(gl.TEXTURE_2D,
|
||||||
|
0,
|
||||||
|
gl.RGBA,
|
||||||
|
gl.RGBA,
|
||||||
|
gl.UNSIGNED_BYTE,
|
||||||
|
data[index++]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return units;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
unloadTexture(renderer, id, options) {
|
||||||
|
for (let textureUnit of options) {
|
||||||
|
renderer.gl.deleteTexture(textureUnit);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
supportsWebglVersion(version) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
programUsed(renderer, specification, id, program, gl) {
|
||||||
|
const units = this.getLoaded(id);
|
||||||
|
for (let i = 0; i < units.length; i++) {
|
||||||
|
let textureUnit = units[i];
|
||||||
|
let bindConst = `TEXTURE${i}`;
|
||||||
|
gl.activeTexture(gl[bindConst]);
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, textureUnit);
|
||||||
|
let location = gl.getUniformLocation(program, `vis_data_sampler_${i}`);
|
||||||
|
gl.uniform1i(location, i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sample(index, vec2coords) {
|
||||||
|
return `${this._samples}(vis_data_sampler_${index}, ${vec2coords})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare(shaderDataIndexToGlobalDataIndex) {
|
||||||
|
let samplers = 'uniform vec2 sampler_size;';
|
||||||
|
for (let i = 0; i < shaderDataIndexToGlobalDataIndex.length; i++) {
|
||||||
|
if (shaderDataIndexToGlobalDataIndex[i] === -1) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
samplers += `uniform sampler2D vis_data_sampler_${i};`;
|
||||||
|
}
|
||||||
|
return samplers;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
})(OpenSeadragon);
|
||||||
289
src/webgl/drawer.js
Normal file
289
src/webgl/drawer.js
Normal file
@ -0,0 +1,289 @@
|
|||||||
|
|
||||||
|
/*
|
||||||
|
* OpenSeadragon - WebGLDrawer
|
||||||
|
*
|
||||||
|
* Copyright (C) 2010-2023 OpenSeadragon contributors
|
||||||
|
*
|
||||||
|
* Redistribution and use in source and binary forms, with or without
|
||||||
|
* modification, are permitted provided that the following conditions are
|
||||||
|
* met:
|
||||||
|
*
|
||||||
|
* - Redistributions of source code must retain the above copyright notice,
|
||||||
|
* this list of conditions and the following disclaimer.
|
||||||
|
*
|
||||||
|
* - Redistributions in binary form must reproduce the above copyright
|
||||||
|
* notice, this list of conditions and the following disclaimer in the
|
||||||
|
* documentation and/or other materials provided with the distribution.
|
||||||
|
*
|
||||||
|
* - Neither the name of CodePlex Foundation nor the names of its
|
||||||
|
* contributors may be used to endorse or promote products derived from
|
||||||
|
* this software without specific prior written permission.
|
||||||
|
*
|
||||||
|
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
||||||
|
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
||||||
|
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
||||||
|
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
||||||
|
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
||||||
|
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
|
||||||
|
* TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
|
||||||
|
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
|
||||||
|
* LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||||
|
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||||
|
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function( $ ){
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @class WebGLDrawer
|
||||||
|
* @memberof OpenSeadragon
|
||||||
|
* @classdesc Default implementation of WebGLDrawer for an {@link OpenSeadragon.Viewer}.
|
||||||
|
* @param {Object} options - Options for this Drawer.
|
||||||
|
* @param {OpenSeadragon.Viewer} options.viewer - The Viewer that owns this Drawer.
|
||||||
|
* @param {OpenSeadragon.Viewport} options.viewport - Reference to Viewer viewport.
|
||||||
|
* @param {Element} options.element - Parent element.
|
||||||
|
* @param {Number} [options.debugGridColor] - See debugGridColor in {@link OpenSeadragon.Options} for details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
$.WebGL = class WebGL extends OpenSeadragon.DrawerBase {
|
||||||
|
constructor(options){
|
||||||
|
super(options);
|
||||||
|
|
||||||
|
this.destroyed = false;
|
||||||
|
// Add listeners for events that require modifying the scene or camera
|
||||||
|
this.viewer.addHandler("tile-ready", this._tileReadyHandler.bind(this));
|
||||||
|
this.viewer.addHandler("image-unloaded", this.renderer.freeData.bind(this.renderer));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public API required by all Drawer implementations
|
||||||
|
/**
|
||||||
|
* Clean up the renderer, removing all resources
|
||||||
|
*/
|
||||||
|
destroy(){
|
||||||
|
if(this.destroyed){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//todo
|
||||||
|
this.destroyed = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public API required by all Drawer implementations
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns true if the drawer supports rotation
|
||||||
|
*/
|
||||||
|
canRotate(){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public API required by all Drawer implementations
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @returns {Boolean} returns true if canvas and webgl are supported
|
||||||
|
*/
|
||||||
|
static isSupported(){
|
||||||
|
return true; //todo
|
||||||
|
}
|
||||||
|
|
||||||
|
getType() {
|
||||||
|
return 'universal_webgl';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* create the HTML element (canvas in this case) that the image will be drawn into
|
||||||
|
* @returns {Element} the canvas to draw into
|
||||||
|
*/
|
||||||
|
createDrawingElement(){
|
||||||
|
|
||||||
|
const engine = new $.WebGLModule($.extend(this.options, {
|
||||||
|
uniqueId: "openseadragon",
|
||||||
|
}));
|
||||||
|
|
||||||
|
engine.addRenderingSpecifications({
|
||||||
|
shaders: {
|
||||||
|
renderShader: {
|
||||||
|
type: "identity",
|
||||||
|
dataReferences: [0],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
engine.prepare();
|
||||||
|
|
||||||
|
const size = this._calculateCanvasSize();
|
||||||
|
engine.init(size.x, size.y);
|
||||||
|
this.viewer.addHandler("resize", this._resizeRenderer.bind(this));
|
||||||
|
this.renderer = engine;
|
||||||
|
return engine.canvas;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {Array} tiledImages Array of TiledImage objects to draw
|
||||||
|
*/
|
||||||
|
draw(tiledImages){
|
||||||
|
let viewport = {
|
||||||
|
bounds: this.viewport.getBoundsNoRotate(true),
|
||||||
|
center: this.viewport.getCenter(true),
|
||||||
|
rotation: this.viewport.getRotation(true) * Math.PI / 180,
|
||||||
|
zoom: this.viewport.getZoom(true)
|
||||||
|
};
|
||||||
|
|
||||||
|
let flipMultiplier = this.viewport.flipped ? -1 : 1;
|
||||||
|
// calculate view matrix for viewer
|
||||||
|
let posMatrix = $.Mat3.makeTranslation(-viewport.center.x, -viewport.center.y);
|
||||||
|
let scaleMatrix = $.Mat3.makeScaling(2 / viewport.bounds.width * flipMultiplier, -2 / viewport.bounds.height);
|
||||||
|
let rotMatrix = $.Mat3.makeRotation(-viewport.rotation);
|
||||||
|
let viewMatrix = scaleMatrix.multiply(rotMatrix).multiply(posMatrix);
|
||||||
|
|
||||||
|
this.renderer.clear();
|
||||||
|
this.renderer.setDataBlendingEnabled(false);
|
||||||
|
|
||||||
|
//iterate over tiled images and draw each one using a two-pass rendering pipeline if needed
|
||||||
|
|
||||||
|
let drawn = 0;
|
||||||
|
|
||||||
|
for (const tiledImage of tiledImages) {
|
||||||
|
let tilesToDraw = tiledImage.getTilesToDraw();
|
||||||
|
|
||||||
|
if (tilesToDraw.length === 0) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (drawn === 1) {
|
||||||
|
this.renderer.setDataBlendingEnabled(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
let overallMatrix = viewMatrix;
|
||||||
|
let imageRotation = tiledImage.getRotation(true);
|
||||||
|
// if needed, handle the tiledImage being rotated
|
||||||
|
if( imageRotation % 360 !== 0){
|
||||||
|
let imageRotationMatrix = $.Mat3.makeRotation(-imageRotation * Math.PI / 180);
|
||||||
|
let imageCenter = tiledImage.getBoundsNoRotate(true).getCenter();
|
||||||
|
let t1 = $.Mat3.makeTranslation(imageCenter.x, imageCenter.y);
|
||||||
|
let t2 = $.Mat3.makeTranslation(-imageCenter.x, -imageCenter.y);
|
||||||
|
|
||||||
|
// update the view matrix to account for this image's rotation
|
||||||
|
let localMatrix = t1.multiply(imageRotationMatrix).multiply(t2);
|
||||||
|
overallMatrix = viewMatrix.multiply(localMatrix);
|
||||||
|
}
|
||||||
|
|
||||||
|
//todo better access to the rendering context
|
||||||
|
const shader = this.renderer.specification(0).shaders.renderShader._renderContext;
|
||||||
|
|
||||||
|
// iterate over tiles and add data for each one to the buffers
|
||||||
|
for (let tileIndex = 0; tileIndex < tilesToDraw.length; tileIndex++){
|
||||||
|
const tile = tilesToDraw[tileIndex].tile;
|
||||||
|
const matrix = this._getTileMatrix(tile, tiledImage, overallMatrix);
|
||||||
|
shader.opacity.set(tile.opacity * tiledImage.opacity);
|
||||||
|
|
||||||
|
//todo pixelSize value (not yet memoized)
|
||||||
|
this.renderer.processData(tile.cacheKey, {
|
||||||
|
transform: matrix, zoom:
|
||||||
|
viewport.zoom,
|
||||||
|
pixelSize: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fire tiled-image-drawn event.
|
||||||
|
// TODO: the image data may not be on the output canvas yet!!
|
||||||
|
if( this.viewer ){
|
||||||
|
/**
|
||||||
|
* Raised when a tiled image is drawn to the canvas. Only valid
|
||||||
|
* for webgl drawer.
|
||||||
|
*
|
||||||
|
* @event tiled-image-drawn
|
||||||
|
* @memberof OpenSeadragon.Viewer
|
||||||
|
* @type {object}
|
||||||
|
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
|
||||||
|
* @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn.
|
||||||
|
* @property {Array} tiles - An array of Tile objects that were drawn.
|
||||||
|
* @property {?Object} userData - Arbitrary subscriber-defined object.
|
||||||
|
*/
|
||||||
|
this.viewer.raiseEvent( 'tiled-image-drawn', {
|
||||||
|
tiledImage: tiledImage,
|
||||||
|
tiles: tilesToDraw.map(info => info.tile),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
drawn++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the context2d imageSmoothingEnabled parameter
|
||||||
|
* @param {Boolean} enabled
|
||||||
|
*/
|
||||||
|
setImageSmoothingEnabled(enabled){
|
||||||
|
//todo
|
||||||
|
// this._clippingContext.imageSmoothingEnabled = enabled;
|
||||||
|
// this._outputContext.imageSmoothingEnabled = enabled;
|
||||||
|
}
|
||||||
|
|
||||||
|
// private
|
||||||
|
_getTileMatrix(tile, tiledImage, viewMatrix){
|
||||||
|
// compute offsets that account for tile overlap; needed for calculating the transform matrix appropriately
|
||||||
|
let overlapFraction = this._calculateOverlapFraction(tile, tiledImage);
|
||||||
|
let xOffset = tile.positionedBounds.width * overlapFraction.x;
|
||||||
|
let yOffset = tile.positionedBounds.height * overlapFraction.y;
|
||||||
|
|
||||||
|
// x, y, w, h in viewport coords
|
||||||
|
let x = tile.positionedBounds.x + (tile.x === 0 ? 0 : xOffset);
|
||||||
|
let y = tile.positionedBounds.y + (tile.y === 0 ? 0 : yOffset);
|
||||||
|
let right = tile.positionedBounds.x + tile.positionedBounds.width - (tile.isRightMost ? 0 : xOffset);
|
||||||
|
let bottom = tile.positionedBounds.y + tile.positionedBounds.height - (tile.isBottomMost ? 0 : yOffset);
|
||||||
|
let w = right - x;
|
||||||
|
let h = bottom - y;
|
||||||
|
|
||||||
|
let matrix = new $.Mat3([
|
||||||
|
w, 0, 0,
|
||||||
|
0, h, 0,
|
||||||
|
x, y, 1,
|
||||||
|
]);
|
||||||
|
|
||||||
|
if(tile.flipped){
|
||||||
|
// flip the tile around the center of the unit quad
|
||||||
|
let t1 = $.Mat3.makeTranslation(0.5, 0);
|
||||||
|
let t2 = $.Mat3.makeTranslation(-0.5, 0);
|
||||||
|
|
||||||
|
// update the view matrix to account for this image's rotation
|
||||||
|
let localMatrix = t1.multiply($.Mat3.makeScaling(-1, 1)).multiply(t2);
|
||||||
|
matrix = matrix.multiply(localMatrix);
|
||||||
|
}
|
||||||
|
let overallMatrix = viewMatrix.multiply(matrix);
|
||||||
|
return overallMatrix.values;
|
||||||
|
}
|
||||||
|
|
||||||
|
_resizeRenderer(){
|
||||||
|
const size = this._calculateCanvasSize();
|
||||||
|
this.renderer.setDimensions(0, 0, size.x, size.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
_imageUnloadedHandler(event){
|
||||||
|
this.renderer.freeData(event.tile.cacheKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
_tileReadyHandler(event){
|
||||||
|
//todo tile overlap
|
||||||
|
let tile = event.tile;
|
||||||
|
//todo fix cache system and then this line
|
||||||
|
//access by default raw tile data, and only access canvas if not cache set
|
||||||
|
let data = tile.cacheImageRecord ? tile.cacheImageRecord.getData() : tile.getCanvasContext().canvas;
|
||||||
|
this.renderer.loadData(tile.cacheKey, data, tile.sourceBounds.width, tile.sourceBounds.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
_calculateOverlapFraction(tile, tiledImage){
|
||||||
|
let overlap = tiledImage.source.tileOverlap;
|
||||||
|
let nativeWidth = tile.sourceBounds.width; // in pixels
|
||||||
|
let nativeHeight = tile.sourceBounds.height; // in pixels
|
||||||
|
let overlapWidth = (tile.x === 0 ? 0 : overlap) + (tile.isRightMost ? 0 : overlap); // in pixels
|
||||||
|
let overlapHeight = (tile.y === 0 ? 0 : overlap) + (tile.isBottomMost ? 0 : overlap); // in pixels
|
||||||
|
let widthOverlapFraction = overlap / (nativeWidth + overlapWidth); // as a fraction of image including overlap
|
||||||
|
let heightOverlapFraction = overlap / (nativeHeight + overlapHeight); // as a fraction of image including overlap
|
||||||
|
return {
|
||||||
|
x: widthOverlapFraction,
|
||||||
|
y: heightOverlapFraction
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}( OpenSeadragon ));
|
||||||
40
src/webgl/plainShader.js
Normal file
40
src/webgl/plainShader.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
(function($) {
|
||||||
|
/**
|
||||||
|
* Identity shader
|
||||||
|
*
|
||||||
|
* data reference must contain one index to the data to render using identity
|
||||||
|
*/
|
||||||
|
$.WebGLModule.IdentityLayer = class extends $.WebGLModule.ShaderLayer {
|
||||||
|
|
||||||
|
static type() {
|
||||||
|
return "identity";
|
||||||
|
}
|
||||||
|
|
||||||
|
static name() {
|
||||||
|
return "Identity";
|
||||||
|
}
|
||||||
|
|
||||||
|
static description() {
|
||||||
|
return "shows the data AS-IS";
|
||||||
|
}
|
||||||
|
|
||||||
|
static sources() {
|
||||||
|
return [{
|
||||||
|
acceptsChannelCount: (x) => x === 4,
|
||||||
|
description: "4d texture to render AS-IS"
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
|
||||||
|
getFragmentShaderExecution() {
|
||||||
|
return `return ${this.sampleChannel("tile_texture_coords")};`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
//todo why cannot be inside object :/
|
||||||
|
$.WebGLModule.IdentityLayer.defaultControls["use_channel0"] = {
|
||||||
|
required: "rgba"
|
||||||
|
};
|
||||||
|
|
||||||
|
$.WebGLModule.ShaderMediator.registerLayer($.WebGLModule.IdentityLayer);
|
||||||
|
|
||||||
|
})(OpenSeadragon);
|
||||||
982
src/webgl/renderer.js
Normal file
982
src/webgl/renderer.js
Normal file
@ -0,0 +1,982 @@
|
|||||||
|
|
||||||
|
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wrapping the funcionality of WebGL to be suitable for tile processing and rendering.
|
||||||
|
* Written by Aiosa
|
||||||
|
* @class OpenSeadragon.WebGLModule
|
||||||
|
* @memberOf OpenSeadragon
|
||||||
|
*/
|
||||||
|
$.WebGLModule = class extends $.EventSource {
|
||||||
|
/**
|
||||||
|
* @typedef {{
|
||||||
|
* name: string,
|
||||||
|
* lossless: boolean,
|
||||||
|
* shaders: Object.<string, OpenSeadragon.WebGLModule.ShaderLayerConfig>
|
||||||
|
* }} OpenSeadragon.WebGLModule.RenderingConfig
|
||||||
|
*
|
||||||
|
* //use_channel[X] name
|
||||||
|
* @template {Object<string,any>} TUseChannel
|
||||||
|
* //use_[fitler_name]
|
||||||
|
* @template {Object<string,number>} TUseFilter
|
||||||
|
* @template {Object<string,(string|any)>} TIControlConfig
|
||||||
|
* @typedef OpenSeadragon.WebGLModule.ShaderLayerParams
|
||||||
|
* @type {{TUseChannel,TUseFilter,TIControlConfig}}
|
||||||
|
*
|
||||||
|
* @typedef {{
|
||||||
|
* name: string,
|
||||||
|
* type: string,
|
||||||
|
* visible: boolean,
|
||||||
|
* dataReferences: number[],
|
||||||
|
* params: OpenSeadragon.WebGLModule.ShaderLayerParams
|
||||||
|
* }} OpenSeadragon.WebGLModule.ShaderLayerConfig
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* @typedef OpenSeadragon.WebGLModule.UIControlsRenderer
|
||||||
|
* @type function
|
||||||
|
* @param {string} title
|
||||||
|
* @param {string} html
|
||||||
|
* @param {string} dataId
|
||||||
|
* @param {boolean} isVisible
|
||||||
|
* @param {OpenSeadragon.WebGLModule.ShaderLayer} layer
|
||||||
|
* @param {boolean} wasErrorWhenLoading
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {object} incomingOptions
|
||||||
|
* @param {string} incomingOptions.htmlControlsId: where to render html controls,
|
||||||
|
* @param {string} incomingOptions.webGlPreferredVersion prefered WebGL version, for now "1.0" or "2.0"
|
||||||
|
* @param {OpenSeadragon.WebGLModule.UIControlsRenderer} incomingOptions.htmlShaderPartHeader function that generates particular layer HTML
|
||||||
|
* @param {boolean} incomingOptions.debug debug mode default false
|
||||||
|
* @param {function} incomingOptions.ready function called when ready
|
||||||
|
* @param {function} incomingOptions.resetCallback function called when user input changed, e.g. changed output of the current rendering
|
||||||
|
* @param {function} incomingOptions.visualisationInUse function called when a specification is initialized and run
|
||||||
|
* @param {function} incomingOptions.visualisationChanged function called when a visualization swap is performed:
|
||||||
|
* signature f({Visualization} oldVisualisation,{Visualization} newVisualisation)
|
||||||
|
* @constructor
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule
|
||||||
|
*/
|
||||||
|
constructor(incomingOptions) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////
|
||||||
|
///////////// Default values overrideable from incomingOptions /////////////////
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////
|
||||||
|
this.uniqueId = "";
|
||||||
|
|
||||||
|
//todo events instead
|
||||||
|
this.ready = function() { };
|
||||||
|
this.htmlControlsId = null;
|
||||||
|
this.webGlPreferredVersion = "2.0";
|
||||||
|
this.htmlShaderPartHeader = function(title, html, dataId, isVisible, layer, isControllable = true) {
|
||||||
|
return `<div class="configurable-border"><div class="shader-part-name">${title}</div>${html}</div>`;
|
||||||
|
};
|
||||||
|
this.resetCallback = function() { };
|
||||||
|
//called once a visualisation is compiled and linked (might not happen)
|
||||||
|
this.visualisationReady = function(i, visualisation) { };
|
||||||
|
//called once a visualisation is switched to (including first run)
|
||||||
|
this.visualisationInUse = function(visualisation) { };
|
||||||
|
this.visualisationChanged = function(oldVis, newVis) { };
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Debug mode.
|
||||||
|
* @member {boolean}
|
||||||
|
*/
|
||||||
|
this.debug = false;
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////
|
||||||
|
///////////// Incoming Values ///////////////////////////////////////////////////
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
// Assign from incoming terms
|
||||||
|
for (let key in incomingOptions) {
|
||||||
|
if (incomingOptions[key]) {
|
||||||
|
this[key] = incomingOptions[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.constructor.idPattern.test(this.uniqueId)) {
|
||||||
|
throw "$.WebGLModule: invalid ID! Id can contain only letters, numbers and underscore. ID: " + this.uniqueId;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Current rendering context
|
||||||
|
* @member {OpenSeadragon.WebGLModule.WebGLImplementation}
|
||||||
|
*/
|
||||||
|
this.webglContext = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* WebGL context
|
||||||
|
* @member {WebGLRenderingContextBase}
|
||||||
|
*/
|
||||||
|
this.gl = null;
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////
|
||||||
|
///////////// Internals /////////////////////////////////////////////////////////
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
this.reset();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
for (let version of [this.webGlPreferredVersion, "2.0", "1.0"]) {
|
||||||
|
const Context = $.WebGLModule.determineContext(version);
|
||||||
|
let glContext = Context && Context.create(canvas);
|
||||||
|
|
||||||
|
if (glContext) {
|
||||||
|
this.gl = glContext;
|
||||||
|
const contextOpts = incomingOptions[version] || {};
|
||||||
|
const readGlProp = function(prop, defaultValue) {
|
||||||
|
return glContext[contextOpts[prop] || defaultValue] || glContext[defaultValue];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {object} options
|
||||||
|
* @param {string} options.wrap texture wrap parameteri
|
||||||
|
* @param {string} options.magFilter texture filter parameteri
|
||||||
|
* @param {string} options.minFilter texture filter parameteri
|
||||||
|
* @param {string|WebGLModule.IDataLoader} options.dataLoader class name or implementation of a given loader
|
||||||
|
*/
|
||||||
|
const options = {
|
||||||
|
wrap: readGlProp("wrap", "MIRRORED_REPEAT"),
|
||||||
|
magFilter: readGlProp("magFilter", "LINEAR"),
|
||||||
|
minFilter: readGlProp("minFilter", "NEAREST"),
|
||||||
|
dataLoader: contextOpts.dataLoader || "TEXTURE_2D"
|
||||||
|
};
|
||||||
|
this.webglContext = new Context(this, glContext, options);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
/**
|
||||||
|
* @event fatal-error
|
||||||
|
*/
|
||||||
|
this.raiseEvent('fatal-error', {message: "Unable to initialize the WebGL renderer.",
|
||||||
|
details: e});
|
||||||
|
console.error(e);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log(`WebGL ${this.webglContext.getVersion()} Rendering module (ID ${this.uniqueId})`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset the engine to the initial state
|
||||||
|
* @instance
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule
|
||||||
|
*/
|
||||||
|
reset() {
|
||||||
|
this._unloadCurrentProgram();
|
||||||
|
this._programConfigurations = [];
|
||||||
|
this._dataSources = [];
|
||||||
|
this._shaderDataIndexToGlobalDataIndex = [];
|
||||||
|
this._origDataSources = [];
|
||||||
|
this._programs = {};
|
||||||
|
this._program = -1;
|
||||||
|
this._prepared = false;
|
||||||
|
this.running = false;
|
||||||
|
this._initialized = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if prepare() was called.
|
||||||
|
* @return {boolean}
|
||||||
|
* @instance
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule
|
||||||
|
*/
|
||||||
|
get isPrepared() {
|
||||||
|
return this._prepared;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* WebGL target canvas
|
||||||
|
* @return {HTMLCanvasElement}
|
||||||
|
*/
|
||||||
|
get canvas() {
|
||||||
|
return this.gl.canvas;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* WebGL active program
|
||||||
|
* @return {WebGLProgram}
|
||||||
|
*/
|
||||||
|
get program() {
|
||||||
|
return this._programs[this._program];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if init() was called.
|
||||||
|
* @return {boolean}
|
||||||
|
* @instance
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule
|
||||||
|
*/
|
||||||
|
get isInitialized() {
|
||||||
|
return this._initialized;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Change the dimensions, useful for borders, used by openSeadragonGL
|
||||||
|
* @instance
|
||||||
|
* @memberOf WebGLModule
|
||||||
|
*/
|
||||||
|
setDimensions(x, y, width, height) {
|
||||||
|
if (width === this.width && height === this.height) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.width = width;
|
||||||
|
this.height = height;
|
||||||
|
this.gl.canvas.width = width;
|
||||||
|
this.gl.canvas.height = height;
|
||||||
|
this.gl.viewport(x, y, width, height);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set program shaders. Vertex shader is set by default a square.
|
||||||
|
* @param {RenderingConfig} configurations - objects that define the what to render (see Readme)
|
||||||
|
* @return {boolean} true if loaded successfully
|
||||||
|
* @instance
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule
|
||||||
|
*/
|
||||||
|
addRenderingSpecifications(...configurations) {
|
||||||
|
if (this._prepared) {
|
||||||
|
console.error("New specification cannot be introduced after the visualiser was prepared.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
for (let config of configurations) {
|
||||||
|
if (!config.shaders) {
|
||||||
|
console.warn("Invalid visualization: no shaders defined", config);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
let count = 0;
|
||||||
|
for (let sid in config.shaders) {
|
||||||
|
const shader = config.shaders[sid];
|
||||||
|
if (!shader.params) {
|
||||||
|
shader.params = {};
|
||||||
|
}
|
||||||
|
count++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (count < 0) {
|
||||||
|
console.warn("Invalid configualization: no shader configuration present!", config);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
this._programConfigurations.push(config);
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Runs a callback on each specification
|
||||||
|
* @param {function} call callback to perform on each specification (its object given as the only parameter)
|
||||||
|
* @instance
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule
|
||||||
|
*/
|
||||||
|
foreachRenderingSpecification(call) {
|
||||||
|
this._programConfigurations.forEach(vis => call(vis));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Rebuild specification and update scene
|
||||||
|
* @param {string[]|undefined} order of shaders, ID's of data as defined in setup JSON, last element
|
||||||
|
* is rendered last (top)
|
||||||
|
* @instance
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule
|
||||||
|
*/
|
||||||
|
rebuildSpecification(order = undefined) {
|
||||||
|
let vis = this._programConfigurations[this._program];
|
||||||
|
|
||||||
|
if (order) {
|
||||||
|
vis.order = order;
|
||||||
|
}
|
||||||
|
this._unloadCurrentProgram();
|
||||||
|
this._specificationToProgram(vis, this._program);
|
||||||
|
this._forceSwitchShader(this._program);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get currently used specification
|
||||||
|
* @return {object} current specification
|
||||||
|
* @instance
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule
|
||||||
|
*/
|
||||||
|
specification(index) {
|
||||||
|
return this._programConfigurations[Math.min(index, this._programConfigurations.length - 1)];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get currently used specification ilayer.params,ndex
|
||||||
|
* @return {number} index of the current specification
|
||||||
|
* @instance
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule
|
||||||
|
*/
|
||||||
|
currentSpecificationIndex() {
|
||||||
|
return this._program;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Switch to program at index: this is the index (order) in which
|
||||||
|
* setShaders(...) was called. If you want to switch to shader that
|
||||||
|
* has been set with second setShaders(...) call, pass i=1.
|
||||||
|
* @param {Number} i program index or null if you wish to re-initialize the current one
|
||||||
|
* @instance
|
||||||
|
* @memberOf OpenSeadragon.WebGLModule
|
||||||
|
*/
|
||||||
|
useSpecification(i) {
|
||||||
|
if (!this._initialized) {
|
||||||
|
console.warn("$.WebGLModule::useSpecification(): not initialized.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this._program === i) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let oldIndex = this._program;
|
||||||
|
this._forceSwitchShader(i);
|
||||||
|
this.visualisationChanged(this._programConfigurations[oldIndex], this._programConfigurations[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get a list of image pyramids used to compose the current active specification
|
||||||
|
* @instance
|
||||||
|
* @memberOf WebGLModule
|
||||||
|
*/
|
||||||
|
getSources() {
|
||||||
|
//return this._programConfigurations[this._program].dziExtendedUrl;
|
||||||
|
return this._dataSources;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Supported: 'wrap', 'minFilter', 'magFilter'
|
||||||
|
* @param {string} name WebGL name of the parameter
|
||||||
|
* @param {GLuint} value
|
||||||
|
*/
|
||||||
|
setTextureParam(name, value) {
|
||||||
|
this.webglContext.texture.setTextureParam(name, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param id
|
||||||
|
* @param data
|
||||||
|
* @param width
|
||||||
|
* @param height
|
||||||
|
*/
|
||||||
|
loadData(id, data, width, height) {
|
||||||
|
this.webglContext.texture.load(this, id, data, width, height);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders data using WebGL
|
||||||
|
* @param {string} id used in loadImage()
|
||||||
|
*
|
||||||
|
* @param {object} tileOpts
|
||||||
|
* @param {number} tileOpts.zoom value passed to the shaders as zoom_level
|
||||||
|
* @param {number} tileOpts.pixelSize value passed to the shaders as pixel_size_in_fragments
|
||||||
|
* @param {OpenSeadragon.Mat3} tileOpts.transform position of the rendered tile
|
||||||
|
*
|
||||||
|
* @instance
|
||||||
|
* @memberOf WebGLModule
|
||||||
|
*/
|
||||||
|
processData(id, tileOpts) {
|
||||||
|
this.webglContext.programUsed(
|
||||||
|
this.program,
|
||||||
|
this._programConfigurations[this._program],
|
||||||
|
id,
|
||||||
|
tileOpts
|
||||||
|
);
|
||||||
|
|
||||||
|
// if (this.debug) {
|
||||||
|
// //todo
|
||||||
|
// this._renderDebugIO(data, result);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
freeData(id) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear the output canvas
|
||||||
|
*/
|
||||||
|
clear() {
|
||||||
|
//todo: necessary?
|
||||||
|
this.gl.clearColor(0, 0, 0, 0);
|
||||||
|
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether the webgl module renders UI
|
||||||
|
* @return {boolean|boolean}
|
||||||
|
* @instance
|
||||||
|
* @memberOf WebGLModule
|
||||||
|
*/
|
||||||
|
supportsHtmlControls() {
|
||||||
|
return typeof this.htmlControlsId === "string" && this.htmlControlsId.length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Execute call on each visualization layer with no errors
|
||||||
|
* @param {object} vis current specification setup context
|
||||||
|
* @param {function} callback call to execute
|
||||||
|
* @param {function} onFail handle exception during execition
|
||||||
|
* @return {boolean} true if no exception occured
|
||||||
|
* @instance
|
||||||
|
* @memberOf WebGLModule
|
||||||
|
*/
|
||||||
|
static eachValidShaderLayer(vis, callback,
|
||||||
|
onFail = (layer, e) => {
|
||||||
|
layer.error = e.message;
|
||||||
|
console.error(e);
|
||||||
|
}) {
|
||||||
|
let shaders = vis.shaders;
|
||||||
|
let noError = true;
|
||||||
|
for (let key in shaders) {
|
||||||
|
let shader = shaders[key];
|
||||||
|
|
||||||
|
if (shader && !shader.error) {
|
||||||
|
try {
|
||||||
|
callback(shader);
|
||||||
|
} catch (e) {
|
||||||
|
if (!onFail) {
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
onFail(shader, e);
|
||||||
|
noError = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return noError;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Execute call on each _visible_ specification layer with no errors.
|
||||||
|
* Visible is subset of valid.
|
||||||
|
* @param {object} vis current specification setup context
|
||||||
|
* @param {function} callback call to execute
|
||||||
|
* @param {function} onFail handle exception during execition
|
||||||
|
* @return {boolean} true if no exception occured
|
||||||
|
* @instance
|
||||||
|
* @memberOf WebGLModule
|
||||||
|
*/
|
||||||
|
static eachVisibleShaderLayer(vis, callback,
|
||||||
|
onFail = (layer, e) => {
|
||||||
|
layer.error = e.message;
|
||||||
|
console.error(e);
|
||||||
|
}) {
|
||||||
|
|
||||||
|
let shaders = vis.shaders;
|
||||||
|
let noError = true;
|
||||||
|
for (let key in shaders) {
|
||||||
|
//rendering == true means no error
|
||||||
|
let shader = shaders[key];
|
||||||
|
if (shader && shader.rendering) {
|
||||||
|
try {
|
||||||
|
callback(shader);
|
||||||
|
} catch (e) {
|
||||||
|
if (!onFail) {
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
onFail(shader, e);
|
||||||
|
noError = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return noError;
|
||||||
|
}
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
//// YOU PROBABLY WANT TO READ FUNCTIONS BELOW SO YOU KNOW HOW TO SET UP YOUR SHADERS
|
||||||
|
//// BUT YOU SHOULD NOT CALL THEM DIRECTLY
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get current program, reset if invalid
|
||||||
|
* @return {number} program index
|
||||||
|
*/
|
||||||
|
getCurrentProgramIndex() {
|
||||||
|
if (this._program < 0 || this._program >= this._programConfigurations.length) {
|
||||||
|
this._program = 0;
|
||||||
|
}
|
||||||
|
return this._program;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to JSON.stringify replacer
|
||||||
|
* @param key key to the value
|
||||||
|
* @param value value to be exported
|
||||||
|
* @return {*} value if key passes exportable condition, undefined otherwise
|
||||||
|
*/
|
||||||
|
static jsonReplacer(key, value) {
|
||||||
|
return key.startsWith("_") || ["eventSource"].includes(key) ? undefined : value;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* For easy initialization, do both in once call.
|
||||||
|
* For separate initialization (prepare|init), see functions below.
|
||||||
|
* @param {string[]|undefined} dataSources a list of data identifiers available to the specifications
|
||||||
|
* - specification configurations should not reference data not present in this array
|
||||||
|
* - the module gives you current list of required subset of this list for particular active visualization goal
|
||||||
|
* @param width initialization width
|
||||||
|
* @param height initialization height
|
||||||
|
*/
|
||||||
|
prepareAndInit(dataSources = undefined, width = 1, height = 1) {
|
||||||
|
this.prepare(dataSources);
|
||||||
|
this.init(width, height);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prepares the WebGL wrapper for being initialized. It is separated from
|
||||||
|
* initialization as this must be finished before OSD is ready (we must be ready to draw when the data comes).
|
||||||
|
* The idea is to open the protocol for OSD in onPrepared.
|
||||||
|
* Shaders are fetched from `specification.url` parameter.
|
||||||
|
*
|
||||||
|
* @param {string[]|undefined} dataSources id's of data such that server can understand which image to send (usually paths)
|
||||||
|
* @param {number} visIndex index of the initial specification
|
||||||
|
*/
|
||||||
|
prepare(dataSources = undefined, visIndex = 0) {
|
||||||
|
if (this._prepared) {
|
||||||
|
console.error("Already prepared!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this._programConfigurations.length < 1) {
|
||||||
|
console.error("No specification specified!");
|
||||||
|
/**
|
||||||
|
* @event fatal-error
|
||||||
|
*/
|
||||||
|
this.raiseEvent('fatal-error', {message: "No specification specified!",
|
||||||
|
details: "::prepare() called with no specification set."});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this._origDataSources = dataSources || [];
|
||||||
|
this._program = visIndex;
|
||||||
|
|
||||||
|
this._prepared = true;
|
||||||
|
this.getCurrentProgramIndex(); //resets index
|
||||||
|
this._specificationToProgram(this._programConfigurations[this._program], this._program);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialization. It is separated from preparation as this actually initiates the rendering,
|
||||||
|
* sometimes this can happen only when other things are ready. Must be performed after
|
||||||
|
* all the prepare() strategy finished: e.g. as onPrepared. Or use prepareAndInit();
|
||||||
|
*
|
||||||
|
* @param {int} width width of the first tile going to be drawn
|
||||||
|
* @param {int} height height of the first tile going to be drawn
|
||||||
|
*/
|
||||||
|
init(width = 1, height = 1) {
|
||||||
|
if (!this._prepared) {
|
||||||
|
console.error("The viaGL was not yet prepared. Call prepare() before init()!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this._initialized) {
|
||||||
|
console.error("Already initialized!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this._initialized = true;
|
||||||
|
this.setDimensions(width, height);
|
||||||
|
|
||||||
|
|
||||||
|
//todo rotate anticlockwise to cull backfaces
|
||||||
|
this.gl.enable(this.gl.CULL_FACE);
|
||||||
|
this.gl.cullFace(this.gl.FRONT);
|
||||||
|
|
||||||
|
this.running = true;
|
||||||
|
|
||||||
|
this._forceSwitchShader(null);
|
||||||
|
this.ready();
|
||||||
|
}
|
||||||
|
|
||||||
|
setDataBlendingEnabled(enabled) {
|
||||||
|
if (enabled) {
|
||||||
|
this.gl.enable(this.gl.BLEND);
|
||||||
|
this.gl.blendEquation(this.gl.FUNC_ADD);
|
||||||
|
this.gl.blendFuncSeparate(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA, this.gl.ONE, this.gl.ONE);
|
||||||
|
} else {
|
||||||
|
this.gl.disable(this.gl.BLEND);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Supported are two modes: show and blend
|
||||||
|
* show is the default option, stacking layers by generalized alpha blending
|
||||||
|
* blend is a custom alternative, default is a mask (remove background where foreground.a > 0.001)
|
||||||
|
*
|
||||||
|
* vec4 my_blend(vec4 foreground, vec4 background) {
|
||||||
|
* <<code>> //here goes your blending code
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* @param code GLSL code to blend - must return vec4() and can use
|
||||||
|
* two variables: background, foreground
|
||||||
|
*/
|
||||||
|
setLayerBlending(code) {
|
||||||
|
this.webglContext.setBlendEquation(code);
|
||||||
|
this.rebuildSpecification();
|
||||||
|
}
|
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////////////////////////
|
||||||
|
///////////// YOU PROBABLY DON'T WANT TO READ/CHANGE FUNCTIONS BELOW
|
||||||
|
//////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Forward glLoaded event to the active layer
|
||||||
|
* @param gl
|
||||||
|
* @param program
|
||||||
|
* @param vis
|
||||||
|
*/
|
||||||
|
glLoaded(gl, program, vis) {
|
||||||
|
$.WebGLModule.eachVisibleShaderLayer(vis, layer => layer._renderContext.glLoaded(program, gl));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Forward glDrawing event to the active layer
|
||||||
|
* @param gl
|
||||||
|
* @param program
|
||||||
|
* @param vis
|
||||||
|
* @param bounds
|
||||||
|
*/
|
||||||
|
glDrawing(gl, program, vis, bounds) {
|
||||||
|
$.WebGLModule.eachVisibleShaderLayer(vis, layer => layer._renderContext.glDrawing(program, gl));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Force switch shader (program), will reset even if the specified
|
||||||
|
* program is currently active, good if you need 'gl-loaded' to be
|
||||||
|
* invoked (e.g. some uniform variables changed)
|
||||||
|
* @param {Number} i program index or null if you wish to re-initialize the current one
|
||||||
|
* @param _reset
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
_forceSwitchShader(i, _reset = true) {
|
||||||
|
if (isNaN(i) || i === null || i === undefined) {
|
||||||
|
i = this._program;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (i >= this._programConfigurations.length) {
|
||||||
|
console.error("Invalid specification index ", i, "trying to use index 0...");
|
||||||
|
if (i === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
i = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
let target = this._programConfigurations[i];
|
||||||
|
if (!this._programs[i]) {
|
||||||
|
this._specificationToProgram(target, i);
|
||||||
|
} else if (i !== this._program) {
|
||||||
|
this._updateRequiredDataSources(target);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._program = i;
|
||||||
|
if (target.error) {
|
||||||
|
if (this.supportsHtmlControls()) {
|
||||||
|
this._loadHtml(i, this._program);
|
||||||
|
}
|
||||||
|
this._loadScript(i, this._program);
|
||||||
|
this.running = false;
|
||||||
|
if (this._programConfigurations.length < 2) {
|
||||||
|
/**
|
||||||
|
* @event fatal-error
|
||||||
|
*/
|
||||||
|
this.raiseEvent('fatal-error', {message: "The only rendering specification left is invalid!", target: target});
|
||||||
|
} else {
|
||||||
|
/**
|
||||||
|
* @event error
|
||||||
|
*/
|
||||||
|
this.raiseEvent('error', {message: "Currently chosen rendering specification is not valid!", target: target});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.running = true;
|
||||||
|
if (this.supportsHtmlControls()) {
|
||||||
|
this._loadHtml(i, this._program);
|
||||||
|
}
|
||||||
|
this._loadDebugInfo();
|
||||||
|
if (!this._loadScript(i, this._program)) {
|
||||||
|
if (!_reset) {
|
||||||
|
throw "Could not build visualization";
|
||||||
|
}
|
||||||
|
this._forceSwitchShader(i, false); //force reset in errors
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.webglContext.programLoaded(this._programs[i], target);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_unloadCurrentProgram() {
|
||||||
|
let program = this._programs && this._programs[this._program];
|
||||||
|
if (program) {
|
||||||
|
//must remove before attaching new
|
||||||
|
this._detachShader(program, "VERTEX_SHADER");
|
||||||
|
this._detachShader(program, "FRAGMENT_SHADER");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_loadHtml(visId) {
|
||||||
|
let htmlControls = document.getElementById(this.htmlControlsId);
|
||||||
|
htmlControls.innerHTML = this._programConfigurations[visId]._built["html"];
|
||||||
|
}
|
||||||
|
|
||||||
|
_loadScript(visId) {
|
||||||
|
return $.WebGLModule.eachValidShaderLayer(this._programConfigurations[visId], layer => layer._renderContext.init());
|
||||||
|
}
|
||||||
|
|
||||||
|
_getDebugInfoPanel() {
|
||||||
|
return `<div id="test-inner-${this.uniqueId}-webgl">
|
||||||
|
<b>WebGL Processing I/O (debug mode)</b>
|
||||||
|
<div id="test-${this.uniqueId}-webgl-log"></div>
|
||||||
|
Input: <br><div style="border: 1px solid;display: inline-block; overflow: auto;" id='test-${this.uniqueId}-webgl-input'>No input.</div><br>
|
||||||
|
Output:<br><div style="border: 1px solid;display: inline-block; overflow: auto;" id="test-${this.uniqueId}-webgl-output">No output.</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
_loadDebugInfo() {
|
||||||
|
if (!this.debug) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let container = document.getElementById(`test-${this.uniqueId}-webgl`);
|
||||||
|
if (!container) {
|
||||||
|
if (!this.htmlControlsId) {
|
||||||
|
document.body.innerHTML += `<div id="test-${this.uniqueId}-webgl" style="position:absolute; top:0; right:0; width: 250px">${this._getDebugInfoPanel()}</div>`;
|
||||||
|
} else {
|
||||||
|
//safe as we do this before handlers are attached
|
||||||
|
document.getElementById(this.htmlControlsId).parentElement.innerHTML += `<div id="test-${this.uniqueId}-webgl" style="width: 100%;">${this._getDebugInfoPanel()}</div>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_renderDebugIO(inputData, outputData) {
|
||||||
|
let input = document.getElementById(`test-${this.uniqueId}-webgl-input`);
|
||||||
|
let output = document.getElementById(`test-${this.uniqueId}-webgl-output`);
|
||||||
|
|
||||||
|
input.innerHTML = "";
|
||||||
|
input.append($.WebGLModule.Loaders.dataAsHtmlElement(inputData));
|
||||||
|
|
||||||
|
if (outputData) {
|
||||||
|
output.innerHTML = "";
|
||||||
|
if (!this._ocanvas) {
|
||||||
|
this._ocanvas = document.createElement("canvas");
|
||||||
|
}
|
||||||
|
this._ocanvas.width = outputData.width;
|
||||||
|
this._ocanvas.height = outputData.height;
|
||||||
|
let octx = this._ocanvas.getContext('2d');
|
||||||
|
octx.drawImage(outputData, 0, 0);
|
||||||
|
output.append(this._ocanvas);
|
||||||
|
} else {
|
||||||
|
output.innerHTML = "No output!";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_buildFailed(specification, error) {
|
||||||
|
console.error(error);
|
||||||
|
specification.error = "Failed to compose this specification.";
|
||||||
|
specification.desc = error;
|
||||||
|
}
|
||||||
|
|
||||||
|
_buildSpecification(order, specification) {
|
||||||
|
try {
|
||||||
|
let data = this.webglContext.compileSpecification(order, specification,
|
||||||
|
this._shaderDataIndexToGlobalDataIndex, this.supportsHtmlControls());
|
||||||
|
|
||||||
|
if (data.usableShaders < 1) {
|
||||||
|
this._buildFailed(specification, `Empty specification: no valid specification has been specified.
|
||||||
|
<br><b>Specification setup:</b></br> <code>${JSON.stringify(specification, $.WebGLModule.jsonReplacer)}</code>
|
||||||
|
<br><b>Dynamic shader data:</b></br><code>${JSON.stringify(specification.data)}</code>`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
data.dziExtendedUrl = data.dataUrls.join(",");
|
||||||
|
specification._built = data;
|
||||||
|
|
||||||
|
//preventive
|
||||||
|
delete specification.error;
|
||||||
|
delete specification.desc;
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
this._buildFailed(specification, error);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
_detachShader(program, type) {
|
||||||
|
let shader = program[type];
|
||||||
|
if (shader) {
|
||||||
|
this.gl.detachShader(program, shader);
|
||||||
|
this.gl.deleteShader(shader);
|
||||||
|
program[type] = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_specificationToProgram(vis, idx) {
|
||||||
|
if (!vis._built) {
|
||||||
|
vis._built = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
this._updateRequiredDataSources(vis);
|
||||||
|
this._processSpecification(vis, idx);
|
||||||
|
return idx;
|
||||||
|
}
|
||||||
|
|
||||||
|
_initializeShaderFactory(ShaderFactoryClass, layer, idx) {
|
||||||
|
if (!ShaderFactoryClass) {
|
||||||
|
layer.error = "Unknown layer type.";
|
||||||
|
layer.desc = `The layer type '${layer.type}' has no associated factory. Missing in 'shaderSources'.`;
|
||||||
|
console.warn("Skipping layer " + layer.name);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
layer._index = idx;
|
||||||
|
layer.visible = layer.visible === undefined ? true : layer.visible;
|
||||||
|
layer._renderContext = new ShaderFactoryClass(`${this.uniqueId}${idx}`, layer.params || {}, {
|
||||||
|
layer: layer,
|
||||||
|
webgl: this.webglContext,
|
||||||
|
invalidate: this.resetCallback,
|
||||||
|
rebuild: this.rebuildSpecification.bind(this, undefined)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
_updateRequiredDataSources(specs) {
|
||||||
|
//for now just request all data, later decide in the context on what to really send
|
||||||
|
//might in the future decide to only request used data, now not supported
|
||||||
|
let usedIds = new Set();
|
||||||
|
for (let key in specs.shaders) {
|
||||||
|
let layer = specs.shaders[key];
|
||||||
|
if (layer) {
|
||||||
|
for (let x of layer.dataReferences) {
|
||||||
|
usedIds.add(x);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
usedIds = [...usedIds].sort();
|
||||||
|
this._dataSources = [];
|
||||||
|
|
||||||
|
while (usedIds[usedIds.length - 1] >= this._origDataSources.length) {
|
||||||
|
//make sure values are set if user did not provide
|
||||||
|
this._origDataSources.push("__generated_do_not_use__");
|
||||||
|
}
|
||||||
|
|
||||||
|
this._shaderDataIndexToGlobalDataIndex = new Array(
|
||||||
|
Math.max(this._origDataSources.length, usedIds[usedIds.length - 1])
|
||||||
|
).fill(-1);
|
||||||
|
|
||||||
|
for (let id of usedIds) {
|
||||||
|
this._shaderDataIndexToGlobalDataIndex[id] = this._dataSources.length;
|
||||||
|
this._dataSources.push(this._origDataSources[id]);
|
||||||
|
while (id > this._shaderDataIndexToGlobalDataIndex.length) {
|
||||||
|
this._shaderDataIndexToGlobalDataIndex.push(-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_processSpecification(spec, idx) {
|
||||||
|
let gl = this.gl,
|
||||||
|
err = function(message, description) {
|
||||||
|
spec.error = message;
|
||||||
|
spec.desc = description;
|
||||||
|
};
|
||||||
|
|
||||||
|
let program;
|
||||||
|
|
||||||
|
if (!this._programs[idx]) {
|
||||||
|
program = gl.createProgram();
|
||||||
|
this._programs[idx] = program;
|
||||||
|
|
||||||
|
let index = 0;
|
||||||
|
//init shader factories and unique id's
|
||||||
|
for (let key in spec.shaders) {
|
||||||
|
let layer = spec.shaders[key];
|
||||||
|
if (layer) {
|
||||||
|
let ShaderFactoryClass = $.WebGLModule.ShaderMediator.getClass(layer.type);
|
||||||
|
if (layer.type === "none") {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
this._initializeShaderFactory(ShaderFactoryClass, layer, index++);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
program = this._programs[idx];
|
||||||
|
for (let key in spec.shaders) {
|
||||||
|
let layer = spec.shaders[key];
|
||||||
|
|
||||||
|
if (layer) {
|
||||||
|
if (!layer.error &&
|
||||||
|
layer._renderContext &&
|
||||||
|
layer._renderContext.constructor.type() === layer.type) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
delete layer.error;
|
||||||
|
delete layer.desc;
|
||||||
|
if (layer.type === "none") {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
let ShaderFactoryClass = $.WebGLModule.ShaderMediator.getClass(layer.type);
|
||||||
|
this._initializeShaderFactory(ShaderFactoryClass, layer, layer._index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Array.isArray(spec.order) || spec.order.length < 1) {
|
||||||
|
spec.order = Object.keys(spec.shaders);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._buildSpecification(spec.order, spec);
|
||||||
|
|
||||||
|
if (spec.error) {
|
||||||
|
this.visualisationReady(idx, spec);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.constructor.compileShader(gl, program,
|
||||||
|
spec._built.vertexShader, spec._built.fragmentShader, err, this.debug);
|
||||||
|
this.visualisationReady(idx, spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
static compileShader(gl, program, VS, FS, onError, isDebugMode) {
|
||||||
|
function ok (kind, status, value, sh) {
|
||||||
|
if (!gl['get' + kind + 'Parameter'](value, gl[status + '_STATUS'])) {
|
||||||
|
console.error((sh || 'LINK') + ':\n' + gl['get' + kind + 'InfoLog'](value));
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function useShader(gl, program, data, type) {
|
||||||
|
let shader = gl.createShader(gl[type]);
|
||||||
|
gl.shaderSource(shader, data);
|
||||||
|
gl.compileShader(shader);
|
||||||
|
gl.attachShader(program, shader);
|
||||||
|
program[type] = shader;
|
||||||
|
return ok('Shader', 'COMPILE', shader, type);
|
||||||
|
}
|
||||||
|
|
||||||
|
function numberLines(str) {
|
||||||
|
//https://stackoverflow.com/questions/49714971/how-to-add-line-numbers-to-beginning-of-each-line-in-string-in-javascript
|
||||||
|
return str.split('\n').map((line, index) => `${index + 1} ${line}`).join('\n');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!useShader(gl, program, VS, 'VERTEX_SHADER') ||
|
||||||
|
!useShader(gl, program, FS, 'FRAGMENT_SHADER')) {
|
||||||
|
onError("Unable to use this specification.",
|
||||||
|
"Compilation of shader failed. For more information, see logs in the console.");
|
||||||
|
console.warn("VERTEX SHADER\n", numberLines( VS ));
|
||||||
|
console.warn("FRAGMENT SHADER\n", numberLines( FS ));
|
||||||
|
} else {
|
||||||
|
gl.linkProgram(program);
|
||||||
|
if (!ok('Program', 'LINK', program)) {
|
||||||
|
onError("Unable to use this specification.",
|
||||||
|
"Linking of shader failed. For more information, see logs in the console.");
|
||||||
|
} else { //if (isDebugMode) { //todo testing
|
||||||
|
console.info("FRAGMENT SHADER\n", numberLines( FS ));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ID pattern allowed for module, ID's are used in GLSL
|
||||||
|
* to distinguish uniquely between static generated code parts
|
||||||
|
* @type {RegExp}
|
||||||
|
*/
|
||||||
|
$.WebGLModule.idPattern = /[0-9a-zA-Z_]*/;
|
||||||
|
|
||||||
|
})(OpenSeadragon);
|
||||||
1305
src/webgl/shaderLayer.js
Normal file
1305
src/webgl/shaderLayer.js
Normal file
File diff suppressed because it is too large
Load Diff
391
src/webgl/webGLContext.js
Normal file
391
src/webgl/webGLContext.js
Normal file
@ -0,0 +1,391 @@
|
|||||||
|
(function($) {
|
||||||
|
|
||||||
|
$.WebGLModule.determineContext = function( version ){
|
||||||
|
const namespace = OpenSeadragon.WebGLModule;
|
||||||
|
for (let property in namespace) {
|
||||||
|
const context = namespace[ property ],
|
||||||
|
proto = context.prototype;
|
||||||
|
if( proto &&
|
||||||
|
proto instanceof namespace.WebGLImplementation &&
|
||||||
|
$.isFunction( proto.getVersion ) &&
|
||||||
|
proto.getVersion.call( context ) === version
|
||||||
|
){
|
||||||
|
return context;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @interface OpenSeadragon.WebGLModule.webglContext
|
||||||
|
* Interface for the visualisation rendering implementation which can run
|
||||||
|
* on various GLSL versions
|
||||||
|
*/
|
||||||
|
$.WebGLModule.WebGLImplementation = class {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a WebGL Renderer Context Implementation (version-dependent)
|
||||||
|
* @param {WebGLModule} renderer
|
||||||
|
* @param {WebGLRenderingContextBase} gl
|
||||||
|
* @param webglVersion
|
||||||
|
* @param {object} options
|
||||||
|
* @param {GLuint} options.wrap texture wrap parameteri
|
||||||
|
* @param {GLuint} options.magFilter texture filter parameteri
|
||||||
|
* @param {GLuint} options.minFilter texture filter parameteri
|
||||||
|
* @param {string|WebGLModule.IDataLoader} options.dataLoader class name or implementation of a given loader
|
||||||
|
*/
|
||||||
|
constructor(renderer, gl, webglVersion, options) {
|
||||||
|
//Set default blending to be MASK
|
||||||
|
this.renderer = renderer;
|
||||||
|
this.gl = gl;
|
||||||
|
this.glslBlendCode = "return background * (step(0.001, foreground.a));";
|
||||||
|
|
||||||
|
let Loader = options.dataLoader;
|
||||||
|
if (typeof Loader === "string") {
|
||||||
|
Loader = $.WebGLModule.Loaders[Loader];
|
||||||
|
}
|
||||||
|
if (!Loader) {
|
||||||
|
throw("Unknown data loader: " + options.dataLoader);
|
||||||
|
}
|
||||||
|
if (!(Loader.prototype instanceof $.WebGLModule.IDataLoader)) {
|
||||||
|
throw("Incompatible texture loader used: " + options.dataLoader);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._texture = new Loader(gl, webglVersion, options);
|
||||||
|
if (!this.texture.supportsWebglVersion(this.getVersion())) {
|
||||||
|
throw("Incompatible texture loader version to the renderer context version! Context WebGL" + this.getVersion());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Static context creation (to avoid class instantiation in case of missing support)
|
||||||
|
* @param canvas
|
||||||
|
* @return {WebGLRenderingContextBase} //todo base is not common to all, remove from docs
|
||||||
|
*/
|
||||||
|
static create(canvas) {
|
||||||
|
throw("::create() must be implemented!");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {string} WebGL version used
|
||||||
|
*/
|
||||||
|
getVersion() {
|
||||||
|
return "undefined";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get GLSL texture sampling code
|
||||||
|
* @return {string} GLSL code that is correct in texture sampling wrt. WebGL version used
|
||||||
|
*/
|
||||||
|
get texture() {
|
||||||
|
return this._texture;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a visualisation from the given JSON params
|
||||||
|
* @param {string[]} order keys of visualisation.shader in which order to build the visualization
|
||||||
|
* the order: painter's algorithm: the last drawn is the most visible
|
||||||
|
* @param {object} visualisation
|
||||||
|
* @param {[number]} shaderDataIndexToGlobalDataIndex
|
||||||
|
* @param {boolean} withHtml whether html should be also created (false if no UI controls are desired)
|
||||||
|
* @return {object} compiled specification object ready to be used by the wrapper, with the following keys:
|
||||||
|
{string} object.vertexShader vertex shader code
|
||||||
|
{string} object.fragmentShader fragment shader code
|
||||||
|
{string} object.html html for the UI
|
||||||
|
{number} object.usableShaders how many layers are going to be visualised
|
||||||
|
{(array|string[])} object.dataUrls ID's of data in use (keys of visualisation.shaders object) in desired order
|
||||||
|
the data is guaranteed to arrive in this order (images stacked below each other in imageElement)
|
||||||
|
*/
|
||||||
|
compileSpecification(order, visualisation, shaderDataIndexToGlobalDataIndex, withHtml) {
|
||||||
|
throw("::compileSpecification() must be implemented!");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called once program is switched to: initialize all necessary items
|
||||||
|
* @param {WebGLProgram} program used program
|
||||||
|
* @param {OpenSeadragon.WebGLModule.RenderingConfig} currentConfig JSON parameters used for this visualisation
|
||||||
|
*/
|
||||||
|
programLoaded(program, currentConfig) {
|
||||||
|
throw("::programLoaded() must be implemented!");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Draw on the canvas using given program
|
||||||
|
* @param {WebGLProgram} program used program
|
||||||
|
* @param {OpenSeadragon.WebGLModule.RenderingConfig} currentConfig JSON parameters used for this visualisation
|
||||||
|
*
|
||||||
|
* @param {string} id dataId
|
||||||
|
* @param {object} tileOpts
|
||||||
|
* @param {number} tileOpts.zoom value passed to the shaders as zoom_level
|
||||||
|
* @param {number} tileOpts.pixelSize value passed to the shaders as pixel_size_in_fragments
|
||||||
|
* @param {OpenSeadragon.Mat3} tileOpts.transform position of the rendered tile
|
||||||
|
*/
|
||||||
|
programUsed(program, currentConfig, id, tileOpts) {
|
||||||
|
throw("::programUsed() must be implemented!");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Code to be included only once, required by given shader type (keys are considered global)
|
||||||
|
* @param {string} type shader type
|
||||||
|
* @returns {object} global-scope code used by the shader in <key: code> format
|
||||||
|
*/
|
||||||
|
globalCodeRequiredByShaderType(type) {
|
||||||
|
return $.WebGLModule.ShaderMediator.getClass(type).__globalIncludes;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Blend equation sent from the outside, must be respected
|
||||||
|
* @param glslCode code for blending, using two variables: 'foreground', 'background'
|
||||||
|
* @example
|
||||||
|
* //The shader context must define the following:
|
||||||
|
*
|
||||||
|
* vec4 some_blending_name_etc(in vec4 background, in vec4 foreground) {
|
||||||
|
* // << glslCode >>
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* void blend_clip(vec4 input) {
|
||||||
|
* //for details on clipping mask approach see show() below
|
||||||
|
* // <<use some_blending_name_etc() to blend input onto output color of the shader using a clipping mask>>
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* void blend(vec4 input) { //must be called blend, API
|
||||||
|
* // <<use some_blending_name_etc() to blend input onto output color of the shader>>
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* //Also, default alpha blending equation 'show' must be implemented:
|
||||||
|
* void show(vec4 color) {
|
||||||
|
* //pseudocode
|
||||||
|
* //note that the blending output should not immediatelly work with 'color' but perform caching of the color,
|
||||||
|
* //render the color given in previous call and at the execution end of main call show(vec4(.0))
|
||||||
|
* //this way, the previous color is not yet blended for the next layer show/blend/blend_clip which can use it to create a clipping mask
|
||||||
|
*
|
||||||
|
* compute t = color.a + background.a - color.a*background.a;
|
||||||
|
* output vec4((color.rgb * color.a + background.rgb * background.a - background.rgb * (background.a * color.a)) / t, t)
|
||||||
|
* }
|
||||||
|
*/
|
||||||
|
setBlendEquation(glslCode) {
|
||||||
|
this.glslBlendCode = glslCode;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.WebGLModule.WebGL20 = class extends $.WebGLModule.WebGLImplementation {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {OpenSeadragon.WebGLModule} renderer
|
||||||
|
* @param {WebGL2RenderingContext} gl
|
||||||
|
* @param options
|
||||||
|
*/
|
||||||
|
constructor(renderer, gl, options) {
|
||||||
|
super(renderer, gl, "2.0", options);
|
||||||
|
this.emptyBuffer = gl.createBuffer();
|
||||||
|
}
|
||||||
|
|
||||||
|
getVersion() {
|
||||||
|
return "2.0";
|
||||||
|
}
|
||||||
|
|
||||||
|
static create(canvas) {
|
||||||
|
return canvas.getContext('webgl2', { premultipliedAlpha: false, alpha: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
//todo try to implement on the global scope version-independntly
|
||||||
|
compileSpecification(order, visualisation, shaderDataIndexToGlobalDataIndex, withHtml) {
|
||||||
|
var definition = "",
|
||||||
|
execution = "",
|
||||||
|
html = "",
|
||||||
|
_this = this,
|
||||||
|
usableShaders = 0,
|
||||||
|
globalScopeCode = {};
|
||||||
|
|
||||||
|
order.forEach(dataId => {
|
||||||
|
let layer = visualisation.shaders[dataId];
|
||||||
|
layer.rendering = false;
|
||||||
|
|
||||||
|
if (layer.type === "none") {
|
||||||
|
//prevents the layer from being accounted for
|
||||||
|
layer.error = "Not an error - layer type none.";
|
||||||
|
} else if (layer.error) {
|
||||||
|
if (withHtml) {
|
||||||
|
html = _this.renderer.htmlShaderPartHeader(layer.name, layer.error, dataId, false, layer, false) + html;
|
||||||
|
}
|
||||||
|
console.warn(layer.error, layer["desc"]);
|
||||||
|
|
||||||
|
} else if (layer._renderContext && (layer._index || layer._index === 0)) {
|
||||||
|
let visible = false;
|
||||||
|
usableShaders++;
|
||||||
|
|
||||||
|
//make visible textures if 'visible' flag set
|
||||||
|
if (layer.visible) {
|
||||||
|
let renderCtx = layer._renderContext;
|
||||||
|
definition += renderCtx.getFragmentShaderDefinition() + `
|
||||||
|
vec4 lid_${layer._index}_xo() {
|
||||||
|
${renderCtx.getFragmentShaderExecution()}
|
||||||
|
}`;
|
||||||
|
if (renderCtx.opacity) {
|
||||||
|
execution += `
|
||||||
|
vec4 l${layer._index}_out = lid_${layer._index}_xo();
|
||||||
|
l${layer._index}_out.a *= ${renderCtx.opacity.sample()};
|
||||||
|
${renderCtx.__mode}(l${layer._index}_out);`;
|
||||||
|
} else {
|
||||||
|
execution += `
|
||||||
|
${renderCtx.__mode}(lid_${layer._index}_xo());`;
|
||||||
|
}
|
||||||
|
|
||||||
|
layer.rendering = true;
|
||||||
|
visible = true;
|
||||||
|
OpenSeadragon.extend(globalScopeCode, _this.globalCodeRequiredByShaderType(layer.type));
|
||||||
|
}
|
||||||
|
|
||||||
|
//reverse order append to show first the last drawn element (top)
|
||||||
|
if (withHtml) {
|
||||||
|
html = _this.renderer.htmlShaderPartHeader(layer.name,
|
||||||
|
layer._renderContext.htmlControls(), dataId, visible, layer, true) + html;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (withHtml) {
|
||||||
|
html = _this.renderer.htmlShaderPartHeader(layer.name,
|
||||||
|
`The requested visualisation type does not work properly.`, dataId, false, layer, false) + html;
|
||||||
|
}
|
||||||
|
console.warn("Invalid shader part.", "Missing one of the required elements.", layer);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
vertexShader: this.getVertexShader(),
|
||||||
|
fragmentShader: this.getFragmentShader(definition, execution, shaderDataIndexToGlobalDataIndex, globalScopeCode),
|
||||||
|
html: html,
|
||||||
|
usableShaders: usableShaders,
|
||||||
|
dataUrls: this.renderer._dataSources
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getFragmentShader(definition, execution, shaderDataIndexToGlobalDataIndex, globalScopeCode) {
|
||||||
|
return `#version 300 es
|
||||||
|
precision mediump float;
|
||||||
|
precision mediump sampler2DArray;
|
||||||
|
|
||||||
|
${this.texture.declare(shaderDataIndexToGlobalDataIndex)}
|
||||||
|
uniform float pixel_size_in_fragments;
|
||||||
|
uniform float zoom_level;
|
||||||
|
uniform vec2 u_tile_size;
|
||||||
|
vec4 _last_rendered_color = vec4(.0);
|
||||||
|
|
||||||
|
in vec2 tile_texture_coords;
|
||||||
|
|
||||||
|
out vec4 final_color;
|
||||||
|
|
||||||
|
bool close(float value, float target) {
|
||||||
|
return abs(target - value) < 0.001;
|
||||||
|
}
|
||||||
|
|
||||||
|
void show(vec4 color) {
|
||||||
|
//premultiplied alpha blending
|
||||||
|
vec4 fg = _last_rendered_color;
|
||||||
|
_last_rendered_color = color;
|
||||||
|
vec4 pre_fg = vec4(fg.rgb * fg.a, fg.a);
|
||||||
|
final_color = pre_fg + final_color * (1.0-fg.a);
|
||||||
|
}
|
||||||
|
|
||||||
|
void finalize() {
|
||||||
|
show(vec4(.0));
|
||||||
|
|
||||||
|
if (close(final_color.a, 0.0)) {
|
||||||
|
final_color = vec4(0.);
|
||||||
|
} else {
|
||||||
|
final_color = vec4(final_color.rgb/final_color.a, final_color.a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
vec4 blend_equation(in vec4 foreground, in vec4 background) {
|
||||||
|
${this.glslBlendCode}
|
||||||
|
}
|
||||||
|
|
||||||
|
void blend_clip(vec4 foreground) {
|
||||||
|
_last_rendered_color = blend_equation(foreground, _last_rendered_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
void blend(vec4 foreground) {
|
||||||
|
show(_last_rendered_color);
|
||||||
|
final_color = blend_equation(foreground, final_color);
|
||||||
|
_last_rendered_color = vec4(.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
${Object.values(globalScopeCode).join("\n")}
|
||||||
|
|
||||||
|
${definition}
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
${execution}
|
||||||
|
|
||||||
|
finalize();
|
||||||
|
}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
getVertexShader() {
|
||||||
|
//UNPACK_FLIP_Y_WEBGL not supported with 3D textures so sample bottom up
|
||||||
|
return `#version 300 es
|
||||||
|
precision mediump float;
|
||||||
|
|
||||||
|
uniform mat3 transform_matrix;
|
||||||
|
out vec2 tile_texture_coords;
|
||||||
|
const vec3 quad[4] = vec3[4] (
|
||||||
|
vec3(0.0, 1.0, 1.0),
|
||||||
|
vec3(0.0, 0.0, 1.0),
|
||||||
|
vec3(1.0, 1.0, 1.0),
|
||||||
|
vec3(1.0, 0.0, 1.0)
|
||||||
|
);
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
vec3 vertex = quad[gl_VertexID];
|
||||||
|
tile_texture_coords = vec2(vertex.x, -vertex.y);
|
||||||
|
gl_Position = vec4(transform_matrix * vertex, 1);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
programLoaded(program, currentConfig) {
|
||||||
|
if (!this.renderer.running) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let context = this.renderer,
|
||||||
|
gl = this.gl;
|
||||||
|
|
||||||
|
// Allow for custom loading
|
||||||
|
gl.useProgram(program);
|
||||||
|
context.visualisationInUse(currentConfig);
|
||||||
|
context.glLoaded(gl, program, currentConfig);
|
||||||
|
|
||||||
|
//Note that the drawing strategy is not to resize canvas, and simply draw everyhing on squares
|
||||||
|
this.texture.programLoaded(context, gl, program, currentConfig);
|
||||||
|
|
||||||
|
//Empty ARRAY: get the vertices directly from the shader
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.emptyBuffer);
|
||||||
|
}
|
||||||
|
|
||||||
|
programUsed(program, currentConfig, id, tileOpts) {
|
||||||
|
if (!this.renderer.running) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Allow for custom drawing in webGL and possibly avoid using webGL at all
|
||||||
|
|
||||||
|
let context = this.renderer,
|
||||||
|
gl = this.gl;
|
||||||
|
|
||||||
|
context.glDrawing(gl, program, currentConfig, tileOpts);
|
||||||
|
|
||||||
|
// Set Attributes for GLSL
|
||||||
|
gl.uniform1f(gl.getUniformLocation(program, "pixel_size_in_fragments"), tileOpts.pixelSize || 1);
|
||||||
|
gl.uniform1f(gl.getUniformLocation(program, "zoom_level"), tileOpts.zoom || 1);
|
||||||
|
gl.uniformMatrix3fv(gl.getUniformLocation(program, "transform_matrix"), false,
|
||||||
|
tileOpts.transform || OpenSeadragon.Mat3.makeIdentity());
|
||||||
|
|
||||||
|
// Upload textures
|
||||||
|
this.texture.programUsed(context, currentConfig, id, program, gl);
|
||||||
|
|
||||||
|
// Draw triangle strip (two triangles) from a static array defined in the vertex shader
|
||||||
|
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
})(OpenSeadragon);
|
||||||
Loading…
Reference in New Issue
Block a user