image - WebGL - How to render large texture? -

image - WebGL - How to render large texture? -

i'm trying image processing in webgl. if seek load big pictures (from photographic camera - 8 mp) in glsl texture on mobile devices, browser crashes. little pictures working fine. think it's running out of memory.

i've googled lot, didn't find solution. think best way implement "tile based" rendering. splitting 8 mp image smaller parts, render them , stick them together. there problems, applying blur effect. see edges of "sub renderings". have render overlapping pixels , "fade" them together. didn't sound good.

are there solutions don't think of? how work huge textures on mobile devices?

what need tiles work provide plenty input @ boundary cover non-locality of image processing effects — e.g. radius of blur kernel. simplest thing can think of is:

for each tile of output image, load corresponding input tile and 8 neighbors. run blur filter using 9 input: phone call texture2d, instead utilize (custom) function takes coordinates , looks them in appropriate 1 of 9 textures.

to utilize fewer textures, offset output tiles compared input tiles half side length in both dimensions; need utilize 4 input tiles each tile computation, have border in output tiles if utilize plenty tiles cover of input. (on other hand, can thing if smart trimming afterward; example, if apply drop-shadow input image, i'd like have shadow enlarge output rather truncated @ original boundary.)

if correctly, there should no artifacts @ tile boundaries.

(disclaimer: while solution seems simple, obvious, , right me, not expert @ either image processing or gpu resource conservation. there may reasons why doesn't work, or much improve ideas out there.)

image memory-management webgl textures