Merge pull request #15371 from Wenzhao-Xiang:gsoc_2019

[GSoC 2019] Improve the performance of JavaScript version of OpenCV (OpenCV.js)

* [GSoC 2019]

Improve the performance of JavaScript version of OpenCV (OpenCV.js):
1. Create the base of OpenCV.js performance test:
     This perf test is based on benchmark.js(https://benchmarkjs.com). And first add `cvtColor`, `Resize`, `Threshold` into it.
2. Optimize the OpenCV.js performance by WASM threads:
     This optimization is based on Web Worker API and SharedArrayBuffer, so it can be only used in browser.
3. Optimize the OpenCV.js performance by WASM SIMD:
     Add WASM SIMD backend for OpenCV Universal Intrinsics. It's experimental as WASM SIMD is still in development.

* [GSoC2019] 

1. use short license header
2. fix documentation node issue
3. remove the unused `hasSIMD128()` api

* [GSoC2019]

1. fix emscripten define
2. use fallback function for f16

* [GSoC2019]

Fix rebase issue

doc/js_tutorials/js_setup/js_setup/js_setup.markdown

@@ -107,6 +107,90 @@ Building OpenCV.js from Source
     @note
     It requires `node` installed in your development environment.
 
+-#  [optional] To build `opencv.js` with threads optimization, append `--threads` option.
+
+    For example:
+    @code{.bash}
+    python ./platforms/js/build_js.py build_js --build_wasm --threads
+    @endcode
+
+    The default threads number is the logic core number of your device. You can use `cv.parallel_pthreads_set_threads_num(number)` to set threads number by yourself and use `cv.parallel_pthreads_get_threads_num()` to get the current threads number.
+
+    @note
+    You should build wasm version of `opencv.js` if you want to enable this optimization. And the threads optimization only works in browser, not in node.js. You need to enable the `WebAssembly threads support` feature first with your browser. For example, if you use Chrome, please enable this flag in chrome://flags.
+
+-#  [optional] To build `opencv.js` with wasm simd optimization, append `--simd` option.
+
+    For example:
+    @code{.bash}
+    python ./platforms/js/build_js.py build_js --build_wasm --simd
+    @endcode
+
+    The simd optimization is experimental as wasm simd is still in development.
+
+    @note
+    Now only emscripten LLVM upstream backend supports wasm simd, refering to https://emscripten.org/docs/porting/simd.html. So you need to setup upstream backend environment with the following command first:
+    @code{.bash}
+    ./emsdk update
+    ./emsdk install latest-upstream
+    ./emsdk activate latest-upstream
+    source ./emsdk_env.sh
+    @endcode
+
+    @note
+    You should build wasm version of `opencv.js` if you want to enable this optimization. For browser, you need to enable the `WebAssembly SIMD support` feature first. For example, if you use Chrome, please enable this flag in chrome://flags. For Node.js, you need to run script with flag `--experimental-wasm-simd`.
+
+    @note
+    The simd version of `opencv.js` built by latest LLVM upstream may not work with the stable browser or old version of Node.js. Please use the latest version of unstable browser or Node.js to get new features, like `Chrome Dev`.
+
+-#  [optional] To build wasm intrinsics tests, append `--build_wasm_intrin_test` option.
+
+    For example:
+    @code{.bash}
+    python ./platforms/js/build_js.py build_js --build_wasm --simd --build_wasm_intrin_test
+    @endcode
+
+    For wasm intrinsics tests, you can use the following function to test all the cases:
+    @code{.js}
+    cv.test_hal_intrin_all()
+    @endcode
+
+    And the failed cases will be logged in the JavaScript debug console.
+
+    If you only want to test single data type of wasm intrinsics, you can use the following functions:
+    @code{.js}
+    cv.test_hal_intrin_uint8()
+    cv.test_hal_intrin_int8()
+    cv.test_hal_intrin_uint16()
+    cv.test_hal_intrin_int16()
+    cv.test_hal_intrin_uint32()
+    cv.test_hal_intrin_int32()
+    cv.test_hal_intrin_uint64()
+    cv.test_hal_intrin_int64()
+    cv.test_hal_intrin_float32()
+    cv.test_hal_intrin_float64()
+    @endcode
+
+-#  [optional] To build performance tests, append `--build_perf` option.
+
+    For example:
+    @code{.bash}
+    python ./platforms/js/build_js.py build_js --build_perf
+    @endcode
+
+    To run performance tests, launch a local web server in \<build_dir\>/bin folder. For example, node http-server which serves on `localhost:8080`.
+
+    There are some kernels now in the performance test like `cvtColor`, `resize` and `threshold`. For example, if you want to test `threshold`, please navigate the web browser to `http://localhost:8080/perf/perf_imgproc/perf_threshold.html`. You need to input the test parameter like `(1920x1080, CV_8UC1, THRESH_BINARY)`, and then click the `Run` button to run the case. And if you don't input the parameter, it will run all the cases of this kernel.
+
+    You can also run tests using Node.js.
+
+    For example, run `threshold` with parameter `(1920x1080, CV_8UC1, THRESH_BINARY)`:
+    @code{.sh}
+    cd bin/perf
+    npm install
+    node perf_threshold.js --test_param_filter="(1920x1080, CV_8UC1, THRESH_BINARY)"
+    @endcode
+
 Building OpenCV.js with Docker
 ---------------------------------------
 

modules/core/include/opencv2/core/cv_cpu_dispatch.h

@@ -157,6 +157,11 @@
 #  define CV_MSA 1
 #endif
 
+#ifdef __EMSCRIPTEN__
+#  define CV_WASM_SIMD 1
+#  include <wasm_simd128.h>
+#endif
+
 #endif // CV_ENABLE_INTRINSICS && !CV_DISABLE_OPTIMIZATION && !__CUDACC__
 
 #if defined CV_CPU_COMPILE_AVX && !defined CV_CPU_BASELINE_COMPILE_AVX
@@ -328,3 +333,7 @@ struct VZeroUpperGuard {
 #ifndef CV_MSA
 #  define CV_MSA 0
 #endif
+
+#ifndef CV_WASM_SIMD
+#  define CV_WASM_SIMD 0
+#endif
\ No newline at end of file

modules/core/include/opencv2/core/hal/intrin.hpp

@@ -168,7 +168,7 @@ using namespace CV_CPU_OPTIMIZATION_HAL_NAMESPACE;
 #   undef CV_MSA
 #endif
 
-#if CV_SSE2 || CV_NEON || CV_VSX || CV_MSA
+#if CV_SSE2 || CV_NEON || CV_VSX || CV_MSA || CV_WASM_SIMD
 #define CV__SIMD_FORWARD 128
 #include "opencv2/core/hal/intrin_forward.hpp"
 #endif
@@ -190,6 +190,9 @@ using namespace CV_CPU_OPTIMIZATION_HAL_NAMESPACE;
 
 #include "opencv2/core/hal/intrin_msa.hpp"
 
+#elif CV_WASM_SIMD
+#include "opencv2/core/hal/intrin_wasm.hpp"
+
 #else
 
 #define CV_SIMD128_CPP 1

modules/core/src/mathfuncs_core.simd.hpp

@@ -31,6 +31,11 @@ using namespace cv;
 
 namespace {
 
+static const float atan2_p1 = 0.9997878412794807f*(float)(180/CV_PI);
+static const float atan2_p3 = -0.3258083974640975f*(float)(180/CV_PI);
+static const float atan2_p5 = 0.1555786518463281f*(float)(180/CV_PI);
+static const float atan2_p7 = -0.04432655554792128f*(float)(180/CV_PI);
+
 #ifdef __EMSCRIPTEN__
 static inline float atan_f32(float y, float x)
 {
@@ -42,11 +47,6 @@ static inline float atan_f32(float y, float x)
     return a; // range [0; 360)
 }
 #else
-static const float atan2_p1 = 0.9997878412794807f*(float)(180/CV_PI);
-static const float atan2_p3 = -0.3258083974640975f*(float)(180/CV_PI);
-static const float atan2_p5 = 0.1555786518463281f*(float)(180/CV_PI);
-static const float atan2_p7 = -0.04432655554792128f*(float)(180/CV_PI);
-
 static inline float atan_f32(float y, float x)
 {
     float ax = std::abs(x), ay = std::abs(y);

modules/core/src/parallel.cpp

@@ -54,7 +54,7 @@
 #endif
 
 #if defined __linux__ || defined __APPLE__ || defined __GLIBC__ \
-    || defined __HAIKU__
+    || defined __HAIKU__ || defined __EMSCRIPTEN__
     #include <unistd.h>
     #include <stdio.h>
     #include <sys/types.h>
@@ -793,7 +793,7 @@ int cv::getNumberOfCPUs(void)
 #elif defined __ANDROID__
     static int ncpus = getNumberOfCPUsImpl();
     return ncpus;
-#elif defined __linux__ || defined __GLIBC__ || defined __HAIKU__
+#elif defined __linux__ || defined __GLIBC__ || defined __HAIKU__ || defined __EMSCRIPTEN__
     return (int)sysconf( _SC_NPROCESSORS_ONLN );
 #elif defined __APPLE__
     int numCPU=0;

modules/js/CMakeLists.txt

@@ -82,11 +82,21 @@ add_definitions("-std=c++11")
 
 link_libraries(${OPENCV_MODULE_${the_module}_DEPS})
 
-ocv_add_executable(${the_module} ${bindings_cpp})
+OCV_OPTION(BUILD_WASM_INTRIN_TESTS "Build WASM intrin tests" OFF )
+if(BUILD_WASM_INTRIN_TESTS)
+  add_definitions(-DTEST_WASM_INTRIN)
+  ocv_module_include_directories("${CMAKE_CURRENT_SOURCE_DIR}/../ts/include")
+  ocv_module_include_directories("${CMAKE_CURRENT_SOURCE_DIR}/../imgcodecs/include")
+  ocv_module_include_directories("${CMAKE_CURRENT_SOURCE_DIR}/../videoio/include")
+  ocv_module_include_directories("${CMAKE_CURRENT_SOURCE_DIR}/../highgui/include")
+  ocv_add_executable(${the_module} ${bindings_cpp} "${CMAKE_CURRENT_SOURCE_DIR}/../ts/src/ts_gtest.cpp")
+else()
+  ocv_add_executable(${the_module} ${bindings_cpp})
+endif()
 
 set_target_properties(${the_module} PROPERTIES COMPILE_FLAGS "-Wno-missing-prototypes")
 
-set(EMSCRIPTEN_LINK_FLAGS "${EMSCRIPTEN_LINK_FLAGS} --memory-init-file 0 -s TOTAL_MEMORY=134217728 -s ALLOW_MEMORY_GROWTH=1")
+set(EMSCRIPTEN_LINK_FLAGS "${EMSCRIPTEN_LINK_FLAGS} --memory-init-file 0 -s TOTAL_MEMORY=128MB -s WASM_MEM_MAX=1GB -s ALLOW_MEMORY_GROWTH=1")
 set(EMSCRIPTEN_LINK_FLAGS "${EMSCRIPTEN_LINK_FLAGS} -s MODULARIZE=1 -s SINGLE_FILE=1")
 set(EMSCRIPTEN_LINK_FLAGS "${EMSCRIPTEN_LINK_FLAGS} -s EXPORT_NAME=\"'cv'\" -s DEMANGLE_SUPPORT=1")
 set(EMSCRIPTEN_LINK_FLAGS "${EMSCRIPTEN_LINK_FLAGS} -s FORCE_FILESYSTEM=1 --use-preload-plugins --bind --post-js ${JS_HELPER} -Wno-missing-prototypes")
@@ -142,3 +152,26 @@ list(APPEND opencv_test_js_file_deps "${test_data_path}" "${opencv_test_js_bin_d
 
 add_custom_target(${PROJECT_NAME}_test ALL
                   DEPENDS ${OCV_JS_PATH} ${opencv_test_js_file_deps})
+
+# perf
+set(opencv_perf_js_bin_dir "${EXECUTABLE_OUTPUT_PATH}/perf")
+set(perf_dir ${CMAKE_CURRENT_SOURCE_DIR}/perf)
+
+set(opencv_perf_js_file_deps "")
+
+# make sure the build directory exists
+file(MAKE_DIRECTORY "${opencv_perf_js_bin_dir}")
+
+# gather and copy specific files for js perf
+file(GLOB_RECURSE perf_files RELATIVE "${perf_dir}" "${perf_dir}/*")
+foreach(f ${perf_files})
+  add_custom_command(OUTPUT "${opencv_perf_js_bin_dir}/${f}"
+                     COMMAND ${CMAKE_COMMAND} -E copy_if_different "${perf_dir}/${f}" "${opencv_perf_js_bin_dir}/${f}"
+                     DEPENDS "${perf_dir}/${f}"
+                     COMMENT "Copying ${f}"
+                    )
+  list(APPEND opencv_perf_js_file_deps "${perf_dir}/${f}" "${opencv_perf_js_bin_dir}/${f}")
+endforeach()
+
+add_custom_target(${PROJECT_NAME}_perf ALL
+                  DEPENDS ${OCV_JS_PATH} ${opencv_perf_js_file_deps})

modules/js/perf/README.md

+# OpenCV.js Performance Test
+
+## Node.js Version
+
+### Prerequisites
+
+1. node.js, npm: Make sure you have installed these beforehand with the system package manager.
+
+2. Benchmark.js: Make sure you have installed Benchmark.js by npm before use. Please run `npm install` in the directory `<build_dir>/bin/perf`.
+
+### How to Use
+
+For example, if you want to test the performance of cvtColor, please run `perf_cvtcolor.js` by node in terminal:
+
+```sh
+node perf_cvtcolor.js
+```
+
+All tests of cvtColor will be run by above command.
+
+If you just want to run one specific case, please use `--test_param_filter="()"` flag, like:
+
+```sh
+node perf_cvtcolor.js --test_param_filter="(1920x1080, COLOR_BGR2GRAY)"
+```
+
+## Browser Version
+
+### How to Use
+
+To run performance tests, please launch a local web server in <build_dir>/bin folder. For example, node http-server which serves on localhost:8080.
+
+Navigate the web browser to the kernel page you want to test, like http://localhost:8080/perf/imgproc/cvtcolor.html.
+
+You can input the paramater, and then click the `Run` button to run the specific case, or it will run all the cases.

modules/js/perf/base.js

+if (typeof window === 'undefined') {
+  var cv = require("../opencv");
+}
+
+const cvSize = {
+  szODD: new cv.Size(127, 61),
+  szQVGA: new cv.Size(320, 240),
+  szVGA: new cv.Size(640, 480),
+  szqHD: new cv.Size(960, 540),
+  sz720p: new cv.Size(1280, 720),
+  sz1080p: new cv.Size(1920, 1080),
+  sz130x60: new cv.Size(130, 60),
+  sz213x120: new cv.Size(120 * 1280 / 720, 120),
+}
+
+if (typeof window === 'undefined') {
+  exports.cvSize = cvSize;
+}
\ No newline at end of file

modules/js/perf/package.json

+{
+    "name": "opencv_js_perf",
+    "description": "Perfermance tests for opencv js bindings",
+    "version": "1.0.0",
+    "dependencies" : {
+      "benchmark" : "latest"
+    },
+    "repository": {
+      "type": "git",
+      "url": "https://github.com/opencv/opencv.git"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "BSD-3-Clause",
+    "bugs": {
+      "url": "https://github.com/opencv/opencv/issues"
+    },
+    "homepage": "https://github.com/opencv/opencv"
+  }
\ No newline at end of file

modules/js/perf/perf_helpfunc.js

+var fillGradient = function(cv, img, delta=5) {
+  let ch = img.channels();
+  console.assert(!img.empty() && img.depth() == cv.CV_8U && ch <= 4);
+
+  let n = 255 / delta;
+  for(let r = 0; r < img.rows; ++r) {
+    let kR = r % (2*n);
+    let valR = (kR<=n) ? delta*kR : delta*(2*n-kR);
+    for(let c = 0; c < img.cols; ++c) {
+        let kC = c % (2*n);
+        let valC = (kC<=n) ? delta*kC : delta*(2*n-kC);
+        let vals = [valR, valC, 200*r/img.rows, 255];
+        let p = img.ptr(r, c);
+        for(let i = 0; i < ch; ++i) p[i] = vals[i];
+    }
+  }
+}
+
+var cvtStr2cvSize = function(strSize) {
+  let size;
+  switch(strSize) {
+    case "127,61": size = cvSize.szODD;break;
+    case '320,240': size = cvSize.szQVGA;break;
+    case '640,480': size = cvSize.szVGA;break;
+    case '960,540': size = cvSize.szqHD;break;
+    case '1280,720': size = cvSize.sz720p;break;
+    case '1920,1080': size = cvSize.sz1080p;break;
+    case "130,60": size = cvSize.sz130x60;break;
+    case '213,120': size = cvSize.sz213x120;break;
+    default: console.error("unsupported size for this case");
+  }
+  return size;
+}
+
+var combine = function() {
+  let result = [[]];
+  for (let i = 0; i < arguments.length; ++i) {
+    result = permute(result, arguments[i]);
+  }
+  return result;
+}
+
+function permute (source, target) {
+  let result = [];
+  for (let i = 0; i < source.length; ++i) {
+    for (let j = 0; j < target.length; ++j) {
+      let tmp = source[i].slice();
+      tmp.push(target[j]);
+      result.push(tmp);
+    }
+  }
+  return result;
+}
+
+if (typeof window === 'undefined') {
+  exports.fillGradient = fillGradient;
+  exports.cvtStr2cvSize = cvtStr2cvSize;
+  exports.combine = combine;
+}
\ No newline at end of file

modules/js/perf/perf_imgproc/perf_cvtcolor.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>OpenCV.js Performance Test</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <style>
+      body {
+        font-size: 13px;
+      }
+      .top-margin {
+        margin-top:10px;
+      }
+      h1, h4 {
+        margin: 24px 0 0;
+      }
+      h1 {
+        font-size: 2.0em;
+      }
+      h4 {
+        font-size: 1.2em;
+      }
+      pre {
+        font-family: 'Consolas', 'Monaco', monospace, serif;
+        font-size: 12px;
+        tab-size: 2;
+      }
+      input[type=checkbox] {
+        vertical-align: middle;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container" id="container">
+      <div class="row">
+        <div class="col-12">
+          <h1>OpenCV.js Performance Test</h1>
+          <div>
+            <h4>Modules</h4>
+              <h7>Image Processing</h7>
+          </div>
+          <div>
+            <h4>Kernels</h4>
+              <h7>CvtColor</h7>
+          </div>
+          <div>
+            <h4>Parameters Filter</h4>
+            <input type="text" id="params" min="1" size="40" placeholder="default: run all the case"/>  for example: (640x480,COLOR_RGBA2GRAY)
+          </div>
+          <div class='row labels-wrapper' id='labelitem'></div>
+          <div class="row top-margin">
+          </div>
+          <div>
+          <button type="button" id="runButton" class="btn btn-primary disabled" disabled="disabled">Loading</button>
+            (It will take several minutes)</div>
+          <div class="row top-margin">
+          </div>
+          <div>
+            <pre id="log"></pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.js"></script>
+    <script src="../../opencv.js" type="text/javascript"></script>
+    <script src="../base.js"></script>
+    <script src="../perf_helpfunc.js"></script>
+    <script src="./perf_cvtcolor.js"></script>
+  </body>
+</html>
\ No newline at end of file

modules/js/perf/perf_imgproc/perf_resize.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>OpenCV.js Performance Test</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <style>
+      body {
+        font-size: 13px;
+      }
+      .top-margin {
+        margin-top:10px;
+      }
+      h1, h4 {
+        margin: 24px 0 0;
+      }
+      h1 {
+        font-size: 2.0em;
+      }
+      h4 {
+        font-size: 1.2em;
+      }
+      pre {
+        font-family: 'Consolas', 'Monaco', monospace, serif;
+        font-size: 12px;
+        tab-size: 2;
+      }
+      input[type=checkbox] {
+        vertical-align: middle;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container" id="container">
+      <div class="row">
+        <div class="col-12">
+          <h1>OpenCV.js Performance Test</h1>
+          <div>
+            <h4>Modules</h4>
+              <h7>Image Processing</h7>
+          </div>
+          <div>
+            <h4>Kernels</h4>
+              <h7>Resize</h7>
+          </div>
+          <div>
+            <h4>Parameters Filter</h4>
+            <input type="text" id="params" min="1" size="40" placeholder="default: run all the case"/>  for example: (CV_8UC1,640x480,960x540)
+          </div>
+          <div class='row labels-wrapper' id='labelitem'></div>
+          <div class="row top-margin">
+          </div>
+          <div>
+          <button type="button" id="runButton" class="btn btn-primary disabled" disabled="disabled">Loading</button>
+            (It will take several minutes)</div>
+          <div class="row top-margin">
+          </div>
+          <div>
+            <pre id="log"></pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.js"></script>
+    <script src="../../opencv.js" type="text/javascript"></script>
+    <script src="../base.js"></script>
+    <script src="../perf_helpfunc.js"></script>
+    <script src="./perf_resize.js"></script>
+  </body>
+</html>
\ No newline at end of file

modules/js/perf/perf_imgproc/perf_resize.js

+const isNodeJs = (typeof window) === 'undefined'? true : false;
+
+if　(isNodeJs)　{
+  var Benchmark = require('benchmark');
+  var cv = require('../../opencv');
+  var HelpFunc = require('../perf_helpfunc');
+  var Base = require('../base');
+} else {
+  var paramsElement = document.getElementById('params');
+  var runButton = document.getElementById('runButton');
+  var logElement = document.getElementById('log');
+}
+
+cv.onRuntimeInitialized = () => {
+  console.log('opencv.js loaded');
+  if (isNodeJs) {
+    global.cv = cv;
+    global.combine = HelpFunc.combine;
+    global.fillGradient = HelpFunc.fillGradient;
+    global.cvtStr2cvSize = HelpFunc.cvtStr2cvSize;
+    global.cvSize = Base.cvSize;
+  } else {
+    runButton.removeAttribute('disabled');
+    runButton.setAttribute('class', 'btn btn-primary');
+    runButton.innerHTML = 'Run';
+  }
+  let totalCaseNum, currentCaseId;
+
+  const matTypesUpLinear = ['CV_8UC1', 'CV_8UC2', 'CV_8UC3', 'CV_8UC4'];
+  const size1UpLinear = [cvSize.szVGA];
+  const size2UpLinear = [cvSize.szqHD, cvSize.sz720p];
+  const combiUpLinear = combine(matTypesUpLinear, size1UpLinear, size2UpLinear);
+
+  const combiDownLinear = [
+    ['CV_8UC1', cvSize.szVGA, cvSize.szQVGA],
+    ['CV_8UC2', cvSize.szVGA, cvSize.szQVGA],
+    ['CV_8UC3', cvSize.szVGA, cvSize.szQVGA],
+    ['CV_8UC4', cvSize.szVGA, cvSize.szQVGA],
+    ['CV_8UC1', cvSize.szqHD, cvSize.szVGA],
+    ['CV_8UC2', cvSize.szqHD, cvSize.szVGA],
+    ['CV_8UC3', cvSize.szqHD, cvSize.szVGA],
+    ['CV_8UC4', cvSize.szqHD, cvSize.szVGA],
+    ['CV_8UC1', cvSize.sz720p, cvSize.sz213x120],// face detection min_face_size = 20%
+    ['CV_8UC2', cvSize.sz720p, cvSize.sz213x120],// face detection min_face_size = 20%
+    ['CV_8UC3', cvSize.sz720p, cvSize.sz213x120],// face detection min_face_size = 20%
+    ['CV_8UC4', cvSize.sz720p, cvSize.sz213x120],// face detection min_face_size = 20%
+    ['CV_8UC1', cvSize.sz720p, cvSize.szVGA],
+    ['CV_8UC2', cvSize.sz720p, cvSize.szVGA],
+    ['CV_8UC3', cvSize.sz720p, cvSize.szVGA],
+    ['CV_8UC4', cvSize.sz720p, cvSize.szVGA],
+    ['CV_8UC1', cvSize.sz720p, cvSize.szQVGA],
+    ['CV_8UC2', cvSize.sz720p, cvSize.szQVGA],
+    ['CV_8UC3', cvSize.sz720p, cvSize.szQVGA],
+    ['CV_8UC4', cvSize.sz720p, cvSize.szQVGA]
+  ];
+
+  const matTypesAreaFast = ['CV_8UC1', 'CV_8UC3', 'CV_8UC4', 'CV_16UC1', 'CV_16UC3', 'CV_16UC4'];
+  const sizesAreaFast = [cvSize.szVGA, cvSize.szqHD, cvSize.sz720p, cvSize.sz1080p];
+  const scalesAreaFast = [2];
+  const combiAreaFast = combine(matTypesAreaFast, sizesAreaFast, scalesAreaFast);
+
+  function addResizeUpLinearCase(suite, combination) {
+    totalCaseNum += combination.length;
+    for (let i = 0; i < combination.length; ++i) {
+      let matType = combination[i][0];
+      let from = combination[i][1];
+      let to = combination[i][2];
+
+      suite.add('resize', function() {
+        cv.resize(src, dst, to, 0, 0, cv.INTER_LINEAR_EXACT);
+        }, {
+          'setup': function() {
+            let from = this.params.from;
+            let to = this.params.to;
+            let matType = cv[this.params.matType];
+            let src = new cv.Mat(from, matType);
+            let dst = new cv.Mat(to, matType);
+            fillGradient(cv, src);
+              },
+          'teardown': function() {
+            src.delete();
+            dst.delete();
+          }
+      });
+
+      // set init params
+      let index = suite.length - 1;
+      suite[index].params = {
+        from: from,
+        to: to,
+        matType: matType
+      };
+    }
+  }
+
+  function addResizeDownLinearCase(suite, combination) {
+    totalCaseNum += combination.length;
+    for (let i = 0; i < combination.length; ++i) {
+      let matType = combination[i][0];
+      let from = combination[i][1];
+      let to = combination[i][2];
+
+      suite.add('resize', function() {
+        cv.resize(src, dst, to, 0, 0, cv.INTER_LINEAR_EXACT);
+        }, {
+          'setup': function() {
+            let from = this.params.from;
+            let to = this.params.to;
+            let matType = cv[this.params.matType];
+            let src = new cv.Mat(from, matType);
+            let dst = new cv.Mat(to, matType);
+            fillGradient(cv, src);
+              },
+          'teardown': function() {
+            src.delete();
+            dst.delete();
+          }
+      });
+
+      // set init params
+      let index = suite.length - 1;
+      suite[index].params = {
+        from: from,
+        to: to,
+        matType: matType
+      };
+    }
+  }
+
+  function addResizeAreaFastCase(suite, combination) {
+    totalCaseNum += combination.length;
+    for (let i = 0; i < combination.length; ++i) {
+      let matType = combination[i][0];
+      let from = combination[i][1];
+      let scale = combination[i][2];
+      from.width = (Math.floor(from.width/scale))*scale;
+      from.height = (Math.floor(from.height/scale))*scale;
+      let to = {
+        width: from.width/scale,
+        height: from.height/scale};  // for params print
+
+      suite.add('resize', function() {
+        cv.resize(src, dst, dst.size(), 0, 0, cv.INTER_AREA);
+        }, {
+          'setup': function() {
+            let from = this.params.from;
+            let scale = this.params.scale;
+            let matType = cv[this.params.matType];
+            let src = new cv.Mat(from, matType);
+            let dst = new cv.Mat(from.height/scale, from.width/scale, matType);
+              },
+          'teardown': function() {
+            src.delete();
+            dst.delete();
+          }
+      });
+      // set init params
+      let index = suite.length - 1;
+      suite[index].params = {
+        from: from,
+        scale: scale,
+        matType: matType
+      };
+    }
+  }
+
+  function decodeParams2Case(suite, params) {
+    let sizeString = (params.match(/[0-9]+x[0-9]+/g) || []).slice(0, 2).toString();
+    let sizes = (sizeString.match(/[0-9]+/g) || []);
+    let size1Str = sizes.slice(0, 2).toString();
+    let size2Str = sizes.slice(2, 5).toString();
+    let matType = (params.match(/CV\_[0-9]+[A-z][A-z][0-9]/) || []).toString();
+    let size1 = cvtStr2cvSize(size1Str);
+    let size2 = cvtStr2cvSize(size2Str);
+    // check if the params match and add case
+    for (let i = 0; i < combinations.length; ++i) {
+      let combination = combinations[i];
+      for (let j = 0; j < combination.length; ++j) {
+        if (matType === combination[j][0] && size1 === combination[j][1] && size2 === combination[j][2]) {
+          resizeFunc[i](suite, [combination[j]]);
+        }
+      }
+    }
+  }
+
+  function log(message) {
+    console.log(message);
+    if (!isNodeJs) {
+      logElement.innerHTML += `\n${'\t'.repeat(1) + message}`;
+    }
+  }
+
+  function setBenchmarkSuite(suite) {
+    suite
+    // add listeners
+    .on('cycle', function(event) {
+      ++currentCaseId;
+      let params = event.target.params;
+      let matType = params.matType;
+      let size1 = params.from;
+      let size2 = params.to;
+      log(`=== ${event.target.name} ${currentCaseId} ===`);
+      log(`params: (${matType},${parseInt(size1.width)}x${parseInt(size1.height)},`+
+          `${parseInt(size2.width)}x${parseInt(size2.height)})`);
+      log('elapsed time:' +String(event.target.times.elapsed*1000)+' ms');
+      log('mean time:' +String(event.target.stats.mean*1000)+' ms');
+      log('stddev time:' +String(event.target.stats.deviation*1000)+' ms');
+      log(String(event.target));
+    })
+    .on('error', function(event) { log(`test case ${event.target.name} failed`); })
+    .on('complete', function(event) {
+      log(`\n ###################################`)
+      log(`Finished testing ${event.currentTarget.length} cases \n`);
+      if (!isNodeJs) {
+        runButton.removeAttribute('disabled');
+        runButton.setAttribute('class', 'btn btn-primary');
+        runButton.innerHTML = 'Run';
+      }
+    });
+  }
+
+  function genBenchmarkCase(paramsContent) {
+    let suite = new Benchmark.Suite;
+    totalCaseNum = 0;
+    currentCaseId = 0;
+    if (/\(\w+,[\ ]*[0-9]+x[0-9]+,[\ ]*[0-9]+x[0-9]+\)/g.test(paramsContent.toString())) {
+      let params = paramsContent.toString().match(/\(\w+,[\ ]*[0-9]+x[0-9]+,[\ ]*[0-9]+x[0-9]+\)/g)[0];
+      decodeParams2Case(suite, params);
+    } else {
+      log("no filter or getting invalid params, run all the cases");
+      addResizeUpLinearCase(suite, combiUpLinear);
+      addResizeDownLinearCase(suite, combiDownLinear);
+    }
+    setBenchmarkSuite(suite);
+    log(`Running ${totalCaseNum} tests from Resize`);
+    suite.run({ 'async': true }); // run the benchmark
+  }
+
+  // init
+  let resizeFunc = [addResizeUpLinearCase, addResizeDownLinearCase];//, addResizeAreaFastCase];
+  let combinations = [combiUpLinear, combiDownLinear];//, combiAreaFast];
+
+  // set test filter params
+  if (isNodeJs) {
+    const args = process.argv.slice(2);
+    let paramsContent = '';
+    if (/--test_param_filter=\(\w+,[\ ]*[0-9]+x[0-9]+,[\ ]*[0-9]+x[0-9]+\)/g.test(args.toString())) {
+      paramsContent = args.toString().match(/\(\w+,[\ ]*[0-9]+x[0-9]+,[\ ]*[0-9]+x[0-9]+\)/g)[0];
+    }
+    genBenchmarkCase(paramsContent);
+  } else {
+    runButton.onclick = function()　{
+      let paramsContent = paramsElement.value;
+      genBenchmarkCase(paramsContent);
+      if (totalCaseNum !== 0) {
+        runButton.setAttribute("disabled", "disabled");
+        runButton.setAttribute('class', 'btn btn-primary disabled');
+        runButton.innerHTML = "Running";
+      }
+    }
+  }
+};
\ No newline at end of file

modules/js/perf/perf_imgproc/perf_threshold.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>OpenCV.js Performance Test</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <style>
+      body {
+        font-size: 13px;
+      }
+      .top-margin {
+        margin-top:10px;
+      }
+      h1, h4 {
+        margin: 24px 0 0;
+      }
+      h1 {
+        font-size: 2.0em;
+      }
+      h4 {
+        font-size: 1.2em;
+      }
+      pre {
+        font-family: 'Consolas', 'Monaco', monospace, serif;
+        font-size: 12px;
+        tab-size: 2;
+      }
+      input[type=checkbox] {
+        vertical-align: middle;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container" id="container">
+      <div class="row">
+        <div class="col-12">
+          <h1>OpenCV.js Performance Test</h1>
+          <div>
+            <h4>Modules</h4>
+              <h7>Image Processing</h7>
+          </div>
+          <div>
+            <h4>Kernels</h4>
+              <h7>Threshold</h7>
+          </div>
+          <div>
+            <h4>Parameters Filter</h4>
+            <input type="text" id="params" min="1" size="40" placeholder="default: run all the case"/>  for example: (1920x1080, CV_8UC1, THRESH_BINARY)
+          </div>
+          <div class='row labels-wrapper' id='labelitem'></div>
+          <div class="row top-margin">
+          </div>
+          <div>
+          <button type="button" id="runButton" class="btn btn-primary disabled" disabled="disabled">Loading</button>
+            (It will take several minutes)</div>
+          <div class="row top-margin">
+          </div>
+          <div>
+            <pre id="log"></pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.js"></script>
+    <script src="../../opencv.js" type="text/javascript"></script>
+    <script src="../base.js"></script>
+    <script src="../perf_helpfunc.js"></script>
+    <script src="./perf_threshold.js"></script>
+  </body>
+</html>
\ No newline at end of file

modules/js/src/core_bindings.cpp

@@ -71,6 +71,18 @@
 #include <emscripten/bind.h>
 
 @INCLUDES@
+#include "../../../modules/core/src/parallel_impl.hpp"
+
+#ifdef TEST_WASM_INTRIN
+#include "../../../modules/core/include/opencv2/core/hal/intrin.hpp"
+#include "../../../modules/core/include/opencv2/core/utils/trace.hpp"
+#include "../../../modules/ts/include/opencv2/ts/ts_gtest.h"
+namespace cv {
+namespace hal {
+#include "../../../modules/core/test/test_intrin_utils.hpp"
+}
+}
+#endif
 
 using namespace emscripten;
 using namespace cv;
@@ -357,6 +369,51 @@ namespace binding_utils
     std::string getBuildInformation() {
         return cv::getBuildInformation();
     }
+
+#ifdef TEST_WASM_INTRIN
+    void test_hal_intrin_uint8() {
+        cv::hal::test_hal_intrin_uint8();
+    }
+    void test_hal_intrin_int8() {
+        cv::hal::test_hal_intrin_int8();
+    }
+    void test_hal_intrin_uint16() {
+        cv::hal::test_hal_intrin_uint16();
+    }
+    void test_hal_intrin_int16() {
+        cv::hal::test_hal_intrin_int16();
+    }
+    void test_hal_intrin_uint32() {
+        cv::hal::test_hal_intrin_uint32();
+    }
+    void test_hal_intrin_int32() {
+        cv::hal::test_hal_intrin_int32();
+    }
+    void test_hal_intrin_uint64() {
+        cv::hal::test_hal_intrin_uint64();
+    }
+    void test_hal_intrin_int64() {
+        cv::hal::test_hal_intrin_int64();
+    }
+    void test_hal_intrin_float32() {
+        cv::hal::test_hal_intrin_float32();
+    }
+    void test_hal_intrin_float64() {
+        cv::hal::test_hal_intrin_float64();
+    }
+    void test_hal_intrin_all() {
+        cv::hal::test_hal_intrin_uint8();
+        cv::hal::test_hal_intrin_int8();
+        cv::hal::test_hal_intrin_uint16();
+        cv::hal::test_hal_intrin_int16();
+        cv::hal::test_hal_intrin_uint32();
+        cv::hal::test_hal_intrin_int32();
+        cv::hal::test_hal_intrin_uint64();
+        cv::hal::test_hal_intrin_int64();
+        cv::hal::test_hal_intrin_float32();
+        cv::hal::test_hal_intrin_float64();
+    }
+#endif
 }
 
 EMSCRIPTEN_BINDINGS(binding_utils)
@@ -531,10 +588,10 @@ EMSCRIPTEN_BINDINGS(binding_utils)
         .field("distance", &cv::DMatch::distance);
 
     emscripten::value_array<cv::Scalar_<double>> ("Scalar")
-        .element(index<0>())
-        .element(index<1>())
-        .element(index<2>())
-        .element(index<3>());
+        .element(emscripten::index<0>())
+        .element(emscripten::index<1>())
+        .element(emscripten::index<2>())
+        .element(emscripten::index<3>());
 
     emscripten::value_object<binding_utils::MinMaxLoc>("MinMaxLoc")
         .field("minVal", &binding_utils::MinMaxLoc::minVal)
@@ -610,6 +667,25 @@ EMSCRIPTEN_BINDINGS(binding_utils)
 
     function("getBuildInformation", &binding_utils::getBuildInformation);
 
+#ifdef HAVE_PTHREADS_PF
+    function("parallel_pthreads_set_threads_num", &cv::parallel_pthreads_set_threads_num);
+    function("parallel_pthreads_get_threads_num", &cv::parallel_pthreads_get_threads_num);
+#endif
+
+#ifdef TEST_WASM_INTRIN
+    function("test_hal_intrin_uint8", &binding_utils::test_hal_intrin_uint8);
+    function("test_hal_intrin_int8", &binding_utils::test_hal_intrin_int8);
+    function("test_hal_intrin_uint16", &binding_utils::test_hal_intrin_uint16);
+    function("test_hal_intrin_int16", &binding_utils::test_hal_intrin_int16);
+    function("test_hal_intrin_uint32", &binding_utils::test_hal_intrin_uint32);
+    function("test_hal_intrin_int32", &binding_utils::test_hal_intrin_int32);
+    function("test_hal_intrin_uint64", &binding_utils::test_hal_intrin_uint64);
+    function("test_hal_intrin_int64", &binding_utils::test_hal_intrin_int64);
+    function("test_hal_intrin_float32", &binding_utils::test_hal_intrin_float32);
+    function("test_hal_intrin_float64", &binding_utils::test_hal_intrin_float64);
+    function("test_hal_intrin_all", &binding_utils::test_hal_intrin_all);
+#endif
+
     constant("CV_8UC1", CV_8UC1);
     constant("CV_8UC2", CV_8UC2);
     constant("CV_8UC3", CV_8UC3);

modules/js/src/make_umd.py

@@ -87,9 +87,15 @@ def make_umd(opencvjs, cvjs):
     // only CommonJS-like environments that support module.exports,
     // like Node.
     module.exports = factory();
-  } else {
+  } else if (typeof window === 'object') {
     // Browser globals
     root.cv = factory();
+  } else if (typeof importScripts === 'function') {
+    // Web worker
+    root.cv = factory;
+  } else {
+    // Other shells, e.g. d8
+    root.cv = factory();
   }
 }(this, function () {
   %s