How Do I Use an HTML5 Canvas as a WebGL Texture

Question

I want to:

1. Set Uniform values for case i.
2. Render compute shader for case i to an HTML5 <canvas> tag.
3. Use the <canvas> contents (case i render output) as a texture in the next render pass.
4. Repeat for all cases.
5. Extract answers into JS from color data.

I'm trying to make a compute shader and need to carry a value per pixel (fragment) on each render pass. A simple example would be incrementing the blue value of a pixel on each render call.

I.e.

pass 1: b=1
pass 2: b=2
pass 2: b=3
etc.

1. Is this kind of a shader loop even possible?

2. Is there a better way to keep a'carry' texture in video memory for multipass processing (where uniform values must change between passes, unlike standard in-shader multipass processing)?

Answer 1

The short answer is you can't

You can't currently access the canvas as a texture. Some other solutions

1. Copy the canvas to a texture

   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, gl.canvas);
   

   Will copy the current contents of the canvas into a textxure.

2. Render to your own texture by attaching it to a framebuffer.

   In this case you'd render to a texture that is set as an attachment to a framebuffer and then render that texture to the canvas (assuming you want to see the result and not just do math). There's an example here and here.