postprocessing VS tween.js

We will replace our render pass and our effects pass from three with effects from postprocessing library by Poimandres. Let's start by importing it (add to importmap + call inside script)

I've been trying to import Poimandres's "Post Processing" library into a Three.js scene file within my SvelteKit project, but keep encountering the "Cannot use import statement outside a module" error when running my Vite dev server, despite everything appearing to be in order. VSCode is showing no errors, the library's IntelliSense tooltips work and the production build seems to work properly. I also haven't had any issues importing other modules.

I think it makes little sense to use jsm/effectcomposer when https://github.com/pmndrs/postprocessing exists. The jsm composer has been catching dust years whereas postpro is actively maintained. postpro is faster because it merges all passes into one uber shader, it takes care of encoding automatically, it has support for alpha, stencil and individual mesh selection, and it has effects that are truly pushing the edge, like https://twitter.com/0beqz/status/1632109961768476672?s=46&t=wv5EJPuK32MHxbjV0bW_FA

I was able to add outlines to my instancedMeshes using a shehata-outline pass in the vanilla version of pmndrs post-processing

pmndrs/postprocessing https://github.com/pmndrs/postprocessing

i don't think unrealbloom supports that, it renders opaque. use https://github.com/pmndrs/postprocessing use the mipMapBlur option on the bloom effect and you get the same as unrealbloom, but pp supports alpha. other than that the composer is better in every way, it creates an uber shader from all the passes.

hopefully this issue and the linked codesandbox example helps as it matches the situation I just described: https://github.com/pmndrs/postprocessing/issues/243

postprocessing

i think what you need is AO, ambient occlusion. don't have a plain vanilla example of this but you can play with the values here https://codesandbox.io/s/hi-key-bubbles-forked-worwb?file=/src/App.js:2783-2941 to see if that would make a difference for you. the library is this one: https://github.com/vanruesc/postprocessing

don't forget postprocessing, this is a far more powerful option than jsm/effects, and it's often more efficient, too.

They are loading tween.js to handle (some of?) the animation aspects

This is done mostly with Javascript. In particular, it looks like the project uses libraries like Paper and Tween.

Or if you need to do it from JS, use a library like https://github.com/tweenjs/tween.js/

The Tween.JS library does one thing, but it does it extremely well. It takes a value in an object and gradually moves it to another one.