Error "Converting circular structure to JSON" on Custom Postprocessing Effects

Questions
, , ,
1

Hi all,
I’ve built a custom pixel distortion effect post-processing effect for R3F using @react-three/postprocessing’s . Here’s the gist:

class CustomPixelDistortionEffect extends Effect {
  constructor(dataTexture) {
    super("Pixelation", fragmentShader, {
      uniforms: new Map([["u_DataTexture", new THREE.Uniform(dataTexture)]])
    });
    this.dataTexture = dataTexture;
  }
  update() {
    this.uniforms.get("u_DataTexture").value = this.dataTexture;
  }
}

const Wrapped = wrapEffect(CustomPixelDistortionEffect);

// more code…

// In my Postprocess file
<EffectComposer>
  <CustomPixelDistortion />
</EffectComposer>

As soon as it mounts, I see an error like this:

Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'current' -> CustomPixelDistortionEffect
    |     property 'dataTexture' -> Object
    --- property 'ref' closes the circle

I think it’s caused by the way I update the uniforms, also it looks like R3F is internally JSON.stringify-ing the effect instance. I need help understanding what’s happening here.
I have the project in codesandbox here
Thanks in advance!

2

Ok I fixed it, I went with the original Implementation and now it doesn’t throw that error. I updated the codesandbox, it will be there if anyone having trouble, I’m not familiar with that error, it was kinda new to me but anyways it’s fixed, Happy Coding !

1 Like