Bake glsl shader into a Texture?

Hey all, I have a mesh that is UV Unwrapped and has a glsl Shadermaterial applied to it. Is there a known way to bake that texture onto a render target and export that target as a png texture ?

Thanks a lot :slight_smile:

Iā€™m interested if a more straightforward method exist:
For now iā€™m using an off-screen scene providing an off-screen canvas to the renderer.
with preserveDrawingBuffer: true

//canvas for shader
const canvasShader = document.createElement("canvas");
canvasShader.width = canvasSizeX;
canvasShader.height = canvasSizeY;
const ctxShader = canvasShader.getContext("experimental-webgl",{preserveDrawingBuffer: true});

//renderer
const rendererShader = new THREE.WebGLRenderer({canvas: canvasShader, context: ctxShader, antialias: true, preserveDrawingBuffer: true});
rendererShader.setSize( canvasSizeX, canvasSizeY );
rendererShader.autoClear = false;

const sceneShader = new THREE.Scene();
const cameraShader = new THREE.OrthographicCamera();
cameraShader.position.set( 0, 0, 70 );
cameraShader.lookAt(0, 0, 0);

//draw quad
const planeShader = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
sceneShader.add(planeShader);

then I call a single draw (no loop needed)
rendererShader.render( sceneShader, cameraShader );

Using the canvas to generate an image/texture or whathever else is easy from this point

Just a quick post to confirm that @Oxyn approach is exactly what we are using right now. One small tip: creating a second canvas by code leads to a couple seconds blocking during initialization, specially on mobile (safari), so we create it in advance and make sure it is ready before rendering anything