Render without clearing the previous frame

Questions
1

Hi,

I am very new to threeJs and I’ve set myself a challenge to find a way to re-create a photo by progressively drawing shapes on canvas for a pointillism effect.

I’ve done this before in processing but I can’t find an easy way in threeJs to keep drawing on the canvas without it being cleared on every frame. I imagine drawing on the same buffer is way more efficient than keep adding thousands of shapes into the scene.

I tried to repurpose this examples or recreate this without much luck, probably because I am still trying to figure out the general process.

Do you have any pointers, or have you maybe come across any other examples that may be useful for what I am after?

thank you

image

2

Do you mean an effect similar to this example?

If yes, you can do that by disabling the drawing buffer refresh, when you create the renderer:

const renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });
renderer.autoClearColor = false;

Mind it will not work if the scene had any background (background would serve as a clear-color), so you can do 3D rendering on a transparent canvas and add a background using CSS.

1 Like
3

You could set the background to a color or texture for the first render and then set it to transparent for the rest.

1 Like
4

Yes that did it. Thank you so much for the quick reply.

I now have to figure out how to get the color values by sampling the html image. I may get back with more questions.