refactor: use an array of passes instead of an object in CompositeEffectPass

Author: jsulpis

lib/src/effects/bloom.ts

@@ -21,7 +21,6 @@ const targetConfig = {
 export function bloom(params: BloomParams = {}) {
   const { levels = 8, radius = 0.65, mix = 0.5 } = params;
 
-  const passes: Record<string, EffectPass<any>> = {};
   const downsamplePasses: EffectPass<any>[] = [];
 
   // --- Downsample pyramid (progressively half resolution) ---
@@ -36,7 +35,6 @@ export function bloom(params: BloomParams = {}) {
       },
     });
     downsamplePasses.push(pass);
-    passes[`downsample${level}`] = pass;
   }
 
   // --- Upsample & accumulate ---
@@ -59,7 +57,6 @@ export function bloom(params: BloomParams = {}) {
       },
     });
     upsamplePasses.push(pass);
-    passes[`upsample${level}`] = pass;
   }
 
   // --- Combine original + bloom ---
@@ -71,9 +68,8 @@ export function bloom(params: BloomParams = {}) {
       uMix: mix,
     },
   });
-  passes["combine"] = combine;
 
-  const compositePass = useCompositeEffectPass(passes);
+  const compositePass = useCompositeEffectPass([...downsamplePasses, ...upsamplePasses, combine]);
 
   return {
     ...compositePass,

lib/src/hooks/useCompositeEffectPass.ts

@@ -8,27 +8,26 @@ import type {
   UpdatedCallback,
 } from "../types";
 
-export function useCompositeEffectPass<P extends Record<string, EffectPass<any>>>(
+export function useCompositeEffectPass<P extends EffectPass<any>[]>(
   passes: P,
 ): CompositeEffectPass<P> {
-  const effectPasses = Object.values(passes);
-  const outputPass = effectPasses.at(-1)!;
+  const outputPass = passes.at(-1)!;
 
   const [beforeRenderCallbacks, onBeforeRender] = useLifeCycleCallback<RenderCallback<any>>();
   const [afterRenderCallbacks, onAfterRender] = useLifeCycleCallback<RenderCallback<any>>();
   const [onUpdatedCallbacks, onUpdated] = useLifeCycleCallback<UpdatedCallback<any>>();
 
   function render() {
     for (const callback of beforeRenderCallbacks) callback({ uniforms: {} });
-    for (const pass of effectPasses) pass.render();
+    for (const pass of passes) pass.render();
     for (const callback of afterRenderCallbacks) callback({ uniforms: {} });
   }
 
   function initialize(gl: WebGL2RenderingContext) {
-    for (const [index, pass] of effectPasses.entries()) {
+    for (const [index, pass] of passes.entries()) {
       pass.initialize(gl);
 
-      if (index < effectPasses.length - 1 && pass.target == undefined) {
+      if (index < passes.length - 1 && pass.target == undefined) {
         pass.setTarget(createRenderTarget(gl));
       }
 
@@ -41,7 +40,7 @@ export function useCompositeEffectPass<P extends Record<string, EffectPass<any>>
   }
 
   function setSize(size: { width: number; height: number }) {
-    for (const pass of effectPasses) {
+    for (const pass of passes) {
       pass.setSize(size);
     }
   }

lib/src/hooks/useCompositor.ts

@@ -12,7 +12,7 @@ import type { CompositeEffectPass, EffectPass, RenderPass } from "../types";
 export function useCompositor(
   gl: WebGL2RenderingContext,
   renderPass: RenderPass<any>,
-  effects: Array<EffectPass<any> | CompositeEffectPass<Record<string, EffectPass<any>>>>,
+  effects: Array<EffectPass<any> | CompositeEffectPass<EffectPass<any>[]>>,
 ) {
   if (effects.length > 0 && renderPass.target === null) {
     renderPass.setTarget(createRenderTarget(gl));
@@ -29,7 +29,7 @@ export function useCompositor(
 
     if (isCompositeEffectPass(effect)) {
       const inputPass = previousPass;
-      for (const effectPass of Object.values(effect.passes)) {
+      for (const effectPass of effect.passes) {
         const previousPassRef = previousPass;
         setupEffectPass(effectPass, previousPassRef, inputPass);
         previousPass = effectPass;
@@ -60,7 +60,7 @@ export function useCompositor(
 function isCompositeEffectPass(
   effect: EffectPass | CompositeEffectPass<any>,
 ): effect is CompositeEffectPass<any> {
-  return typeof (effect as CompositeEffectPass).passes === "object";
+  return Array.isArray((effect as CompositeEffectPass).passes);
 }
 
 function setupEffectPass(

lib/src/types.ts

@@ -58,7 +58,7 @@ export interface RenderPass<U extends Uniforms = Record<string, never>> extends
 export type EffectPass<U extends Uniforms = Record<string, never>> = RenderPass<U>;
 
 export interface CompositeEffectPass<
-  P extends Record<string, EffectPass<any>> = Record<string, EffectPass<never>>,
+  P extends EffectPass<any>[] = EffectPass<never>[],
 > extends Omit<EffectPass, "fragment" | "vertex" | "uniforms"> {
   passes: P;
 }