From 5e3193bf54ff003ad1698ad2b4aa59bc1f50d27b Mon Sep 17 00:00:00 2001 From: Vladimir Mandic Date: Mon, 2 Nov 2020 12:21:30 -0500 Subject: [PATCH] minor optimization to imagefx --- README.md | 4 ++-- src/human.js | 13 +++++++------ src/imagefx.js | 26 ++++++++++++-------------- 3 files changed, 21 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 5b0494ec..df4a1b13 100644 --- a/README.md +++ b/README.md @@ -407,8 +407,8 @@ result = { } ], performance = { // performance data of last execution for each module measuredin miliseconds - backend, // time to initialize tf backend - load, // time to load models + backend, // time to initialize tf backend, valid only during backend startup + load, // time to load models, valid only during model load image, // time for image processing body, // model time hand, // model time diff --git a/src/human.js b/src/human.js index c3cd16e6..adbbcac3 100644 --- a/src/human.js +++ b/src/human.js @@ -172,8 +172,8 @@ class Human { if (this.config.filter.height > 0) targetHeight = this.config.filter.height; else if (this.config.filter.width > 0) targetHeight = originalHeight * (this.config.filter.width / originalWidth); const offscreenCanvas = (typeof OffscreenCanvas !== 'undefined') ? new OffscreenCanvas(targetWidth, targetHeight) : document.createElement('canvas'); - offscreenCanvas.width = targetWidth; - offscreenCanvas.height = targetHeight; + if (offscreenCanvas.width !== targetWidth) offscreenCanvas.width = targetWidth; + if (offscreenCanvas.height !== targetHeight) offscreenCanvas.height = targetHeight; const ctx = offscreenCanvas.getContext('2d'); if (input instanceof ImageData) ctx.putImageData(input, 0, 0); else ctx.drawImage(input, 0, 0, originalWidth, originalHeight, 0, 0, offscreenCanvas.width, offscreenCanvas.height); @@ -200,10 +200,11 @@ class Human { } else { const canvas = filtered || input; let pixels; - // tf kernel-optimized method to get imagedata, also if input is imagedata, just use it - if ((this.config.backend === 'webgl') || (canvas instanceof ImageData)) pixels = tf.browser.fromPixels(canvas); - // cpu and wasm kernel does not implement efficient fromPixels method nor we can use canvas as-is, so we do a silly one more canvas - else { + if ((this.config.backend === 'webgl') || (canvas instanceof ImageData)) { + // tf kernel-optimized method to get imagedata, also if input is imagedata, just use it + pixels = tf.browser.fromPixels(canvas); + } else { + // cpu and wasm kernel does not implement efficient fromPixels method nor we can use canvas as-is, so we do a silly one more canvas const tempCanvas = (typeof OffscreenCanvas !== 'undefined') ? new OffscreenCanvas(targetWidth, targetHeight) : document.createElement('canvas'); tempCanvas.width = targetWidth; tempCanvas.height = targetHeight; diff --git a/src/imagefx.js b/src/imagefx.js index 7ec025bd..5fae2b8d 100644 --- a/src/imagefx.js +++ b/src/imagefx.js @@ -1,13 +1,8 @@ -/* eslint-disable no-shadow */ -/* eslint-disable prefer-rest-params */ -/* eslint-disable no-sequences */ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-unused-expressions */ -/* eslint-disable no-multi-assign */ /* eslint-disable no-use-before-define */ /* WebGLImageFilter - MIT Licensed 2013, Dominic Szablewski - phoboslab.org + */ const WebGLProgram = function (gl, vertexSource, fragmentSource) { @@ -19,7 +14,7 @@ const WebGLProgram = function (gl, vertexSource, fragmentSource) { }); }; - const _compile = function (gl, source, type) { + const _compile = function (source, type) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); @@ -33,8 +28,8 @@ const WebGLProgram = function (gl, vertexSource, fragmentSource) { this.uniform = {}; this.attribute = {}; - const _vsh = _compile(gl, vertexSource, gl.VERTEX_SHADER); - const _fsh = _compile(gl, fragmentSource, gl.FRAGMENT_SHADER); + const _vsh = _compile(vertexSource, gl.VERTEX_SHADER); + const _fsh = _compile(fragmentSource, gl.FRAGMENT_SHADER); this.id = gl.createProgram(); gl.attachShader(this.id, _vsh); @@ -82,6 +77,7 @@ const WebGLImageFilter = function (params) { if (!gl) throw new Error('Filter: getContext() failed'); this.addFilter = function (name) { + // eslint-disable-next-line prefer-rest-params const args = Array.prototype.slice.call(arguments, 1); const filter = _filter[name]; @@ -107,7 +103,7 @@ const WebGLImageFilter = function (params) { // No filters? Just draw if (_filterChain.length === 0) { - const program = _compileShader(SHADER.FRAGMENT_IDENTITY); + // const program = _compileShader(SHADER.FRAGMENT_IDENTITY); _draw(); return _canvas; } @@ -125,8 +121,10 @@ const WebGLImageFilter = function (params) { // Same width/height? Nothing to do here if (width === _width && height === _height) { return; } - _canvas.width = _width = width; - _canvas.height = _height = height; + _canvas.width = width; + _width = width; + _canvas.height = height; + _height = height; // Create the context if we don't have it yet if (!_vertexBuffer) { @@ -135,8 +133,8 @@ const WebGLImageFilter = function (params) { -1, -1, 0, 1, 1, -1, 1, 1, -1, 1, 0, 0, -1, 1, 0, 0, 1, -1, 1, 1, 1, 1, 1, 0, ]); - _vertexBuffer = gl.createBuffer(), - gl.bindBuffer(gl.ARRAY_BUFFER, _vertexBuffer); + // eslint-disable-next-line no-unused-expressions + (_vertexBuffer = gl.createBuffer(), gl.bindBuffer(gl.ARRAY_BUFFER, _vertexBuffer)); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // Note sure if this is a good idea; at least it makes texture loading