Failure to initiate any post-processing effect

Questions
, ,
1

Hi! I am currently working on implementing post-processing into my game engine although Im currently struggling to get anything working.

Ive created this new file, gzjs.postprocessing.js

import * as THREE from 'three';
import { gzjs } from './../glunzunk.js';
import { scene, camera } from './../../editor/init.js';

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';


let composer; // Declare composer but initialize later

async function initComposer() {
    const { renderer } = await import('./../../editor/init.js'); // Lazy import to break circular dependency

    composer = new EffectComposer( renderer) ;
    composer.addPass( new RenderPass(scene, camera) );

    // const outputPass = new OutputPass();
    // composer.addPass(outputPass);
}

await initComposer(); // Initialize composer after renderer is available

gzjs.postProcessing = async function(name, properties = {}) {
    if (!composer) {
        console.error('Composer is not initialized yet!');
        return;
    }

    composer.passes = composer.passes.filter(pass => !(pass instanceof OutputPass));

    if (name === 'glitch') {
    	
		const glitchPass = new GlitchPass();
		glitchPass.goWild = true; // Force extreme glitching
		composer.addPass(glitchPass);

    }

    const outputPass = new OutputPass();
    composer.addPass(outputPass);	
};

export { composer };

and imported it into the init.js (the first script to be ran in-editor)

/*
    Editor Initilization
    Written by: MTSyntho
    Jan 2025
*/

import * as THREE from 'three';
import { gzjs } from './../engine/glunzunk.js';
import { TransformControls } from 'three/addons/controls/TransformControls.js';
// import animate from '/scripts/editor/render.js';

import { handleCamera } from './../editor/camera.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
// const gamecamera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );

const inEngine = true;

const renderer = new THREE.WebGLRenderer({ canvas: renderCanvas, antialias:true });
renderer.setSize( window.innerWidth, window.innerHeight );
// renderer.setAnimationLoop( animate );
renderer.setPixelRatio(1)

// const camera = gzjs.newCamera( 60, scene, 	window.innerWidth / window.innerHeight, 0.1, 1000 );
// export { scene, renderer, camera };	

// Function to handle window resizing
function onWindowResize() {
    // Update the camera's aspect ratio
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();  // Update the camera's projection matrix
    
    // Update the renderer's size
    renderer.setSize(window.innerWidth, window.innerHeight);
}

// Listen for the window resize event
window.addEventListener('resize', onWindowResize, false);

camera.position.y = 1;
camera.position.z = 5;

// gamecamera.position.y = 3;
// gamecamera.position.z = 3;

let activeCamera = camera; // Default to editor camera

// const raycaster = new THREE.Raycaster();
// const mouse = new THREE.Vector2();
const gizmoObjects = []; // Store selectable objects
const sceneObjects = {}

export { renderer, scene, camera, activeCamera, gizmoObjects, sceneObjects, inEngine };

const clock = new THREE.Clock();
async function animate() {
    // requestAnimationFrame(animate);

    const delta = clock.getDelta(); // Get time since last frame

    handleCamera();

    const { composer } = await import('./../engine/gzjs/gzjs.postprocessing.js');
    composer.render();

    // renderer.render(scene, activeCamera);
}

animate();

Although nothing seems to work
what am i missing :pensive::pray:

i would link the repo although i cant make any commits for the weekend due to some stuff at home

Although you may check out the engine for funsies if you wish:
https://mtsyntho.github.io/glunzunk-engine

2

If the animate function is what I think it is, you’re importing composer on every frame! This is very inefficient.

I suggest creating a separate PostProcessManager class, encapsulate all the composer logic (addEffect, removeEffect, render, enabled…), it should also be the one responsible for lazy importing all the needed effects.

Set the enabled boolean property to switch between the regular renderer and the post-processing renderer.

import PostProcessManager from "../path/PostProcessManager.js";

const postProcess = new PostProcessManager(renderer, camera, /* Other params if needed */);

// Lazy-load and add an effect asynchronously
await postProcess.addEffect(effectName, ...effectParams);
postProcess.enabled = true;

// Render loop
function animate() {
    // ...
    if (postProcess.enabled) postProcess.render(scene, camera);
    else renderer.render(scene, camera);
}

Also, In your current code, you’re calling gzjs.postProcessing to add the glitch effect, but it’s not being used anywhere in your init script. As a result, the composer has no effects.

1 Like