Three.js - noise animation just from THREE.FilmPass()

Question

In my Learning Three.js book Chapter Eleven 02-post-processing-simple-passes.html, the author was able to make a noise animation from var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);

In the book's code example the orbiting is not causing the noise effect, because when I remove the orbit animation, the noise animation is still there. It's not coming from the textures, because when I remove them, the noise effect is still there.

I'm dieing to figure out how this was done just from using THREE.FilmPass().

I've tried using THREE.FilmPass() in my own experiment and I can not make the noise effect. Instead, I just get the normal scan line effect without the noise.

What I am doing different is: 1) I am using a 2d geometry instead of 3d geometry, 2) not using 2 cameras 3) not using directional lights, 4) not reusing my geometry with THREE.CopyShader, 5) not using orbiting.

 function init() {

    var stats = initStats();

    var scene = new THREE.Scene();

    var camera = new THREE.OrthographicCamera(-window.innerWidth, window.innerWidth, window.innerHeight, -window.innerHeight, -10000, 10000);

    scene.add(camera);

    var renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;

    var coupleTexture =  THREE.ImageUtils.loadTexture('./sina1.jpg');

    var planeGeometry = new THREE.PlaneGeometry(1, 1);
    var planeMaterial = new THREE.MeshBasicMaterial({map: coupleTexture,
                                                    depthTest: false });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.scale.set(1000, 1000, 1, 1);
           scene.add(plane);

    document.getElementById("WebGL-output").appendChild(renderer.domElement);
    var renderPass = new THREE.RenderPass(scene, camera);
    var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);
    effectFilm.renderToScreen = true;

    var composer = new THREE.EffectComposer(renderer);
    composer.addPass(renderPass);
    composer.addPass(effectFilm);



    render();

    function render() {
        stats.update();
        requestAnimationFrame(render);
        composer.render(scene, camera);
    }

meepzh · Accepted Answer · 2016-06-30 20:36:54Z

5

Great question! I opened up the tutorial file and basically eliminated and replaced things until I got to about your stage. Noise generation depends on time, and one last thing you changed is how you render the scene! Try replacing composer.render(scene, camera); with

var delta = clock.getDelta();
composer.render(delta);

while adding var clock = new THREE.Clock(); to your init function.

answered Jun 30, 2016 at 20:36

meepzh

8021 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dman Over a year ago

For learning purposes.... before I was doing composer.render(scene, camera). When I changed it to composer.render(delta) the scene was still rendered. Was this because of var renderPass = new THREE.RenderPass(scene, camera);?

meepzh Over a year ago

Yes, that's correct. The RenderPass handles the rendering portion inside of the EffectComposer, then passes the rendered result to FilmPass (notice the ordering of how you add passes matters). Also, it's worthwhile looking at the source code for EffectComposer. The only argument that render() accepts is delta. Hope this helps!

Collectives™ on Stack Overflow

Three.js - noise animation just from THREE.FilmPass()

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related