I am trying to work on a application that requires to split the image into dynamic x,y parts and process each part.
For example : if a image is of dimensions 500 X 800, where width is 500 and 800 is height. I have to break the image using [32, 32] :
xTiles = Math.ceil(500/32)=16;
yTiles = Math.ceil(800/32)=25
So, the number of tiles are 16 X 25 = 400. In other words, the whole image is divided into 400 parts.
Now I need to show each tile with some border and also want to separate the textures so that I can process them separately.
I am not sure where can I save those 400 tiles texture, saving it as textures will be a good solution? Or shall I save the result to a single texture with varying coordinates.
Can someone suggest the best solution possible for this kind of problem.
I am using Html5 canvas, WebGL, fabric.js, twgl.js library
Can I use framebuffer also?