fix: fix broken render targets on effects

Author: jsulpis

lib/playground/src/pages/post-processing/bloom.astro

@@ -14,13 +14,13 @@ import Layout from "../../layouts/Layout.astro";
   const { onAfterRender } = useWebGLCanvas({
     canvas: "#glCanvas",
     fragment: fragment,
-    uniforms: {
-      uTexture: loadTexture(
-        "https://st.depositphotos.com/2300153/2648/i/950/depositphotos_26489675-stock-photo-dark-room-with-window.jpg",
-        // "https://st.depositphotos.com/8521256/56706/v/600/depositphotos_567060820-stock-video-white-picture-of-rectangle-on.jpg",
-        { colorSpace: "srgb" }
-      ),
-    },
+    // uniforms: {
+    //   uTexture: loadTexture(
+    //     "https://st.depositphotos.com/2300153/2648/i/950/depositphotos_26489675-stock-photo-dark-room-with-window.jpg",
+    //     // "https://st.depositphotos.com/8521256/56706/v/600/depositphotos_567060820-stock-video-white-picture-of-rectangle-on.jpg",
+    //     { colorSpace: "srgb" }
+    //   ),
+    // },
     postEffects: [bloom({ levels, radius, mix }), linearToSRGB()],
   });
 
@@ -30,10 +30,3 @@ import Layout from "../../layouts/Layout.astro";
 <Layout title="Bloom">
   <canvas id="glCanvas"></canvas>
 </Layout>
-
-<style>
-  canvas {
-    width: 600px;
-    height: 600px;
-  }
-</style>

lib/src/effects/bloom/index.ts

@@ -1,18 +1,26 @@
 import { useCompositeEffectPass } from "../../hooks/useCompositeEffectPass";
 import { useEffectPass } from "../../hooks/useEffectPass";
-import type { CompositeEffectPass, EffectPass } from "../../types";
+import type { EffectPass } from "../../types";
 
 import downsampleFragment from "./glsl/downsample.frag?raw";
 import sampleVertex from "./glsl/sample.vert?raw";
 import upsampleFragment from "./glsl/upsample.frag?raw";
 import combineFragment from "./glsl/combine.frag?raw";
+import { RenderTargetParams } from "../../core/renderTarget";
 
 export type BloomParams = {
   levels?: number;
   radius?: number;
   mix?: number;
 };
 
+const floatTargetConfig: RenderTargetParams = {
+  internalFormat: WebGL2RenderingContext.RGBA16F,
+  type: WebGL2RenderingContext.HALF_FLOAT,
+  minFilter: "linear",
+  magFilter: "linear",
+};
+
 export function bloom(params: BloomParams = {}) {
   const { levels = 8, radius = 0.65, mix = 0.5 } = params;
 
@@ -22,6 +30,7 @@ export function bloom(params: BloomParams = {}) {
   for (let level = 1; level <= levels; level++) {
     const pass = useEffectPass({
       fragment: downsampleFragment,
+      target: floatTargetConfig,
       vertex: sampleVertex,
       resolutionScale: 1 / 2 ** level,
       uniforms: {
@@ -37,6 +46,7 @@ export function bloom(params: BloomParams = {}) {
   for (let level = levels - 1; level >= 1; level--) {
     const pass = useEffectPass({
       fragment: upsampleFragment,
+      target: floatTargetConfig,
       vertex: sampleVertex,
       resolutionScale: 1 / 2 ** level,
       uniforms: {
@@ -55,6 +65,7 @@ export function bloom(params: BloomParams = {}) {
   // --- Combine original + bloom ---
   const combine = useEffectPass({
     fragment: combineFragment,
+    target: floatTargetConfig,
     uniforms: {
       uImage: ({ inputPass }) => inputPass.target!.texture,
       uBloomTexture: ({ previousPass }) => previousPass.target!.texture,

lib/src/hooks/useCompositeEffectPass.ts

@@ -1,4 +1,3 @@
-import { createRenderTarget } from "../core/renderTarget";
 import { useLifeCycleCallback } from "../internal/useLifeCycleCallback";
 import type {
   CompositeEffectPass,
@@ -24,13 +23,9 @@ export function useCompositeEffectPass<P extends EffectPass<any>[]>(
   }
 
   function initialize(gl: WebGL2RenderingContext) {
-    for (const [index, pass] of passes.entries()) {
+    for (const pass of passes) {
       pass.initialize(gl);
 
-      if (index < passes.length - 1 && pass.target == undefined) {
-        pass.setTarget(createRenderTarget(gl));
-      }
-
       pass.onUpdated((newUniforms, oldUniforms) => {
         for (const callback of onUpdatedCallbacks) {
           callback(newUniforms, oldUniforms);
@@ -50,7 +45,9 @@ export function useCompositeEffectPass<P extends EffectPass<any>[]>(
   }
 
   return {
-    target: outputPass.target,
+    get target() {
+      return outputPass.target;
+    },
     passes,
     onBeforeRender,
     onAfterRender,

lib/src/hooks/useCompositor.ts

@@ -14,6 +14,9 @@ export function useCompositor(
   renderPass: RenderPass<any>,
   effects: Array<EffectPass<any> | CompositeEffectPass<EffectPass<any>[]>>,
 ) {
+  // add the ability to render to floating-point buffers
+  gl.getExtension("EXT_color_buffer_float");
+
   if (effects.length > 0 && renderPass.target === null) {
     renderPass.setTarget(createRenderTarget(gl));
   }
@@ -23,8 +26,8 @@ export function useCompositor(
   for (const [index, effect] of effects.entries()) {
     effect.initialize(gl);
 
-    if (index < effects.length - 1 && effect.target == undefined) {
-      effect.setTarget(createRenderTarget(gl));
+    if (index === effects.length - 1 && effect.target !== null) {
+      effect.setTarget(null);
     }
 
     if (isCompositeEffectPass(effect)) {

lib/src/hooks/useEffectPass.ts

@@ -15,10 +15,15 @@ type EffectPassOptions<U extends EffectUniforms> = Omit<QuadPassOptions<U>, "tar
   target?: RenderTargetParams | null;
 };
 
+const effectTargetConfig: RenderTargetParams = {
+  minFilter: "nearest",
+  magFilter: "nearest",
+};
+
 export function useEffectPass<U extends EffectUniforms>(
   options: EffectPassOptions<U>,
 ): EffectPass<U> {
-  const { target, resolutionScale = 1 } = options;
+  const { target = effectTargetConfig, resolutionScale = 1 } = options;
 
   const renderPass = useQuadRenderPass(undefined, { ...options, target: null });
 

lib/src/hooks/usePingPongFBO.ts

@@ -21,7 +21,7 @@ export function usePingPongFBO<U extends Uniforms>(
   gl: WebGL2RenderingContext,
   { uniforms = {} as U, dataTexture, fragment }: PingPongFBOOptions<U>,
 ) {
-  // enable the extension for float textures
+  // add the ability to render to 32-bit floating-point buffers
   gl.getExtension("EXT_color_buffer_float");
 
   const { initialData, name: dataTextureName = "tData" } = dataTexture;