feat: allow to render without clearing the canvas

Author: jsulpis

lib/src/core/renderTarget.ts

@@ -64,11 +64,18 @@ export function createRenderTarget(
   };
 }
 
-export function setRenderTarget(gl: WebGL2RenderingContext, target: RenderTarget | null) {
+export function setRenderTarget(
+  gl: WebGL2RenderingContext,
+  target: RenderTarget | null,
+  clear = true,
+) {
   const framebuffer = target?.framebuffer || null;
   const { width, height } = target || gl.canvas;
 
   gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   gl.viewport(0, 0, width, height);
+
+  if (clear) {
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+  }
 }

lib/src/hooks/useCompositor.ts

@@ -50,10 +50,10 @@ export function useCompositor(
 
   const allPasses = [renderPass, ...effects];
 
-  function render() {
+  function render({ clear }: { clear?: boolean } = {}) {
     executeBeforeRenderCallbacks();
-    for (const pass of allPasses) {
-      pass.render();
+    for (const [index, pass] of allPasses.entries()) {
+      pass.render(index === 0 ? { clear } : {});
     }
     executeAfterRenderCallbacks();
   }

lib/src/hooks/useRenderPass.ts

@@ -117,12 +117,12 @@ export function useRenderPass<U extends Uniforms>(
   const [onBeforeRender, executeBeforeRenderCallbacks] = useHook<RenderCallback<U>>();
   const [onAfterRender, executeAfterRenderCallbacks] = useHook<RenderCallback<U>>();
 
-  function render({ target }: { target?: RenderTarget | null } = {}) {
+  function render({ target, clear }: { target?: RenderTarget | null; clear?: boolean } = {}) {
     if (_gl == undefined) {
       throw new Error("The render pass must be initialized before calling the render function");
     }
 
-    setRenderTarget(_gl, target ?? _target);
+    setRenderTarget(_gl, target ?? _target, clear);
     _gl.useProgram(_program);
 
     if (transparent) {

lib/src/types.ts

@@ -43,7 +43,7 @@ export interface RenderTarget {
 }
 
 export interface RenderPass<U extends Uniforms = Record<string, never>> extends Resizable {
-  render: (opts?: { target?: RenderTarget | null }) => void;
+  render: (opts?: { target?: RenderTarget | null; clear?: boolean }) => void;
   target: RenderTarget | null;
   setTarget: (target: RenderTarget | null) => void;
   uniforms: U;