Postprocessing: How to implement SMAA into Class Constructor?

[morph3us-net]

What I tried

This wiki entry does not describe the actual implementation of the smaaEffect, but only how to initialize it.

The source code of the AA demo bamboozles me, because I do not understand how "load()" even gets called. Probably by one of the parent classes it extends? The "PostProcessingDemo.js" does not, and I can not find its parent "three-demo.js" in the repository.

I downloaded this Vanta.js background as an unminified version from its Github repo, thus I am a little bound by the structure that was given to me.

I tried to make the wiki entry to work in this particular case by adding "return smaaEffect;" line to the "initialize" function of "_base.js", so I can add it as a variable to the effectPass, who's implementation I sto.. borrowed from @vanruesc 's demo on codesandbox.

The problem

This however throws:
'postprocessing.esm.js:2112 Uncaught TypeError: effect.setSize is not a function'

I uploaded all my code on CodeSandbox.
It doesnt run, but throws a different error message than offline. Please refer to the one above.
(I just wanted to present the code in a better way than just copying it in here.)

My 2 cents

The error stems from line 154, when the effect passes are added to the composer.
The error vanishes when commenting out line 147 of the "_base.js", where the smaaEffect is added to the pass list.
So obviously I am not passing the right object into "smaaEffect".
I added console logs in the "initAA" function on line 510 and and the constructor on line 129, they are both object-types and the contents seem to match up (although my browser's dev tools do format them differently, is that something to worry about?)
So actually, I would be pretty sure that I do initialize the smaaEffect, pass it to the main constructor function and then into the composer. Would somebody please tell me what I am missing? Thank you!

[vanruesc]

I do not understand how "load()" even gets called

The lifecycle methods of the demos are called by the DemoManager from three-demo which is a small framework that keeps the demos dry.

It looks like Vanta is a blackbox system that doesn't expose its internals which means it's probably not suited to be used with postprocessing. It also looks like you're trying to hack its classes to make it work with postprocessing and I'm afraid that's out of scope for this project.

Loading the SMAA data images is an asynchronous process that needs to finish before you can use the images to create an SMAAEffect. The type of smaaEffect in your example is probably Promise. I recommend loading all your assets first before you start initializing/rendering.

[morph3us-net]

Oh, I see! DemoManager is another package, didn't get that, sorry!

Vanta is a collection of different 3D backgrounds, which share the same base class, as they where all made by the same guy.

I downloaded the specific bg's "vanta.net.js" (net being the effect's name) and the "_base.js" which it extends.
I also resolved all other imports of that base class. Why should I not be able to add postprocessing to this and what would you mean by out of scope? Like, it'd be too much to tell me or are we talking about scopes of variables and such?

Yes, because of the asynchonous process, I am trying really hard to somehow squish those examples into my code.
But yeah, you may close this, if its too much... Thanks for your reply! :)

P.S.: I got the vignette and noise effects working, its only the anti aliasing, so I really dont know why that shouldnt work?

[vanruesc]

I downloaded the specific bg's "vanta.net.js" (net being the effect's name) and the "_base.js" which it extends.

Well, you wouldn't normally do that because this means you're giving up version updates and are practically bypassing proper dependency management in order to hack the original. I don't know if this will help in any way, but I'd try something like this: https://codesandbox.io/s/postproaatest-forked-23snk?file=/src/setupPostProcessing.js

Why should I not be able to add postprocessing to this and what would you mean by out of scope?

I mean that Vanta's API doesn't seem to support customizing the rendering pipeline with post processing effects. It's out of scope because this is more about vanta than postprocessing.

[morph3us-net]

Thats way more than I ever hoped for!
I will study your code and try to understand how to implement the DoF now.
I really appreciate all the time you put into my problems, I am very grateful and will leave you alone now!

[morph3us-net]

Just for the record, if anyone else finds this via Google or something:
In the promise, explicitly hand over the "assets" variable to the class constructor.

Assets.load() .then(assets => new XYZ(assets)) .catch(console.error);

Then, in your class file, you can add it into the constructor:

class XYZ {
    constructor(assets) {
        let smaaEffect = new SMAAEffect(
          assets.get("smaa-search"),
          assets.get("smaa-area")
        );
        const effectPass = new EffectPass(
            this.camera,
            smaaEffect
            );

        this.composer.addPass(effectPass);
    }
}

Obviously you need to create a scene, camera, composer and such beforehand and then call "this.composer.render();" in your render loop.
I updated my codesandbox for anybody who is interested.