feat: add hooks for initialize and resize

Author: jsulpis

lib/src/effects/trails/index.ts

@@ -69,43 +69,58 @@ export function trails(params?: TrailsParams) {
     },
   });
 
-  const uniforms = Object.defineProperty(trailPass.uniforms, "uErosion", {
-    get() {
+  const uniforms = {
+    get uErosion() {
       return erosion;
     },
-    set(value: number) {
+    set uErosion(value: number) {
       erosion = value;
       trailPass.uniforms.uKernelSize = [
         Math.sqrt(erosion) / fboRead.width,
         Math.sqrt(erosion) / fboRead.height,
       ];
     },
-  }) as typeof trailPass.uniforms & { uErosion: number };
+    get uFadeout() {
+      return trailPass.uniforms.uFadeout;
+    },
+    set uFadeout(value: number) {
+      trailPass.uniforms.uFadeout = value;
+    },
+    get uTailColor() {
+      return trailPass.uniforms.uTailColor;
+    },
+    set uTailColor(value: [number, number, number, number]) {
+      trailPass.uniforms.uTailColor = value;
+    },
+    get uTailColorFalloff() {
+      return trailPass.uniforms.uTailColorFalloff;
+    },
+    set uTailColorFalloff(value: number) {
+      trailPass.uniforms.uTailColorFalloff = value;
+    },
+  };
 
   const trailsPass = useCompositeEffectPass([trailPass, outputPass], uniforms);
 
-  const originalLightTrailsSetSize = trailsPass.setSize;
-  trailsPass.setSize = (size: { width: number; height: number }) => {
-    originalLightTrailsSetSize(size);
-    fboRead.setSize(size.width, size.height);
-    fboWrite.setSize(size.width, size.height);
+  trailsPass.onResize((width, height) => {
+    fboRead.setSize(width, height);
+    fboWrite.setSize(width, height);
 
     trailPass.uniforms.uKernelSize = [
       Math.sqrt(erosion) / fboRead.width,
       Math.sqrt(erosion) / fboRead.height,
     ];
-  };
+  });
 
-  const originalInitializeFn = trailsPass.initialize;
-  trailsPass.initialize = (gl) => {
-    originalInitializeFn(gl);
+  trailsPass.onInit((gl) => {
     fboRead = createRenderTarget(gl, floatTargetConfig);
     fboWrite = createRenderTarget(gl, floatTargetConfig);
-  };
+  });
 
   trailsPass.onBeforeRender(() => {
     trailPass.setTarget(fboWrite);
   });
+
   trailsPass.onAfterRender(swap);
 
   return trailsPass;

lib/src/hooks/useCompositeEffectPass.ts

@@ -17,6 +17,9 @@ export function useCompositeEffectPass<U extends Uniforms = Record<string, never
   const [beforeRenderCallbacks, onBeforeRender] = useLifeCycleCallback<RenderCallback<any>>();
   const [afterRenderCallbacks, onAfterRender] = useLifeCycleCallback<RenderCallback<any>>();
   const [onUpdatedCallbacks, onUpdated] = useLifeCycleCallback<UpdatedCallback<any>>();
+  const [onResizeCallbacks, onResize] =
+    useLifeCycleCallback<(width: number, height: number) => void>();
+  const [onInitCallbacks, onInit] = useLifeCycleCallback<(gl: WebGL2RenderingContext) => void>();
 
   function render() {
     for (const callback of beforeRenderCallbacks) callback({ uniforms: {} });
@@ -34,12 +37,18 @@ export function useCompositeEffectPass<U extends Uniforms = Record<string, never
         }
       });
     }
