Filmpass postprocessing

what i want is i need a horizontal line effect like this see this

0.35, // noise intensity

0.6, // scanline intensity

2048, // scanline count

false , // grayscale

if anyone knows how to do this please help

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';
import { FilmPass } from 'three/examples/jsm/postprocessing/FilmPass';



const composer = new EffectComposer(renderer);
    const rendererPass = new RenderPass(scene, camera);
    composer.addPass(rendererPass)
    const unrealBloomPass = new UnrealBloomPass()
    composer.addPass(unrealBloomPass);


    const filmPass = new FilmPass(0.35,false);
    composer.addPass(filmPass);

postprocessing is a vanilla library, it should generally be considered the go to effect composer. three/jsm/effectcomposer is nearly unusable in the real world because it is very, very slow. now you already link to the effect in pp, so why not just use it?

the library is here and it has documentation and all, even the example is in the github repo: GitHub - pmndrs/postprocessing: A post processing library for three.js.

import { EffectComposer, DotScreenEffect, EffectPass, RenderPass } from "postprocessing";

const composer = new EffectComposer(renderer)
composer.addPass(new RenderPass(scene, camera))
composer.addPass(new EffectPass(camera, new DotScreenEffect()))

function loop() {
  requestAnimationFrame(loop)
  composer.render()
}
1 Like

thank you . very helpful

Sorry, but this statement is quite unserious. There are situations where pmndrs/postprocessing performs better, but it is not true in all use case. So a general (low-quality) statement like yours is wrong.

very, very slow

Again it is just unprofessional to assess the performance of a any software component with such words. This is just a really bad way to promote an alternative product/project with very subjective statements.

1 Like

it performs better in almost every situation. it’s not a little faster, its the difference between 10fps and 120. do you listen to threejs talks hosted on twitter by anderson mancini? they recently talked about this, with real world experiences. he said himself that it wasn’t almost unusable and that’s my experience as well. this thing has been catching dust for years.

mrdoob himself thinks about removing jsm/effectcomposer examples in favour of pp

bad way to promote an alternative product/project which very subjective statements.

i don’t “promote”. it’s an open source library. i am not the author.

ps i think it was this one https://twitter.com/i/spaces/1zqKVPMDyElJB?s=20 mrdoob was a guest also. they go into detail of how they used jsm and pp and what a difference it made.

We have discussed this at GitHub (and offline) and the removal of the built-in EffectComposer is not going to happen. The idea is to align the APIs if possible and further improve EffectComposer. Ricardo posted this tweet to see the actual API differences in a draft PR.

It is true that EffectComposer has been neglected in the last years but in recent releases the component has been improved at various places. Banding has been fixed, HDR and color space conversion is now properly supported, bugs in passes (like SSAO and SSAA) have been fixed and the performance of certain passes has been improved. Mancini talked about EffectComposer in March so it does reflect the latest state of the component.

Now that functional issues have been fixed, we try to improve the performance of EffectComposer in the next months when using complex pass chains. Apart from that, expect to see new post processing examples based on WebGPURenderer (with WebGL support) based on TSL (with ueber shader support).

What I don’t understand is the general attitude of your person. I mean you tend to harshly criticize three.js over the last years although part of your open-source work is based on this project. This is quite irritating to me (and other collaborators btw) since it feels overly hostile and counterproductive. Apart from that, it is a style that really makes a bad impression for everyone who observes our community.

2 Likes

i don’t criticize threejs, i love threejs. i want it to be better. there are some things i find odd, for instance the unwillingness to value the open source community. the effect composer is slow, everybody knows that, your fixes don’t address that it doesn’t glob passes into one among many other things. i think it’s odd to centralise three addons into a dumping ground that is worked by 2-3 people, leaving issues and prs open for years, new effect prs are sitting a year. that’s your choice, but if something actually fixes problems i see you get upset because it’s not core, and i don’t agree with that.

and even if we disagree and i will never understand you either, just let it slide. i have my opinions you have yours.

so what should i use . pmndrs/postprocessing or three/jsm/effectcomposer.

can you say how to achivieve ScanlineEffect in three/jsm/effectcomposer.

We had to simplify the film pass in the main repository since the shader code was covered by a CC license which was quite unfortunate. I suggest you use the effect from pmndrs/postprocessing if you need a film grain effect with scanelines.

That’s quite sad, did you look into maybe using the scan line shader from bad-tv-shader? It looks like it’s under an MIT License

1 Like

I’ve checked it out during the refactoring. The effect looks great but it is quite resource intensive so we went for a more lightweight code. That said, it’s definitely a good alternative if the OP likes the style.

1 Like

https://github.com/mrdoob/three.js/pull/26573

so is there any possibility to achieve scanline with three/jsm/effectcomposer.
help

Yes…

composer = new THREE.EffectComposer( renderer);
renderPass = new THREE.RenderPass( scene, camera );
badTVPass = new THREE.ShaderPass( THREE.BadTVShader );
composer.addPass( renderPass );
composer.addPass( badTVPass );
badTVPass.renderToScreen = true; 

there is no such shader(BadTVShader) in three/jsm/effectcomposer.

is it because of i am using latest version of three js ?

You can import it from here, it plugs into three’s native effect composer.

I am using react js

OK nice to know :slightly_smiling_face:

i am late. sorry