How Do I Use an HTML5 Canvas as a WebGL Texture
canvas, compute-shader, textures, webgl
Solution
The short answer is you can't
You can't currently access the canvas as a texture. Some other solutions
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 texture.
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.
Problem
I want to: - Set Uniform values for case i. - Render compute shader for case i to an HTML5 `<canvas>` tag. - Use the `<canvas>` contents (case i render output) as a texture in the next render pass. - Repeat for all cases. - 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. ``` Is this kind of a shader loop even possible? 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)?