WebGL - How to render large texture?
image, memory-management, textures, webgl
Solution
It's unlikely that one 8mp image is going to exceed the available ram. At RGB (byte) it would occupy 24mb of ram. Even at half floating point precision it'd be 50mb of ram. ARM systems use a unified ram architecture where the GPU and CPU share the ram. The iPhone for instance has 1gb of ram available.
Texturing support should be up to the desired size (for instance 3264x2248) which seems to be no problem on high end mobiles (4096x4096 supported by 81% of mobiles).
It's possible the maximum drawingbuffer size is smaller than the maximum supported texture size (you can query that).
Other than that, you might simply be running into a bug, which is annoying. So the way to deal with that is that you subdivide your image into smaller tiles and process each tile one at a time.
There are two ways you can deal with borders if you have filter kernels.
- You could pass in 9 textures and branch on texture lookup to address the correct one (that might be slow, some GPUs don't support branching and will execute all codepaths). Border textures would just be 2x2 so would have little ram footprint. Note that between textures there would be no interpolation, so don't rely on it, or substitute your own.
- You could add a half kernel sized border around each tile taking pixels from neighboring tiles in a preprocessing step.
Problem
I'm trying to do some image processing in WebGL. But if I try to load large pictures (from camera - 8 MP) in a GLSL texture on mobile devices, the browser crashes. Small pictures working fine. So I think it's running out of memory. I've googled a lot, but didn't find a solution. I think the best way would be to implement a "tile based" rendering. Splitting the 8 MP picture into smaller parts, render them and stick them together. But there will be problems, like applying a blur effect. You will see the edges of the "sub renderings". So I have to render overlapping pixels and "fade" them together. Didn't sound that good. Are there any solutions I don't think of? How to work with really huge textures on mobile devices?