From b3a3f2f19985f57b8063004976c2f8b94f234615 Mon Sep 17 00:00:00 2001 From: Benjamin MICHEL Date: Thu, 13 Dec 2018 15:10:16 +0100 Subject: [PATCH 1/3] Optimization of picking by drawing only one pixel --- Xbim.WeXplorer/Viewer/viewer.js | 35 ++++++++++++++++++++++----------- Xbim.WeXplorer/Viewer/viewer.ts | 27 +++++++++++++++++-------- 2 files changed, 42 insertions(+), 20 deletions(-) diff --git a/Xbim.WeXplorer/Viewer/viewer.js b/Xbim.WeXplorer/Viewer/viewer.js index 16cc08670..ad9956c56 100644 --- a/Xbim.WeXplorer/Viewer/viewer.js +++ b/Xbim.WeXplorer/Viewer/viewer.js @@ -858,6 +858,8 @@ var Viewer = /** @class */ (function () { var button = 'L'; var id = -1; var modelId = -1; + viewer.lastMouseX = lastMouseX; + viewer.lastMouseY = lastMouseY; //set initial conditions so that different gestures can be identified var handleMouseDown = function (event) { mouseDown = true; @@ -931,18 +933,20 @@ var Viewer = /** @class */ (function () { viewer.enableTextSelection(); }; var handleMouseMove = function (event) { - if (!mouseDown) { - return; - } - if (viewer.navigationMode === 'none') { - return; - } var newX = event.clientX; var newY = event.clientY; var deltaX = newX - lastMouseX; var deltaY = newY - lastMouseY; lastMouseX = newX; lastMouseY = newY; + viewer.lastMouseX = lastMouseX; + viewer.lastMouseY = lastMouseY; + if (!mouseDown) { + return; + } + if (viewer.navigationMode === 'none') { + return; + } if (button === 'left') { switch (viewer.navigationMode) { case 'free-orbit': @@ -1471,12 +1475,12 @@ var Viewer = /** @class */ (function () { plugin.onBeforeDrawId(); }); //it is not necessary to render the image in full resolution so this factor is used for less resolution. - var factor = 2; + var factor = 8; var gl = this.gl; var width = this._width / factor; var height = this._height / factor; - x = x / factor; - y = y / factor; + var xRatio = (x / this._width); + var yRatio = (y / this._height); //create framebuffer var frameBuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer); @@ -1484,16 +1488,20 @@ var Viewer = /** @class */ (function () { var renderBuffer = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuffer); // allocate renderbuffer - gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height); + gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, 1, 1); var texture = gl.createTexture(); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); // Set the parameters so we can render any image size. 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); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + var pickingPMatrix = mat4_1.mat4.copy(mat4_1.mat4.create(), this._pMatrix); + pickingPMatrix[2 * 4] = xRatio * 2.0; + pickingPMatrix[(2 * 4) + 1] = yRatio * 2.0; + gl.uniformMatrix4fv(this._pMatrixUniformPointer, false, pickingPMatrix); // attach renderbuffer and texture gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderBuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); @@ -1504,6 +1512,8 @@ var Viewer = /** @class */ (function () { gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer); gl.viewport(0, 0, width, height); gl.enable(gl.DEPTH_TEST); //we don't use any kind of blending or transparency + gl.enable(gl.SCISSOR_TEST); + gl.scissor(0, 0, 1, 1); gl.disable(gl.BLEND); gl.clearColor(0, 0, 0, 0); //zero colour for no-values gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); @@ -1528,7 +1538,7 @@ var Viewer = /** @class */ (function () { }); //get colour in of the pixel var result = new Uint8Array(4); - gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, result); + gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, result); //reset framebuffer to render into canvas again gl.bindFramebuffer(gl.FRAMEBUFFER, null); //free GPU memory @@ -1538,6 +1548,7 @@ var Viewer = /** @class */ (function () { //set back blending gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.enable(gl.BLEND); + gl.disable(gl.SCISSOR_TEST); //decode ID (bit shifting by multiplication) var hasValue = result[3] != 0; //0 transparency is only for no-values if (hasValue) { diff --git a/Xbim.WeXplorer/Viewer/viewer.ts b/Xbim.WeXplorer/Viewer/viewer.ts index 50681c2c2..1ba2791d6 100644 --- a/Xbim.WeXplorer/Viewer/viewer.ts +++ b/Xbim.WeXplorer/Viewer/viewer.ts @@ -1736,12 +1736,14 @@ export class Viewer { }); //it is not necessary to render the image in full resolution so this factor is used for less resolution. - var factor = 2; + var factor = 8; var gl = this.gl; - var width = this._width / factor; - var height = this._height / factor; - x = x / factor; - y = y / factor; + + var width = this._renderWidth / factor; + var height = this._renderHeight / factor; + + var xRatio = (x / this._width); + var yRatio = (y / this._height); //create framebuffer var frameBuffer = gl.createFramebuffer(); @@ -1751,18 +1753,24 @@ export class Viewer { var renderBuffer = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuffer); // allocate renderbuffer - gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height); + gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, 1, 1); var texture = gl.createTexture(); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); // Set the parameters so we can render any image size. 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); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + const pickingPMatrix = mat4.copy(mat4.create(), this._pMatrix) + + pickingPMatrix[2 * 4] = xRatio * 2.0; + pickingPMatrix[(2 * 4) + 1] = yRatio * 2.0; + + gl.uniformMatrix4fv(this._pMatrixUniformPointer, false, pickingPMatrix); // attach renderbuffer and texture gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderBuffer); @@ -1777,6 +1785,8 @@ export class Viewer { gl.viewport(0, 0, width, height); gl.enable(gl.DEPTH_TEST); //we don't use any kind of blending or transparency + gl.enable(gl.SCISSOR_TEST); + gl.scissor(0, 0, 1, 1); gl.disable(gl.BLEND); gl.clearColor(0, 0, 0, 0); //zero colour for no-values gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); @@ -1805,7 +1815,7 @@ export class Viewer { //get colour in of the pixel var result = new Uint8Array(4); - gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, result); + gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, result); //reset framebuffer to render into canvas again @@ -1819,6 +1829,7 @@ export class Viewer { //set back blending gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.enable(gl.BLEND); + gl.disable(gl.SCISSOR_TEST); //decode ID (bit shifting by multiplication) var hasValue = result[3] != 0; //0 transparency is only for no-values From a13bb8024e6d9d1c4a3f241ad792b3299d0e08bd Mon Sep 17 00:00:00 2001 From: Benjamin MICHEL Date: Thu, 13 Dec 2018 15:31:20 +0100 Subject: [PATCH 2/3] Fixed viewer.js --- Xbim.WeXplorer/Viewer/viewer.js | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/Xbim.WeXplorer/Viewer/viewer.js b/Xbim.WeXplorer/Viewer/viewer.js index ad9956c56..d53627f58 100644 --- a/Xbim.WeXplorer/Viewer/viewer.js +++ b/Xbim.WeXplorer/Viewer/viewer.js @@ -858,8 +858,6 @@ var Viewer = /** @class */ (function () { var button = 'L'; var id = -1; var modelId = -1; - viewer.lastMouseX = lastMouseX; - viewer.lastMouseY = lastMouseY; //set initial conditions so that different gestures can be identified var handleMouseDown = function (event) { mouseDown = true; @@ -933,20 +931,18 @@ var Viewer = /** @class */ (function () { viewer.enableTextSelection(); }; var handleMouseMove = function (event) { - var newX = event.clientX; - var newY = event.clientY; - var deltaX = newX - lastMouseX; - var deltaY = newY - lastMouseY; - lastMouseX = newX; - lastMouseY = newY; - viewer.lastMouseX = lastMouseX; - viewer.lastMouseY = lastMouseY; if (!mouseDown) { return; } if (viewer.navigationMode === 'none') { return; } + var newX = event.clientX; + var newY = event.clientY; + var deltaX = newX - lastMouseX; + var deltaY = newY - lastMouseY; + lastMouseX = newX; + lastMouseY = newY; if (button === 'left') { switch (viewer.navigationMode) { case 'free-orbit': @@ -1477,8 +1473,8 @@ var Viewer = /** @class */ (function () { //it is not necessary to render the image in full resolution so this factor is used for less resolution. var factor = 8; var gl = this.gl; - var width = this._width / factor; - var height = this._height / factor; + var width = this._renderWidth / factor; + var height = this._renderHeight / factor; var xRatio = (x / this._width); var yRatio = (y / this._height); //create framebuffer From b53f9d9dd4c7246ba555bc3a31e437bf94d4d21e Mon Sep 17 00:00:00 2001 From: Benjamin MICHEL Date: Thu, 13 Dec 2018 15:32:34 +0100 Subject: [PATCH 3/3] Using _width and _height instead of _renderWidth and _renderHeight --- Xbim.WeXplorer/Viewer/viewer.js | 4 ++-- Xbim.WeXplorer/Viewer/viewer.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Xbim.WeXplorer/Viewer/viewer.js b/Xbim.WeXplorer/Viewer/viewer.js index d53627f58..4e3faa419 100644 --- a/Xbim.WeXplorer/Viewer/viewer.js +++ b/Xbim.WeXplorer/Viewer/viewer.js @@ -1473,8 +1473,8 @@ var Viewer = /** @class */ (function () { //it is not necessary to render the image in full resolution so this factor is used for less resolution. var factor = 8; var gl = this.gl; - var width = this._renderWidth / factor; - var height = this._renderHeight / factor; + var width = this._width / factor; + var height = this._height / factor; var xRatio = (x / this._width); var yRatio = (y / this._height); //create framebuffer diff --git a/Xbim.WeXplorer/Viewer/viewer.ts b/Xbim.WeXplorer/Viewer/viewer.ts index 1ba2791d6..aa0e5ad78 100644 --- a/Xbim.WeXplorer/Viewer/viewer.ts +++ b/Xbim.WeXplorer/Viewer/viewer.ts @@ -1739,8 +1739,8 @@ export class Viewer { var factor = 8; var gl = this.gl; - var width = this._renderWidth / factor; - var height = this._renderHeight / factor; + var width = this._width / factor; + var height = this._height / factor; var xRatio = (x / this._width); var yRatio = (y / this._height);