@thibka/postprocessor

    1.0.3 • Public • Published

    PostProcessor

    Makes Three.js post-processing easy. Depends on postprocessing 5.0.0 and above. This is a WIP.

    Install

    npm i three postprocessing
    npm i @thibka/postprocessor

    Usage

    The PostProcessor composer must be used instead of the classic Three.js renderer.

    import PostProcessor from './js/PostProcessor.js';
     
    // render loop
    function render() {
        requestAnimationFrame(render);
        PostProcessor.composer.render(); // here
    };
     
    // resize function
    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
     
        PostProcessor.composer.setSize(canvas.width, canvas.height); // and here
        camera.aspect = canvas.width / canvas.height;
        camera.updateProjectionMatrix();
    }
     
    // Initialization.
    // If no pass is added, the PostProcessor will simply render the scene with no effect.
    PostProcessor.init(scene, camera);

    Then, post-processing passes can be added or removed dynamically

    PostProcessor.add('bokeh', 
        {   focus: .9, 
            dof: 0, 
            aperture: 0.1, 
            maxBlur: 1  });
     
    PostProcessor.remove('bokeh');
     
    // Default parameters will be used if none is provided
    PostProcessor.add('pixelation');

    Glitch

    PostProcessor.add('glitch', 1); // 1 is the default noiseMapSize parameter
    PostProcessor.remove('glitch');

    Scanlines

    PostProcessor.add('film');
    PostProcessor.remove('film');

    SMAA Antialiasing

    The SMAA Effect needs these two images to work.

    Simple call

    // First you must load the two "search" and "area" png images. Then use them this way:
    PostProcessor.add('smaa', {
        imgSearch: smaaSearchImage,
        imgArea: smaaAreaImage
    });

    Using @thibka/multiloader

    You can also use the multiloader to easily load the two images before using them.

    MultiLoader.load({
        files: {
            // ...
            smaaSearch: { 
                type: 'image', 
                path: require('./img/smaa/smaa-search.png')
            },
            smaaArea: { 
                type: 'image',
                path: require('./img/smaa/smaa-area.png')
            }
        },
        onFinish: init
    });
     
    // ...
     
    function init() {
        PostProcessor.add('smaa', {
            imgSearch: MultiLoader.files.smaaSearch.image,
            imgArea: MultiLoader.files.smaaArea.image
        });
    }

    Install

    npm i @thibka/postprocessor

    DownloadsWeekly Downloads

    1

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    26.6 kB

    Total Files

    4

    Last publish

    Collaborators

    • thibka