Created
January 9, 2020 21:12
-
-
Save robertleeplummerjr/26796385d415a928a6f060ef5e6e0310 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const gpu = new GPU(); | |
| const kernel = gpu.createKernel(function (baseImage, overlayImages, overlayImagesCount, overlayImagesSizes, offsets) { | |
| const pixel = baseImage[this.thread.y][this.thread.x]; | |
| for (let i = 0; i < overlayImagesCount; i++) { | |
| const offset = offsets[i]; | |
| const size = overlayImagesSizes[i]; | |
| if (this.thread.x >= offset[0] && this.thread.x <= size[0] - offset[0]) { | |
| if (this.thread.y >= offset[1] && this.thread.x <= size[1] - offset[1]) { | |
| const mixPixel = overlayImagesCount[i][this.thread.y - offset[1]][this.thread.x - offset[0]]; | |
| //mix mixPixel with pixel | |
| } | |
| } | |
| } | |
| this.color(pixel[0], pixel[1], pixel[2], pixel[3]); | |
| }, { | |
| graphical: true, | |
| output: [baseImage.width, baseImage.height] | |
| }); | |
| // make canvas visible | |
| document.body.appendChild(kernel.canvas); | |
| const overlayImages = [overlay1, overlay2]; | |
| const overlayImagesSizes = overlayImages.map(image => [image.width, image.height]); | |
| kernel( | |
| baseImage, | |
| overlayImages, | |
| overlayImages.length, | |
| overlayImagesSizes, | |
| [[10, 10],[50, 50]] | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Actually, to use
const offset = offsets[i];in this way, you need to set the argument type to "Array1D(2)".