Bake glsl shader into a Texture?

Questions
,
1

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:

2

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

3

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

1 Like
4

Are there any examples of this approach? I am confused.

I have a GLSL material and want to export baked in texture since, GLSL material applied to a mesh can’t be exported as GLTF files.

After creating a second canvas with preserveDrawingBuffer to true. How does one extract the texture information say as a png for use the baked in texture for GLTF files. :thinking: ?

This is something that I have been trying to do and came across this thread.