diff --git a/src/webgl/drawer.js b/src/webgl/drawer.js
index 3b20f8ea..cc461ed8 100644
--- a/src/webgl/drawer.js
+++ b/src/webgl/drawer.js
@@ -114,6 +114,30 @@ $.WebGL = class WebGL extends OpenSeadragon.DrawerBase {
engine.init(size.x, size.y);
this.viewer.addHandler("resize", this._resizeRenderer.bind(this));
this.renderer = engine;
+ this.renderer.setDataBlendingEnabled(true);
+
+ // const gl = this.renderer.gl;
+ // this._renderToTexture = gl.createTexture();
+ // gl.activeTexture(gl.TEXTURE0);
+ // gl.bindTexture(gl.TEXTURE_2D, this._renderToTexture);
+ // gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size.x, size.y, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+ // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+ // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+ // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+ //
+ // // set up the framebuffer for render-to-texture
+ // this._glFrameBuffer = gl.createFramebuffer();
+ // gl.bindFramebuffer(gl.FRAMEBUFFER, this._glFrameBuffer);
+ // gl.framebufferTexture2D(
+ // gl.FRAMEBUFFER,
+ // gl.COLOR_ATTACHMENT0, // attach texture as COLOR_ATTACHMENT0
+ // gl.TEXTURE_2D, // attach a 2D texture
+ // this._renderToTexture, // the texture to attach
+ // 0
+ // );
+ // gl.bindFramebuffer(gl.FRAMEBUFFER, this._glFrameBuffer);
+ // gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._renderToTexture, 0);
+
return engine.canvas;
}
@@ -136,23 +160,19 @@ $.WebGL = class WebGL extends OpenSeadragon.DrawerBase {
let rotMatrix = $.Mat3.makeRotation(-viewport.rotation);
let viewMatrix = scaleMatrix.multiply(rotMatrix).multiply(posMatrix);
- this.renderer.clear();
- this.renderer.setDataBlendingEnabled(false);
+ // const gl = this.renderer.gl;
+ // gl.bindFramebuffer(gl.FRAMEBUFFER, this._glFrameBuffer);
+ // clear the buffer to draw a new image
+ // gl.clear(gl.COLOR_BUFFER_BIT);
//iterate over tiled images and draw each one using a two-pass rendering pipeline if needed
-
- let drawn = 0;
-
for (const tiledImage of tiledImages) {
+ console.log("START TILED IMAGE");
let tilesToDraw = tiledImage.getTilesToDraw();
- if (tilesToDraw.length === 0) {
- break;
- }
-
- if (drawn === 1) {
- this.renderer.setDataBlendingEnabled(true);
- }
+ // if (tilesToDraw.length === 0) {
+ // break;
+ // }
let overallMatrix = viewMatrix;
let imageRotation = tiledImage.getRotation(true);
@@ -168,12 +188,15 @@ $.WebGL = class WebGL extends OpenSeadragon.DrawerBase {
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;
+
+ console.log("TILE " + tile.level + "-" + tile.x + "_" + tile.y);
+
const matrix = this._getTileMatrix(tile, tiledImage, overallMatrix);
shader.opacity.set(tile.opacity * tiledImage.opacity);
@@ -205,8 +228,6 @@ $.WebGL = class WebGL extends OpenSeadragon.DrawerBase {
tiles: tilesToDraw.map(info => info.tile),
});
}
-
- drawn++;
}
}
diff --git a/src/webgl/renderer.js b/src/webgl/renderer.js
index 33654dc3..7be24859 100644
--- a/src/webgl/renderer.js
+++ b/src/webgl/renderer.js
@@ -144,7 +144,7 @@ $.WebGLModule = class extends $.EventSource {
const options = {
wrap: readGlProp("wrap", "MIRRORED_REPEAT"),
magFilter: readGlProp("magFilter", "LINEAR"),
- minFilter: readGlProp("minFilter", "NEAREST"),
+ minFilter: readGlProp("minFilter", "LINEAR"),
dataLoader: contextOpts.dataLoader || "TEXTURE_2D"
};
this.webglContext = new Context(this, glContext, options);
@@ -592,9 +592,11 @@ $.WebGLModule = class extends $.EventSource {
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);
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);
+ this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
} else {
this.gl.disable(this.gl.BLEND);
}
diff --git a/src/webgl/webGLContext.js b/src/webgl/webGLContext.js
index 72e3e5ad..8056836c 100644
--- a/src/webgl/webGLContext.js
+++ b/src/webgl/webGLContext.js
@@ -185,7 +185,7 @@ $.WebGLModule.WebGL20 = class extends $.WebGLModule.WebGLImplementation {
}
static create(canvas) {
- return canvas.getContext('webgl2', { premultipliedAlpha: false, alpha: true });
+ return canvas.getContext('webgl2', { premultipliedAlpha: true, alpha: true });
}
//todo try to implement on the global scope version-independntly
@@ -263,6 +263,7 @@ vec4 lid_${layer._index}_xo() {
return `#version 300 es
precision mediump float;
precision mediump sampler2DArray;
+precision mediump sampler2D;
${this.texture.declare(shaderDataIndexToGlobalDataIndex)}
uniform float pixel_size_in_fragments;
@@ -283,17 +284,7 @@ void show(vec4 color) {
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);
- }
+ final_color = pre_fg + final_color;
}
vec4 blend_equation(in vec4 foreground, in vec4 background) {
@@ -317,7 +308,8 @@ ${definition}
void main() {
${execution}
- finalize();
+ //blend last level
+ show(vec4(.0));
}`;
}
diff --git a/test/demo/basic.html b/test/demo/basic.html
index 6a677420..5f4262ab 100644
--- a/test/demo/basic.html
+++ b/test/demo/basic.html
@@ -20,12 +20,23 @@
diff --git a/test/demo/drawercomparison.html b/test/demo/drawercomparison.html
index 3e007419..d40c8ef8 100644
--- a/test/demo/drawercomparison.html
+++ b/test/demo/drawercomparison.html
@@ -65,12 +65,12 @@