mirror of https://github.com/opencv/opencv.git
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
pull/15581/head
Wenzhao Xiang
5 years ago
committed by
Alexander Alekhin
parent
3cf9185159
commit
c2096771cb
20 changed files with 5693 additions and 16 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,35 @@ |
||||
# 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. |
||||
@ -0,0 +1,18 @@ |
||||
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; |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
{ |
||||
"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" |
||||
} |
||||
@ -0,0 +1,59 @@ |
||||
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; |
||||
} |
||||
@ -0,0 +1,73 @@ |
||||
<!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> |
||||
@ -0,0 +1,73 @@ |
||||
<!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> |
||||
@ -0,0 +1,73 @@ |
||||
<!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> |
||||
Loading…
Reference in new issue