Debugging with dat.gui?

[user28111999]

I'd like to debug some effects such as SSAO using dat.gui but unfortunately changing the value using SSAO isn't working as intended.

What I tried:

    const loadSsao = (intensity) => {
      const normalPass = new NormalPass(scene, camera)

      const ssaoEffect = new SSAOEffect(camera, normalPass.renderTarget.texture, {
        blendFunction: BlendFunction.MULTIPLY, // intentionally set as normal for better debugging
        depthAwareUpsampling: true,
        samples: 50,
        rings: 12,
        distanceThreshold: 0.2, 
        distanceFalloff: 0.0025,
        rangeThreshold: 0.0009,
        rangeFalloff: 0.0001,
        luminanceInfluence: 0,
        radius: 12.5,
        intensity: intensity,
        bias: 0.0
      })
      const renderPass = new RenderPass(scene, camera)
      const effectPass = new EffectPass(camera, ssaoEffect)

     // dat.gui
     const gui = dat.GUI()
     const ssaoFolder = gui.addFolder("SSAO")
     ssaoFolder.add(ssaoEffect, 'intensity', 0, 100, 1)
     ssaoFolder.open()

      composer.addPass(renderPass)
      composer.addPass(normalPass)
      composer.addPass(effectPass)
    }

    loadSsao(12)

I also tried to use the onUpdate() function from dat.gui and do the following:

ssaoFolder.add(ssaoEffect, 'intensity', 0, 100, 1).onUpdate((value) => {
   const normalPass = new NormalPass(scene, camera)

      const ssaoEffect = new SSAOEffect(camera, normalPass.renderTarget.texture, {
        blendFunction: BlendFunction.MULTIPLY, // intentionally set as normal for better debugging
        depthAwareUpsampling: true,
        samples: 50,
        rings: 12,
        distanceThreshold: 0.2, 
        distanceFalloff: 0.0025,
        rangeThreshold: 0.0009,
        rangeFalloff: 0.0001,
        luminanceInfluence: 0,
        radius: 12.5,
        intensity:  value,
        bias: 0.0
      })
      const renderPass = new RenderPass(scene, camera)
      const effectPass = new EffectPass(camera, ssaoEffect)
      composer.addPass(renderPass)
      composer.addPass(normalPass)
      composer.addPass(effectPass)
}

Please excuse the formatting, I really need in a rush as I'm using this package for work :/

For more information I'm using Three.js, dat.gui, etc in a ReactJS/NextJS environnement and most postprocessing and threejs functions are in a useEffect()

[vanruesc]

I also tried to use the onUpdate() function from dat.gui

Try using the onChange method instead. Some of the SSAO parameters should primarily be set via the constructor arguments, but you can modify the internal uniforms directly:

const uniforms = ssaoEffect.ssaoMaterial.uniforms;

menu.add(uniforms, "intensity", 1.0, 4.0, 0.01).onChange((value) => {

	uniforms.intensity.value = value;

});

[user28111999]

Many thanks for the quick answer, however I'm getting the following error using this code

      const uniforms = ssaoEffect.ssaoMaterial.uniforms
      const ssaoFolder = gui.addFolder('SSAO')
      ssaoFolder.add(uniforms, 'intensity', 0, 20, 0.01)
        .onChange((value) => {
          uniforms.intensity.value = value
        })
      ssaoFolder.open()

I'm using the code from above in a useEffect(), this might be the problem?
Also in the error, I have no variable called controller

The error:
Screenshot

I feel like this might not be related to the postprocessing module

[vanruesc]

Ah sorry, I forgot that uniforms have a value property. The following code should work even in useEffect():

const uniforms = ssaoEffect.ssaoMaterial.uniforms;

// Aliases used for displaying purposes in the GUI.
const params = {
	"intensity": uniforms.intensity.value
};

// Using a proxy object allows us to display the label "intensity" instead of "value".
menu.add(params, "intensity", 1.0, 20.0, 0.01).onChange((value) => {

	uniforms.intensity.value = value;

});

// This would work too, but displays "value" in the GUI.
// menu.add(uniforms.intensity, "value", 1.0, 20.0, 0.01);

[user28111999]

Ok nevermind, my code editor actually auto imported a code-mirror module and removed it and now it works. Many thanks!

Edit: I removed some posts containing the website I'm working on.