Add Vignette to Post Processing Volume at runtime?

🌵 Needle Engine
1

Adding a vignette like this in code doesn’t seem to work, adding other effects in a similar way like bloom, depth of field works. Did I miss something?

  start() {
    const bloom = new BloomEffect({
      intensity: 1,
      threshold: 0.9,
      scatter: 0.5,
    });

    const dof = new DepthOfField({
      mode: DepthOfFieldMode.Bokeh,
      focusDistance: 12.04,
      focalLength: 98,
      aperture: 21.3,
    });

    const vignette = new Vignette({
      intensity: 1,
    });
    const volume = new Volume();
    volume.sharedProfile = new VolumeProfile();
    volume.sharedProfile.addEffect(bloom);
    volume.sharedProfile.addEffect(dof);
    volume.sharedProfile.addEffect(vignette);
    this.gameObject.addComponent(volume);
  }
2

To ensure that the vignette effect is applied correctly, let’s verify a few things:

  1. Instancing and Parameter Initialization: Ensure that the VignetteEffect is being instantiated and its parameters are initialized correctly. You’ve already set the intensity, but make sure all parameters are properly initialized:

    import { VignetteEffect } from "postprocessing";

const vignette = new VignetteEffect({
  eskil: false,
  offset: 0.5,
  darkness: 1.0,
});

  2. Effect Handling: Ensure that the effect is properly added to the scene’s postprocessing stack by verifying the Volume and PostProcessingHandler setups. The Volume class has the addEffect method that should handle adding the effect correctly.

  3. Initialization: Make sure to invoke the init() method within the Vignette class to properly set default values and change listeners.

  4. Graphics Capabilities: Sometimes, graphics capabilities or settings might not be supporting a specific effect. Make sure your environment and volume settings allow for vignette application.

From your provided code, the usage seems correct, but tweaking the instantiation of VignetteEffect with proper parameters and ensuring the order in which effects are run might help. Here are the key points from the Vignette.ts:

If these suggestions do not resolve the issue, it might also be useful to check if there are any related graphics settings or limitations in your environment impacting the effect visualization.

21 replies left
thread_C8WXGtpbbhIN84HZBX0Cir9p
Reply to this message to continue the conversation