How to mixing passes with THREE.PostProcessing （WebGPU）

Questions
, , ,
1

I`d like use lut3D, bloom, outline, ssaa at the same time, how can I make it happen with THREE.PostProcessing(WebGPU), I know how to do it with EffectComposer(webgl) , but I dont know how to do it with THREE.PostProcessing(WebGPU), any documents?

2

It seems to me that this is what you are looking for

import { renderOutput, mix } from './three/tsl';
import { fxaa } from './three/addons/tsl/display/FXAANode.js';


postProcessing.outputColorTransform = false;
const outputPass = renderOutput( mix( pass1, pass2, pass2.a ) );
const fxaaPass = fxaa( outputPass );

postProcessing.outputNode = fxaaPass;
4 Likes
3

great job bro！ Thanks！！

4

Hi dear. I hope it will be helpful a little.

const renderer = new THREE.WebGPURenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(…);
const composer = new THREE.EffectComposer(renderer);

const lutPass = new THREE.LUTPass(); // Assuming you have a LUTPass class
const bloomPass = new THREE.BloomPass();
const outlinePass = new THREE.OutlinePass();
const ssaaPass = new THREE.SSAAPass();

composer.addPass(ssaaPass);
composer.addPass(bloomPass);
composer.addPass(outlinePass);
composer.addPass(lutPass);

// Example configuration
lutPass.lutTexture = someLutTexture; // Load your LUT texture
bloomPass.strength = 1.5;
outlinePass.edgeStrength = 3.0;
ssaaPass.sampleCount = 4; // Example for SSAA

5

I think its for webgl version not for webgpu version