Fix postprocessing not working (#312)

itsdouges · mommysgoodpuppy · triplex-bot · commit f147379c478c · 2025-03-28T19:13:08.000+11:00
adeira-source-id: f61dd89 Co-authored-by: mommysgoodpuppy <theelectronicfreezer@gmail.com>
diff --git a/.changeset/famous-bugs-camp.md b/.changeset/famous-bugs-camp.md
@@ -0,0 +1,7 @@
+---
+"@triplex/renderer": patch
+"@triplex/electron": patch
+"triplex-vsce": patch
+---
+
+Testing a fix for running postprocessing, it will be gradually rolled out.
diff --git a/examples/caustics/.triplex/config.json b/examples/caustics/.triplex/config.json
@@ -2,5 +2,6 @@
   "$schema": "https://triplex.dev/config.schema.json",
   "components": ["../src/components/**/*.tsx"],
   "files": ["../src/**/*.tsx"],
-  "renderer": "../../../packages/renderer/src/index.tsx"
+  "renderer": "../../../packages/renderer/src/index.tsx",
+  "provider": "./provider.tsx"
 }
diff --git a/examples/caustics/.triplex/provider.tsx b/examples/caustics/.triplex/provider.tsx
@@ -0,0 +1,33 @@
+import {
+  Bloom,
+  DepthOfField,
+  EffectComposer,
+  Noise,
+  Vignette,
+} from "@react-three/postprocessing";
+import { ReactNode } from "react";
+
+export function CanvasProvider({
+  children,
+  postProcessing = true,
+}: {
+  children: ReactNode;
+  postProcessing?: boolean;
+}) {
+  return (
+    <>
+      <EffectComposer enabled={postProcessing}>
+        <DepthOfField
+          focusDistance={0}
+          focalLength={0.02}
+          bokehScale={2}
+          height={480}
+        />
+        <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />
+        <Noise opacity={0.02} />
+        <Vignette eskil={false} offset={0.1} darkness={1.1} />
+      </EffectComposer>
+      {children}
+    </>
+  );
+}
diff --git a/examples/caustics/package.json b/examples/caustics/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "@react-three/drei": "^10.0.0",
     "@react-three/fiber": "^9.0.4",
+    "@react-three/postprocessing": "^3.0.4",
     "@types/react": "^19.0.8",
     "@types/three": "^0.171.0",
     "react": "^19.0.0",
diff --git a/examples/caustics/tsconfig.json b/examples/caustics/tsconfig.json
@@ -14,6 +14,6 @@
     "skipLibCheck": true,
     "strict": true
   },
-  "include": ["."],
+  "include": [".", ".triplex/*"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/renderer/src/features/camera-new/cameras.tsx b/packages/renderer/src/features/camera-new/cameras.tsx
@@ -6,6 +6,7 @@
  */
 import { useFrame, useThree } from "@react-three/fiber";
 import { on } from "@triplex/bridge/client";
+import { fg } from "@triplex/lib/fg";
 import {
   useContext,
   useEffect,
@@ -133,11 +134,54 @@ export function Cameras({ children }: { children: ReactNode }) {
     }
   }, [activeCamera, playState]);
 
