Why SMAA or SSAO don't work?

Glitch Pass working, but SSAO Pass & SMAA Pass - not.

Everything was is done according to the documentation.

See my codesandbox, Scenes.js, 185 line, function initPasses.

I used “create react app 18.2.0” for wrapper and added Effect Composer with SSAO Pass or SMAA Pass, but not have result.


initRenderer() {
    const renderer = new WebGLRenderer({
      powerPreference: "high-performance",
      antialias: false,
      stencil: false,
      depth: false,
      alpha: false

    this.renderer = renderer;

    renderer.setSize(this.width, this.height);
    renderer.setClearColor(this.backgroundColor.convertSRGBToLinear(), 1);
    renderer.physicallyCorrectLights = true;
    renderer.outputEncoding = sRGBEncoding;
    renderer.info.autoReset = false;
    renderer.shadowMap.type = PCFSoftShadowMap;
    renderer.shadowMap.autoUpdate = true;
    renderer.shadowMap.needsUpdate = false;
    renderer.shadowMap.enabled = true;
    renderer.toneMapping = ACESFilmicToneMapping;

initPasses() {
    const composer = new EffectComposer(this.renderer)
    this.composer = composer

    const renderPass = new RenderPass(this.scene, this.camera)

    const ssaoPass = new SSAOPass(this.scene, this.camera, this.width, this.height)
    ssaoPass.kernelRadius = 16

    const smaaPass = new SMAAPass(this.width * this.renderer.getPixelRatio(), this.height * this.renderer.getPixelRatio())

    const glitchPass = new GlitchPass()

initRender() {
    const renderScene = () => {

    this.req = requestAnimationFrame(function render(time) {

Zoomed screenshot

It gets fixed when I use another library postprocessing, but why don’t work in built-in?

Built-in SSAO & SMAA don’t work on newer versions ThreeJS. This is a bug?

examples is just a loose collection of things people have added over time. jsm/effects is not really maintained, it’s been catching dust for years. it has countless of open issues.

pmndrs/postpro is in virtually all aspects the better choice. it is actively maintained, magnitudes faster, effects can be selected, has support for alpha, stencil etc.

1 Like

btw seeing this code, why? there is an eco system around react + three that’s larger than plain threes. you loose all of that, all integration with react, everything that exists in the react eco system and everything that exists in the react+three eco system. there is even a react abstraction around that postpro library GitHub - pmndrs/react-postprocessing: 📬 postprocessing for react-three-fiber


your box turns into mere lines react-postprocessing Glitch+Noise demo (forked) - CodeSandbox

1 Like

Good examples, thank you for your answer!

Libraries for react a highly developed. What about optimization?

One ThreeJS have a big build (it can be optimized), but here for work need 4 library:

  1. three
  2. @react-three/fiber
  3. @react-three/postprocessing
  4. @react-three/drei