disclaimer: the links to my work in progress contain nudity. I consider the images as art, but I want to inform you about that before you click.
I am working on an audiovisual project. First, I was doing everything with a normal canvas and with loadpixels(). You can see a prototype over here:http://hilk.eu/packungsbeilage/paradoxes6/.
The visuals are based on a huge image (1920x20,000px) of which only a small portion is shown. Although the image is huge, this is working quite well if it is loaded in the preload() block.
The project is quite heavy on CPU, but it is doing quite ok, if you consider that I also recalculate every pixel on a full screen canvas to do some color effects.
Now, I had the idea to optimise the concept with a WebGL Shader, which would it also make easier to ad some distortions, etc.
However, the website crashes with an WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost error when I put this big image file in the preload block (even without using the image in the processing afterwards), although this was not a problem at all with a normal canvas.
Here is an example of what I try to do with the shader, but with a much smaller file.
Any ideas which approach I could take?