Unable to activate preserveDrawingBuffer

[ajayns]

In a scene, I'd like to keep the previous frame under the new one with a lower opacity to simulate trail effects or so. For this, I generally just activate preserveDrawingBuffer and then add a Plane that reduces opacity.

Using r3f, I'm unable to set the preserveDrawingBuffer using the following code according to documentation:

<Canvas gl={{ preserveDrawingBuffer: true }} >
  ...

Am I doing something wrong with the code, or is an alternative method preferred for this?

[drcmda]

why do you think it didnt go through? what you do is correct, i dont see how it could not end up in webglrenderer

if (canvasRef.current) {
  const params = { antialias: true, alpha: true, ...props.gl }
  const temp = new WebGLRenderer({
    canvas: canvasRef.current,
    context: props.gl2 ? (canvasRef.current.getContext('webgl2', params) as WebGLRenderingContext) : undefined,
    ...params,

according to that bit of code, if props.gl contains preserveDrawingBuffer it must be accessible in the webglrenderer constructor.

can you show me the plain threejs thing that you want to realize?

[ajayns]

Yep I went through the source as well and still wasn't able to find what was up - which is why I asked the question. Let me create a simple sandbox to try illustrate the problem. Will get back to you

[ajayns]

Oops seems like it was something to do with sandbox as the code update didn't update the preview properly. Sorry about that.

Quick question though, what is the optimal way to set a property? Parameters seem straightforward but for properties I'll have to do something similar to the following in a component inside the Canvas:

const { gl } = useThree();
gl.autoClear = false;

Is there a way to set this at the top itself like it's possible for properties?

[ajayns]

Also, thanks a bunch for the quick response, I appreciate the support! @drcmda

[drcmda]

You can use onCreated on the canvas, it's a callback that gives you the state model once the canvas is established, in there you can set props

[ajayns]

Perfect! Thanks for the help!