-  useFrame(({ gl, scene }) => {
-    if (activeCamera) {
-      gl.render(scene, activeCamera);
+  useEffect(() => {
+    if (!gl || !activeCamera || !fg("camera_pp_fix")) {
+      return;
     }
-  }, 1);
+
+    const originalRender = gl.render;
+
+    /**
+     * This hijacks the existing GL render function to forcibly switch what
+     * camera is being used. This enables postprocessing to do its thing without
+     * Triplex having to do more work to support it.
+     */
+    gl.render = function (scene, camera, ...args) {
+      // only patch defaultCamera calls to preserve triplex ui correctly
+      if (activeState === "editor" && camera === defaultCamera) {
+        return originalRender.call(this, scene, activeCamera, ...args);
+      }
+
+      return originalRender.call(this, scene, camera, ...args);
+    };
+
+    return () => {
+      gl.render = originalRender;
+    };
+  }, [gl, activeCamera, activeState, defaultCamera]);
+
+  useFrame(
+    ({ gl, scene }) => {
+      if (fg("camera_pp_fix")) {
+        if (activeCamera) {
+          /**
+           * This is complementary to the render hijack above, postprocessing
+           * effects can disable clear which causes selection outlines to hang.
+           */
+          gl.autoClear = true;
+          // gl.render call needed components without pp
+          gl.render(scene, activeCamera);
+        }
+      } else {
+        if (activeCamera) {
+          gl.render(scene, activeCamera);
+        }
+      }
+    },
+    // We use 0.5 here so it's ran before postprocessing.
+    // See: https://github.com/pmndrs/react-postprocessing/blob/master/src/EffectComposer.tsx#L63
+    fg("camera_pp_fix") ? 0.5 : 1,
+  );
 
   const context: ActiveCameraContextValue = useMemo(
     () => (activeCamera ? { camera: activeCamera, type: activeState } : null),
diff --git a/yarn.lock b/yarn.lock
@@ -1118,7 +1118,7 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"
   integrity sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==
 
-"@react-three/drei@^10.0.0", "triplex-drei@npm:@react-three/drei@^10.0.0":
+"@react-three/drei@^10.0.0":
   version "10.0.3"
   resolved "https://registry.yarnpkg.com/@react-three/drei/-/drei-10.0.3.tgz#323aaa5c6779244a0f68a29ec6080deb9b79ae2b"
   integrity sha512-uDjYCH1zmVGlFwGSpxKkq71doETdvZnO6ZKcNG5EXACGGpdfxEff4yO5qb9VYuAGyS0uEcb4dowVruJgXDCqEA==
@@ -1163,6 +1163,15 @@
     use-sync-external-store "^1.4.0"
     zustand "^5.0.3"
 
+"@react-three/postprocessing@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@react-three/postprocessing/-/postprocessing-3.0.4.tgz#e2379eb0b953d1cc0c4b8ac94dc76256f4c07062"
+  integrity sha512-e4+F5xtudDYvhxx3y0NtWXpZbwvQ0x1zdOXWTbXMK6fFLVDd4qucN90YaaStanZGS4Bd5siQm0lGL/5ogf8iDQ==
+  dependencies:
+    maath "^0.6.0"
+    n8ao "^1.9.4"
+    postprocessing "^6.36.6"
+
 "@react-three/rapier@^1.4.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@react-three/rapier/-/rapier-1.5.0.tgz#f6af5b1dd6895a73df0d09e15576eed1f0398379"
@@ -6673,6 +6682,11 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
+n8ao@^1.9.4:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/n8ao/-/n8ao-1.9.4.tgz#be222531fddcb5099614be452fc492db98a2947d"
+  integrity sha512-gbpAorQecZn2oGK/rheHxPTNwOxVsEC6216+Jr9tXHUk9L5VCE2q/uxsSrQpfNkZDoCmQHf7oSg3SYFWCAt0wg==
+
 nanoid@^3.3.6, nanoid@^3.3.8:
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
@@ -7304,6 +7318,11 @@ postcss@^8.4.23, postcss@^8.4.32, postcss@^8.5.1:
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
+postprocessing@^6.36.6:
+  version "6.37.1"
+  resolved "https://registry.yarnpkg.com/postprocessing/-/postprocessing-6.37.1.tgz#643c9acf1d4addc4f98f91dc1ee578a258b462f3"
+  integrity sha512-fZszlSB8j+PaxtS8g4qMxdj+ifzvoCPnbHSOjclTlr4mbhd6/huQqOViM6lhhPIrW2fiZc+IRcnReoKYvyMwNg==
+
 potpack@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/potpack/-/potpack-1.0.2.tgz#23b99e64eb74f5741ffe7656b5b5c4ddce8dfc14"
@@ -8245,8 +8264,16 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8352,7 +8379,14 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -8679,6 +8713,33 @@ trim-repeated@^2.0.0:
   dependencies:
     escape-string-regexp "^5.0.0"
 
+"triplex-drei@npm:@react-three/drei@^10.0.0":
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/@react-three/drei/-/drei-10.0.3.tgz#323aaa5c6779244a0f68a29ec6080deb9b79ae2b"
+  integrity sha512-uDjYCH1zmVGlFwGSpxKkq71doETdvZnO6ZKcNG5EXACGGpdfxEff4yO5qb9VYuAGyS0uEcb4dowVruJgXDCqEA==
+  dependencies:
+    "@babel/runtime" "^7.26.0"
+    "@mediapipe/tasks-vision" "0.10.17"
+    "@monogrid/gainmap-js" "^3.0.6"
+    "@use-gesture/react" "^10.3.1"
+    camera-controls "^2.9.0"
+    cross-env "^7.0.3"
+    detect-gpu "^5.0.56"
+    glsl-noise "^0.0.0"
+    hls.js "^1.5.17"
+    maath "^0.10.8"
+    meshline "^3.3.1"
+    stats-gl "^2.2.8"
+    stats.js "^0.17.0"
+    suspend-react "^0.1.3"
+    three-mesh-bvh "^0.8.3"
+    three-stdlib "^2.35.6"
+    troika-three-text "^0.52.0"
+    tunnel-rat "^0.1.2"
+    use-sync-external-store "^1.4.0"
+    utility-types "^3.11.0"
+    zustand "^5.0.1"
+
 troika-three-text@^0.52.0:
   version "0.52.3"
   resolved "https://registry.yarnpkg.com/troika-three-text/-/troika-three-text-0.52.3.tgz#38fe68a9642aba562830323dee6708710cf36a61"
@@ -9044,11 +9105,6 @@ universalify@^0.2.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
   integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
 
-upath@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
-  integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==
-
 update-browserslist-db@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz#348377dd245216f9e7060ff50b15a1b740b75420"

Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,6 @@`
`2`	`2`	`"$schema": "https://triplex.dev/config.schema.json",`
`3`	`3`	`"components": ["../src/components/*/.tsx"],`
`4`	`4`	`"files": ["../src/*/.tsx"],`
`5`		`- "renderer": "../../../packages/renderer/src/index.tsx"`
	`5`	`+ "renderer": "../../../packages/renderer/src/index.tsx",`
	`6`	`+ "provider": "./provider.tsx"`
`6`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,6 @@`
`14`	`14`	`"skipLibCheck": true,`
`15`	`15`	`"strict": true`
`16`	`16`	`},`
`17`		`- "include": ["."],`
	`17`	`+ "include": [".", ".triplex/*"],`
`18`	`18`	`"exclude": ["node_modules"]`
`19`	`19`	`}`