feat: allow to scale the render target of an effect pass

Author: jsulpis

lib/src/core/renderTarget.ts

@@ -2,9 +2,11 @@ import type { RenderTarget } from "../types";
 import type { DataTextureParams } from "./texture";
 import { fillTexture } from "./texture";
 
+export type RenderTargetParams = Partial<Omit<DataTextureParams, "data">>;
+
 export function createRenderTarget(
   gl: WebGL2RenderingContext,
-  params?: Omit<DataTextureParams, "data">,
+  params?: RenderTargetParams,
 ): RenderTarget {
   let _width = params?.width ?? gl.canvas.width;
   let _height = params?.height ?? gl.canvas.height;
@@ -14,10 +16,10 @@ export function createRenderTarget(
   let _texture = gl.createTexture()!;
   fillTexture(gl, _texture, {
     data: null,
-    ...params,
     width: _width,
     height: _height,
     generateMipmaps: false,
+    ...params,
   });
 
   gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
@@ -38,7 +40,6 @@ export function createRenderTarget(
     });
 
     gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-    gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 0, 0, width, height);
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, newTexture, 0);
 
     gl.bindFramebuffer(gl.FRAMEBUFFER, null);

lib/src/hooks/useEffectPass.ts

@@ -1,9 +1,42 @@
+import type { RenderTargetParams } from "../core/renderTarget";
+import { createRenderTarget } from "../core/renderTarget";
 import type { EffectPass, EffectUniforms } from "../types";
 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.
+   */
+  target?: RenderTargetParams | null;
+};
+
 export function useEffectPass<U extends EffectUniforms>(
-  options: QuadPassOptions<U>,
+  options: EffectPassOptions<U>,
 ): EffectPass<U> {
-  return useQuadRenderPass(undefined, options);
+  const { target, resolutionScale = 1 } = options;
+
+  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));
+    }
+    renderPassInitialize(gl);
+  };
+
+  return renderPass;
 }

lib/src/hooks/useQuadRenderPass.ts

@@ -42,13 +42,12 @@ export function useQuadRenderPass<U extends Uniforms>(
 }
 
 const quadVertexShaderSource = /*glsl*/ `#version 300 es
-
 in vec2 aPosition;
 out vec2 vUv;
 
 void main() {
-   gl_Position = vec4(aPosition, 0.0, 1.0);
-   vUv = (aPosition + 1.0) / 2.0;
+  gl_Position = vec4(aPosition, 0.0, 1.0);
+  vUv = (aPosition + 1.0) / 2.0;
 }
 `;
 

lib/src/hooks/useRenderPass.ts

@@ -37,7 +37,7 @@ export function useRenderPass<U extends Uniforms>(
     transformFeedbackVaryings,
   }: RenderPassOptions<U>,
 ): RenderPass<U> {
-  /**
+  /*
    * INIT
    */
 
@@ -77,7 +77,7 @@ export function useRenderPass<U extends Uniforms>(
     initialize(gl);
   }
 
-  /**
+  /*
    * UPDATE
    */
 
@@ -96,7 +96,7 @@ export function useRenderPass<U extends Uniforms>(
     _target = target;
   }
 
-  /**
+  /*
    * RENDER
    */