Skip to content

Commit e3aded4

Browse files
robertleeplummerjrrobertleeplummerjr
committed
feat: Allow for pixel flipping
fix: Move the flipPixels method to utilities, for reuse fix: Invert pixel orientation fix: Add text for issue gpujs#422
1 parent 2b45882 commit e3aded4

11 files changed

Lines changed: 341 additions & 119 deletions

File tree

‎bin/gpu-browser-core.js‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* GPU Accelerated JavaScript
66
*
77
* @version 2.0.0-rc.14
8-
* @date Fri May 17 2019 18:42:16 GMT-0400 (Eastern Daylight Time)
8+
* @date Sat May 18 2019 17:22:46 GMT-0400 (Eastern Daylight Time)
99
*
1010
* @license MIT
1111
* The MIT License
@@ -1297,23 +1297,9 @@ class CPUKernel extends Kernel {
12971297
return imageArray;
12981298
}
12991299

1300-
getPixels() {
1300+
getPixels(flip) {
13011301
const [width, height] = this.output;
1302-
const halfHeight = height / 2 | 0;
1303-
const bytesPerRow = width * 4;
1304-
const temp = new Uint8Array(width * 4);
1305-
const pixels = this._imageData.data.slice(0);
1306-
for (let y = 0; y < halfHeight; ++y) {
1307-
var topOffset = y * bytesPerRow;
1308-
var bottomOffset = (height - y - 1) * bytesPerRow;
1309-
1310-
temp.set(pixels.subarray(topOffset, topOffset + bytesPerRow));
1311-
1312-
pixels.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
1313-
1314-
pixels.set(temp, bottomOffset);
1315-
}
1316-
return pixels;
1302+
return flip ? utils.flipPixels(this._imageData.data, width, height) : this._imageData.data.slice(0);
13171303
}
13181304

13191305
_imageTo3DArray(images) {
@@ -4035,15 +4021,16 @@ class GLKernel extends Kernel {
40354021
}
40364022
return zResults;
40374023
}
4038-
getPixels() {
4024+
4025+
getPixels(flip) {
40394026
const {
40404027
context: gl,
40414028
output
40424029
} = this;
40434030
const [width, height] = output;
40444031
const pixels = new Uint8Array(width * height * 4);
40454032
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
4046-
return pixels;
4033+
return flip ? pixels : utils.flipPixels(pixels, width, height);
40474034
}
40484035

40494036
renderKernelsToArrays() {
@@ -4122,7 +4109,6 @@ module.exports = {
41224109
GLKernel,
41234110
renderStrategy
41244111
};
4125-
41264112
},{"../../texture":68,"../../utils":69,"../kernel":14}],12:[function(require,module,exports){
41274113
const getContext = require('gl');
41284114
const { WebGLKernel } = require('../web-gl/kernel');
@@ -10364,6 +10350,23 @@ const utils = {
1036410350
argumentTypes,
1036510351
returnType: settings.returnType || null,
1036610352
};
10353+
},
10354+
flipPixels: (pixels, width, height) => {
10355+
const halfHeight = height / 2 | 0;
10356+
const bytesPerRow = width * 4;
10357+
const temp = new Uint8Array(width * 4);
10358+
const result = pixels.slice(0);
10359+
for (let y = 0; y < halfHeight; ++y) {
10360+
const topOffset = y * bytesPerRow;
10361+
const bottomOffset = (height - y - 1) * bytesPerRow;
10362+
10363+
temp.set(result.subarray(topOffset, topOffset + bytesPerRow));
10364+
10365+
result.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
10366+
10367+
result.set(temp, bottomOffset);
10368+
}
10369+
return result;
1036710370
}
1036810371
};
1036910372

‎bin/gpu-browser-core.min.js‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* GPU Accelerated JavaScript
66
*
77
* @version 2.0.0-rc.14
8-
* @date Fri May 17 2019 18:42:19 GMT-0400 (Eastern Daylight Time)
8+
* @date Sat May 18 2019 17:22:48 GMT-0400 (Eastern Daylight Time)
99
*
1010
* @license MIT
1111
* The MIT License
@@ -18,7 +18,7 @@
1818
* GPU Accelerated JavaScript
1919
*
2020
* @version 2.0.0-rc.14
21-
* @date Fri May 17 2019 18:42:16 GMT-0400 (Eastern Daylight Time)
21+
* @date Sat May 18 2019 17:22:46 GMT-0400 (Eastern Daylight Time)
2222
*
2323
* @license MIT
2424
* The MIT License
@@ -1310,23 +1310,9 @@ class CPUKernel extends Kernel {
13101310
return imageArray;
13111311
}
13121312

1313-
getPixels() {
1313+
getPixels(flip) {
13141314
const [width, height] = this.output;
1315-
const halfHeight = height / 2 | 0;
1316-
const bytesPerRow = width * 4;
1317-
const temp = new Uint8Array(width * 4);
1318-
const pixels = this._imageData.data.slice(0);
1319-
for (let y = 0; y < halfHeight; ++y) {
1320-
var topOffset = y * bytesPerRow;
1321-
var bottomOffset = (height - y - 1) * bytesPerRow;
1322-
1323-
temp.set(pixels.subarray(topOffset, topOffset + bytesPerRow));
1324-
1325-
pixels.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
1326-
1327-
pixels.set(temp, bottomOffset);
1328-
}
1329-
return pixels;
1315+
return flip ? utils.flipPixels(this._imageData.data, width, height) : this._imageData.data.slice(0);
13301316
}
13311317

13321318
_imageTo3DArray(images) {
@@ -4048,15 +4034,16 @@ class GLKernel extends Kernel {
40484034
}
40494035
return zResults;
40504036
}
4051-
getPixels() {
4037+
4038+
getPixels(flip) {
40524039
const {
40534040
context: gl,
40544041
output
40554042
} = this;
40564043
const [width, height] = output;
40574044
const pixels = new Uint8Array(width * height * 4);
40584045
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
4059-
return pixels;
4046+
return flip ? pixels : utils.flipPixels(pixels, width, height);
40604047
}
40614048

40624049
renderKernelsToArrays() {
@@ -4135,7 +4122,6 @@ module.exports = {
41354122
GLKernel,
41364123
renderStrategy
41374124
};
4138-
41394125
},{"../../texture":68,"../../utils":69,"../kernel":14}],12:[function(require,module,exports){
41404126
const getContext = require('gl');
41414127
const { WebGLKernel } = require('../web-gl/kernel');
@@ -10377,6 +10363,23 @@ const utils = {
1037710363
argumentTypes,
1037810364
returnType: settings.returnType || null,
1037910365
};
10366+
},
10367+
flipPixels: (pixels, width, height) => {
10368+
const halfHeight = height / 2 | 0;
10369+
const bytesPerRow = width * 4;
10370+
const temp = new Uint8Array(width * 4);
10371+
const result = pixels.slice(0);
10372+
for (let y = 0; y < halfHeight; ++y) {
10373+
const topOffset = y * bytesPerRow;
10374+
const bottomOffset = (height - y - 1) * bytesPerRow;
10375+
10376+
temp.set(result.subarray(topOffset, topOffset + bytesPerRow));
10377+
10378+
result.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
10379+
10380+
result.set(temp, bottomOffset);
10381+
}
10382+
return result;
1038010383
}
1038110384
};
1038210385

‎bin/gpu-browser.js‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* GPU Accelerated JavaScript
66
*
77
* @version 2.0.0-rc.14
8-
* @date Fri May 17 2019 18:42:16 GMT-0400 (Eastern Daylight Time)
8+
* @date Sat May 18 2019 17:22:46 GMT-0400 (Eastern Daylight Time)
99
*
1010
* @license MIT
1111
* The MIT License
@@ -6061,23 +6061,9 @@ class CPUKernel extends Kernel {
60616061
return imageArray;
60626062
}
60636063

6064-
getPixels() {
6064+
getPixels(flip) {
60656065
const [width, height] = this.output;
6066-
const halfHeight = height / 2 | 0;
6067-
const bytesPerRow = width * 4;
6068-
const temp = new Uint8Array(width * 4);
6069-
const pixels = this._imageData.data.slice(0);
6070-
for (let y = 0; y < halfHeight; ++y) {
6071-
var topOffset = y * bytesPerRow;
6072-
var bottomOffset = (height - y - 1) * bytesPerRow;
6073-
6074-
temp.set(pixels.subarray(topOffset, topOffset + bytesPerRow));
6075-
6076-
pixels.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
6077-
6078-
pixels.set(temp, bottomOffset);
6079-
}
6080-
return pixels;
6066+
return flip ? utils.flipPixels(this._imageData.data, width, height) : this._imageData.data.slice(0);
60816067
}
60826068

60836069
_imageTo3DArray(images) {
@@ -8799,15 +8785,16 @@ class GLKernel extends Kernel {
87998785
}
88008786
return zResults;
88018787
}
8802-
getPixels() {
8788+
8789+
getPixels(flip) {
88038790
const {
88048791
context: gl,
88058792
output
88068793
} = this;
88078794
const [width, height] = output;
88088795
const pixels = new Uint8Array(width * height * 4);
88098796
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
8810-
return pixels;
8797+
return flip ? pixels : utils.flipPixels(pixels, width, height);
88118798
}
88128799

88138800
renderKernelsToArrays() {
@@ -8886,7 +8873,6 @@ module.exports = {
88868873
GLKernel,
88878874
renderStrategy
88888875
};
8889-
88908876
},{"../../texture":69,"../../utils":70,"../kernel":15}],13:[function(require,module,exports){
88918877
const getContext = require('gl');
88928878
const { WebGLKernel } = require('../web-gl/kernel');
@@ -15128,6 +15114,23 @@ const utils = {
1512815114
argumentTypes,
1512915115
returnType: settings.returnType || null,
1513015116
};
15117+
},
15118+
flipPixels: (pixels, width, height) => {
15119+
const halfHeight = height / 2 | 0;
15120+
const bytesPerRow = width * 4;
15121+
const temp = new Uint8Array(width * 4);
15122+
const result = pixels.slice(0);
15123+
for (let y = 0; y < halfHeight; ++y) {
15124+
const topOffset = y * bytesPerRow;
15125+
const bottomOffset = (height - y - 1) * bytesPerRow;
15126+
15127+
temp.set(result.subarray(topOffset, topOffset + bytesPerRow));
15128+
15129+
result.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
15130+
15131+
result.set(temp, bottomOffset);
15132+
}
15133+
return result;
1513115134
}
1513215135
};
1513315136

‎bin/gpu-browser.min.js‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* GPU Accelerated JavaScript
66
*
77
* @version 2.0.0-rc.14
8-
* @date Fri May 17 2019 18:42:19 GMT-0400 (Eastern Daylight Time)
8+
* @date Sat May 18 2019 17:22:48 GMT-0400 (Eastern Daylight Time)
99
*
1010
* @license MIT
1111
* The MIT License
@@ -18,7 +18,7 @@
1818
* GPU Accelerated JavaScript
1919
*
2020
* @version 2.0.0-rc.14
21-
* @date Fri May 17 2019 18:42:16 GMT-0400 (Eastern Daylight Time)
21+
* @date Sat May 18 2019 17:22:46 GMT-0400 (Eastern Daylight Time)
2222
*
2323
* @license MIT
2424
* The MIT License
@@ -6074,23 +6074,9 @@ class CPUKernel extends Kernel {
60746074
return imageArray;
60756075
}
60766076

6077-
getPixels() {
6077+
getPixels(flip) {
60786078
const [width, height] = this.output;
6079-
const halfHeight = height / 2 | 0;
6080-
const bytesPerRow = width * 4;
6081-
const temp = new Uint8Array(width * 4);
6082-
const pixels = this._imageData.data.slice(0);
6083-
for (let y = 0; y < halfHeight; ++y) {
6084-
var topOffset = y * bytesPerRow;
6085-
var bottomOffset = (height - y - 1) * bytesPerRow;
6086-
6087-
temp.set(pixels.subarray(topOffset, topOffset + bytesPerRow));
6088-
6089-
pixels.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
6090-
6091-
pixels.set(temp, bottomOffset);
6092-
}
6093-
return pixels;
6079+
return flip ? utils.flipPixels(this._imageData.data, width, height) : this._imageData.data.slice(0);
60946080
}
60956081

60966082
_imageTo3DArray(images) {
@@ -8812,15 +8798,16 @@ class GLKernel extends Kernel {
88128798
}
88138799
return zResults;
88148800
}
8815-
getPixels() {
8801+
8802+
getPixels(flip) {
88168803
const {
88178804
context: gl,
88188805
output
88198806
} = this;
88208807
const [width, height] = output;
88218808
const pixels = new Uint8Array(width * height * 4);
88228809
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
8823-
return pixels;
8810+
return flip ? pixels : utils.flipPixels(pixels, width, height);
88248811
}
88258812

88268813
renderKernelsToArrays() {
@@ -8899,7 +8886,6 @@ module.exports = {
88998886
GLKernel,
89008887
renderStrategy
89018888
};
8902-
89038889
},{"../../texture":69,"../../utils":70,"../kernel":15}],13:[function(require,module,exports){
89048890
const getContext = require('gl');
89058891
const { WebGLKernel } = require('../web-gl/kernel');
@@ -15141,6 +15127,23 @@ const utils = {
1514115127
argumentTypes,
1514215128
returnType: settings.returnType || null,
1514315129
};
15130+
},
15131+
flipPixels: (pixels, width, height) => {
15132+
const halfHeight = height / 2 | 0;
15133+
const bytesPerRow = width * 4;
15134+
const temp = new Uint8Array(width * 4);
15135+
const result = pixels.slice(0);
15136+
for (let y = 0; y < halfHeight; ++y) {
15137+
const topOffset = y * bytesPerRow;
15138+
const bottomOffset = (height - y - 1) * bytesPerRow;
15139+
15140+
temp.set(result.subarray(topOffset, topOffset + bytesPerRow));
15141+
15142+
result.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
15143+
15144+
result.set(temp, bottomOffset);
15145+
}
15146+
return result;
1514415147
}
1514515148
};
1514615149

‎src/backend/cpu/kernel.js‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -316,28 +316,10 @@ class CPUKernel extends Kernel {
316316
return imageArray;
317317
}
318318

319-
getPixels() {
320-
// https://stackoverflow.com/a/41973289/1324039
319+
getPixels(flip) {
321320
const [width, height] = this.output;
322-
const halfHeight = height / 2 | 0; // the | 0 keeps the result an int
323-
const bytesPerRow = width * 4;
324-
// make a temp buffer to hold one row
325-
const temp = new Uint8Array(width * 4);
326-
const pixels = this._imageData.data.slice(0);
327-
for (let y = 0; y < halfHeight; ++y) {
328-
var topOffset = y * bytesPerRow;
329-
var bottomOffset = (height - y - 1) * bytesPerRow;
330-
331-
// make copy of a row on the top half
332-
temp.set(pixels.subarray(topOffset, topOffset + bytesPerRow));
333-
334-
// copy a row from the bottom half to the top
335-
pixels.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
336-
337-
// copy the copy of the top half row to the bottom half
338-
pixels.set(temp, bottomOffset);
339-
}
340-
return pixels;
321+
// cpu is not flipped by default
322+
return flip ? utils.flipPixels(this._imageData.data, width, height) : this._imageData.data.slice(0);
341323
}
342324

343325
_imageTo3DArray(images) {

0 commit comments

Comments
 (0)