three.js後處理之 BokehPass 背景虛擬化，模糊

引入的js

<script src="../../plugins/threeLibrary/three.min.js"></script>
<script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script>
<script src="../../plugins/CopyShader.js"></script>
<script src="../../plugins/EffectComposer.js"></script>
<script src="../../plugins/RenderPass.js"></script>
<script src="../../plugins/ShaderPass.js"></script>
<script src="../../plugins/BokehShader.js"></script>

<script src="../../plugins/BokehPass.js"></script>

    function initThree(elid,options) {
        let  scene,camera ,renderer,viewer
        viewer={}
        el =  document.getElementById(elid)
        const  width = el.offsetWidth, height = el.offsetHeight,asp =  width / height
        renderer = new THREE.WebGLRenderer({antialias : true});
        renderer.setSize(width, height);
        el.append(renderer.domElement);
        renderer.setClearColor('#000')
        scene = new THREE.Scene()
        camera = new THREE.PerspectiveCamera(45, asp, 1, 10000)
        camera.position.set(10,10,10)
        camera.lookAt(0,0,0)
        scene.add(camera)
        viewer.scene=scene
        viewer.camera=camera
        viewer.renderer=renderer
        const controls = new THREE.OrbitControls( camera, renderer.domElement );
        // 如果使用animate方法時，將此函數刪除
        controls.addEventListener( 'change', ()=>{
            renderer.render( scene, camera );
        });
        viewer.controls=controls
        renderer.render( scene, camera );

        return viewer
    }

    let app=new initThree('box')
    let scene=app.scene
    let renderer=app.renderer
    let camera=app.camera

    camera.position.set(50,50,50)


    const box = new THREE.Mesh(new THREE.BoxBufferGeometry(2,2,2) ,new THREE.MeshBasicMaterial({color:'red'}))
    box.position.set(0,1,0)
    scene.add(box)


    const  renderPass = new THREE.RenderPass( scene, camera );
    const bokehPass = new THREE.BokehPass( scene, camera, {
        focus: 1.0,
        aperture:	0.025,
        maxblur:	1.0,

        width:  el.offsetWidth,
        height: el.offsetHeight
    } )
    const composer = new THREE.EffectComposer( renderer );

    composer.addPass( renderPass )
    composer.addPass( bokehPass )

    const postprocessing = { }
    const effectController = {
        focus: 500.0,
        aperture:	5,
        maxblur:	1.0
    };
    postprocessing.composer = composer
    postprocessing.bokeh = bokehPass
    postprocessing.bokeh.uniforms[ "focus" ].value = effectController.focus;
    postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture * 0.00001;
    postprocessing.bokeh.uniforms[ "maxblur" ].value = effectController.maxblur



    let number = 0

    function render() {


        postprocessing.composer.render( 0.1 )

        effectController.aperture = effectController.aperture - 0.01
        if(effectController.aperture < 0) {
            effectController.aperture = 5
        }


        postprocessing.bokeh.uniforms[ "focus" ].value = effectController.focus;
        postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture * 0.00001;
        postprocessing.bokeh.uniforms[ "maxblur" ].value = effectController.maxblur
        requestAnimationFrame(render)

    }
    render()