+    for (const callback of onInitCallbacks) {
+      callback(gl);
+    }
   }
 
   function setSize(size: { width: number; height: number }) {
     for (const pass of passes) {
       pass.setSize(size);
     }
+    for (const callback of onResizeCallbacks) {
+      callback(size.width, size.height);
+    }
   }
 
   function setTarget(target: RenderTarget | null) {
@@ -55,6 +64,8 @@ export function useCompositeEffectPass<U extends Uniforms = Record<string, never
     onBeforeRender,
     onAfterRender,
     onUpdated,
+    onResize,
+    onInit,
     initialize,
     render,
     setSize,

lib/src/hooks/useEffectPass.ts

@@ -5,10 +5,6 @@ import type { QuadPassOptions } from "./useQuadRenderPass";
 import { useQuadRenderPass } from "./useQuadRenderPass";
 
 type EffectPassOptions<U extends EffectUniforms> = Omit<QuadPassOptions<U>, "target"> & {
-  /**
-   * Allow to scale the render target texture based on size given to the pass.
-   */
-  resolutionScale?: number;
   /**
    * Params to create the render target of the pass.
    */
@@ -27,27 +23,16 @@ export function useEffectPass<U extends EffectUniforms>(
 
   const renderPass = useQuadRenderPass(undefined, { ...options, target: null });
 
-  const renderPassSetSize = renderPass.setSize;
-  renderPass.setSize = function ({ width, height }) {
-    renderPassSetSize({
-      width: Math.ceil(width * resolutionScale),
-      height: Math.ceil(height * resolutionScale),
-    });
-  };
-
-  const renderPassInitialize = renderPass.initialize;
-  renderPass.initialize = function (gl) {
-    if (target != null && !("framebuffer" in target)) {
-      renderPass.setTarget(
-        createRenderTarget(gl, {
-          ...target,
-          width: (target.width ?? gl.canvas.width) * resolutionScale,
-          height: (target.height ?? gl.canvas.height) * resolutionScale,
-        }),
-      );
-    }
-    renderPassInitialize(gl);
-  };
+  renderPass.onInit((gl) => {
+    if (target == null || "framebuffer" in target) return;
+    renderPass.setTarget(
+      createRenderTarget(gl, {
+        ...target,
+        width: (target.width ?? gl.canvas.width) * resolutionScale,
+        height: (target.height ?? gl.canvas.height) * resolutionScale,
+      }),
+    );
+  });
 
   return renderPass;
 }

lib/src/hooks/useRenderPass.ts

@@ -22,6 +22,7 @@ export type RenderPassOptions<U extends Uniforms = Record<string, never>> = {
   transparent?: boolean;
   drawMode?: DrawMode;
   transformFeedbackVaryings?: string[];
+  resolutionScale?: number;
 };
 
 export function useRenderPass<U extends Uniforms>(
@@ -35,6 +36,7 @@ export function useRenderPass<U extends Uniforms>(
     transparent = false,
     drawMode: userDrawMode,
     transformFeedbackVaryings,
+    resolutionScale = 1,
   }: RenderPassOptions<U>,
 ): RenderPass<U> {
   /*
@@ -60,6 +62,8 @@ export function useRenderPass<U extends Uniforms>(
     indexType,
   } = useAttributes(attributes);
 
+  const [initCallbacks, onInit] = useLifeCycleCallback<(gl: WebGL2RenderingContext) => void>();
+
   function initialize(gl: WebGL2RenderingContext) {
     _gl = gl;
     const program = createProgram(_gl, fragment, vertex, transformFeedbackVaryings);
@@ -71,6 +75,10 @@ export function useRenderPass<U extends Uniforms>(
 
     initializeUniforms(_gl, _program);
     initializeAttributes(_gl, _program);
+
+    for (const callback of initCallbacks) {
+      callback(_gl);
+    }
   }
 
   if (gl) {
@@ -83,12 +91,21 @@ export function useRenderPass<U extends Uniforms>(
 
   const resolutionUniformName = findUniformName(fragment + vertex, "resolution");
 
+  const [resizeCallbacks, onResize] =
+    useLifeCycleCallback<(width: number, height: number) => void>();
+
   function setSize(size: { width: number; height: number }) {
+    const width = size.width * resolutionScale;
+    const height = size.height * resolutionScale;
+
     if (resolutionUniformName && userUniforms[resolutionUniformName] === undefined) {
-      (uniformsProxy as Record<string, unknown>)[resolutionUniformName] = [size.width, size.height];
+      (uniformsProxy as Record<string, unknown>)[resolutionUniformName] = [width, height];
     }
     if (_target != null) {
-      _target.setSize(size.width, size.height);
+      _target.setSize(width, height);
+    }
+    for (const callback of resizeCallbacks) {
+      callback(width, height);
     }
   }
 
@@ -152,5 +169,7 @@ export function useRenderPass<U extends Uniforms>(
     onUpdated,
     onBeforeRender,
     onAfterRender,
+    onInit,
+    onResize,
   };
 }

lib/src/types.ts

@@ -52,6 +52,8 @@ export interface RenderPass<U extends Uniforms = Record<string, never>> extends
   onUpdated: (callback: UpdatedCallback<U>) => void;
   onBeforeRender: (callback: RenderCallback<U>) => void;
   onAfterRender: (callback: RenderCallback<U>) => void;
+  onInit: (callback: (gl: WebGL2RenderingContext) => void) => void;
+  onResize: (callback: (width: number, height: number) => void) => void;
   initialize: (gl: WebGL2RenderingContext) => void;
 }