Getting image from WebGLTexture?

Question

WordPress

I draw in a FrameBuffer so that I can use it later as a texture.

const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER,  gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, targetTexture, level);

drawAnything();

gl.bindFramebuffer(gl.FRAMEBUFFER, null);

Everything is fine, the desired image is drawn in the targetTexture, which I will use later.
But the problem is that the content of this texture needs to be rendered as a separate image.
In WebGL, you can usually convert a canvas to an image by getting toDataURL(). But the canvas actually remains untouched, everything went into the texture, and in order for me to get the texture on this canvas in the same way, I need to render it there, and then with the same toDataURL().
It seems to be a good method, considering that toDataURL() will still take most of the performance, but are there other methods?

Answer 1

The question is asked a little strange, I thought several developers are several programmers. Are you just filling up?
If your filling lasts, conditionally, a week, you can set up hosting on VPS and take more powerful hardware, you can even raise VPS on your home / office server. And later, fill in the result where you want, import / export is easily done.

Answer 2

This is WordPress - most likely the hosting is down, look for a normal host with a normal CPU load factor for you, or buy a VDS and enjoy life.

Answer 3

Initially, there was a question about getting a texture from what was rendered. As an output - rendered in frame buffer. Because of this, another problem appeared - you need to display the rendered on the canvas. The way out is to draw a texture (which is drawn from another FBO) to the default frame buffer.
Of course, then it was necessary to copy the texture, since you cannot use it and draw into it.
Okay, I found methods. It is not an option to create another frame buffer, after all, a lot of code will turn out. There is a
copyTexSubImage2D() method - it copies data from the current frame buffer to the active texture. Exactly what is needed! It turns out that the need for FBO disappears immediately, since you can get the texture from the default buffer.

var texture = gl.createTexture();

gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, element.width, element.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 0, 0, element.width, element.height);