1

一段时间以来，我一直在尝试在我的场景中实现特定的效果。

想要的效果是 Bokeh，在 ThreeJs 示例中，有两个版本的 Bokeh 可用，在尝试了 1 Bokeh 后，我没有得到想要的效果，所以我切换到第二个，我很难过将它应用到我的场景中，并且由于我无法理解示例源代码，我无法知道它是如何工作的。

任何人都可以给我一个提示或链接到一个好的文档/教程吗？

链接

  1. threejs：http ://threejs.org
  2. threejs Bokeh2 示例：http ://threejs.org/examples/#webgl_postprocessing_dof2
4

1 回答 1

1

我试图简化这个例子：[ http://threejs.org/examples/#webgl_postprocessing_dof2][1]

这是我得到的：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>TEST</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

        <!-- replace "../../../JS/" in this document by the actual JS library relative root -->
        <!-- Tree JS -->
        <script src="../../../JS/threeJS/three.min.js"></script>
        <script src="../../../JS/threeJS/controls/OrbitControls.js"></script>
        <script src="../../../JS/threeJS/loaders/BinaryLoader.js"></script>
        <script src="../../../JS/threeJS/Detector.js"></script>
        <script src="../../../JS/threeJS/libs/stats.min.js"></script>
        <!-- Hypertor JS -->
        <script src="../../../JS/hypertorJS/hypertor.js"></script>
        <!-- Modifier -->
        <script src="../../../JS/threeJS/modifiers/SubdivisionModifier.js"></script>
        <!-- Control -->
        <script src="../../../JS/threeJS/controls/OrbitControls.js"></script>
        <!-- DOF -->
        <script src="../../../JS/threeJS/shaders/BokehShader2.js"></script>
        <!-- DAT GUI -->
        <script src="../../../JS/threeJS/libs/dat.gui.min.js"></script>

    <body>
        <script>
            /////////////
            //3D VIEWER//
            /////////////
            //if WebGL available then proceed to 3D model viewing?
            if (Detector.webgl )
            {
    ////////////////////
     //environment vars//
     ////////////////////
    var scene, camera, renderer, material_depth;
    var WIDTH = window.innerWidth;
    var HEIGHT = window.innerHeight;
    var postprocessing = {enabled:true};
    var shaderSettings = {rings: 3,    samples: 4};
    /////////
    //alias//
    /////////
    container = document.createElement('div');
    document.body.appendChild( container );

    init();
    animate();

    // Sets up the scene.
    function init()
    {
        /////////
        //scene//
        /////////
        scene = new THREE.Scene();

        ////////////
        //renderer//
        ////////////
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(WIDTH, HEIGHT);
        renderer.shadowMapEnabled = true;
        renderer.sortObjects = false;
        material_depth = new THREE.MeshDepthMaterial();
        container.appendChild(renderer.domElement);

        //////////
        //camera//
        //////////
        camera = new THREE.PerspectiveCamera( 60, WIDTH/HEIGHT, 1, 1000 );
        camera.position.set(2, 1, 2);

        //////////
        //lights//
        //////////
        // Set the background color of the scene.
        renderer.setClearColor(0xcccccc, 1);
        //ambient
        var ambient = new THREE.AmbientLight( 0x999999);
        scene.add( ambient );
        //point
        pointLight = new THREE.PointLight( 0xffffff, 1 );
        pointLight.position.set(0, 0, 2);
        scene.add(pointLight);

        /////////////
        //skySphere//
        /////////////
        var skySphereGeometry = new THREE.SphereGeometry( 500, 60, 40 );
            skySphereGeometry.applyMatrix( new THREE.Matrix4().makeScale( -1, 1, 1 ) );
        var skySphereMaterial = new THREE.MeshBasicMaterial( {map: THREE.ImageUtils.loadTexture( 'textures/yourTexture.jpg' )} );
        skySphereMesh = new THREE.Mesh( skySphereGeometry, skySphereMaterial );
        scene.add( skySphereMesh );

        /////////////
        //materials//
        /////////////
        material = new THREE.MeshPhongMaterial({color:0xffffff*Math.random(), shininess:0.5, specular:0xffffff});

        /////////////////
        //window resize//
        /////////////////
        window.addEventListener('resize', function() {
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;
        renderer.setSize(WIDTH, HEIGHT);
        camera.aspect = WIDTH / HEIGHT;
        camera.updateProjectionMatrix();
        });

        //////////
        //loader//
        //////////
        var loader = new THREE.JSONLoader();
        loader.load( "obj/yourObject.json", function(geometry)
        {
            mesh = new THREE.Mesh(geometry, material);
            ////////////
            //position//
            ////////////
            mesh.rotation.set(0, 10, 0, 'XYZ');
            mesh.scale.set(35,32,35);
            /////////////
            //subdivide//
            /////////////
            var modifier = new THREE.SubdivisionModifier(1);
            modifier.modify(geometry);
            //////////
            //shadow//
            //////////
            mesh.castShadow = true;
            mesh.receiveShadow = true;
            ////////////
            //add mesh//
            ////////////
            scene.add(mesh);
            //re color test
            //mesh.material.color.setHex(0xf2a0dc);
            //mesh.material.ambient.setHex(0xf2a0dc);
        });

        initPostprocessing();
        renderer.autoClear = false;

        ///////////
        //control//
        ///////////
        controls = new THREE.OrbitControls( camera );
        controls.damping = 5; 
        controls.minDistance = 2;
        controls.maxDistance = 5;
        controls.addEventListener( 'change', render );

    }

            function initPostprocessing()
            {
                if(postprocessing.enabled)
                {
                    postprocessing.scene = new THREE.Scene();

                    //postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
                    //postprocessing.camera.position.z = 100;
                    postprocessing.camera = new THREE.PerspectiveCamera( 60, WIDTH/HEIGHT, 1, 1000 );
                    postprocessing.camera.position.set(2, 1, 2);

                    postprocessing.scene.add( postprocessing.camera );

                    var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
                    postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, HEIGHT, pars );
                    postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, HEIGHT, pars );



                    var bokeh_shader = THREE.BokehShader;

                    postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );

                    postprocessing.bokeh_uniforms[ "tColor" ].value = postprocessing.rtTextureColor;
                    postprocessing.bokeh_uniforms[ "tDepth" ].value = postprocessing.rtTextureDepth;

                    postprocessing.bokeh_uniforms[ "textureWidth" ].value = window.innerWidth;

                    postprocessing.bokeh_uniforms[ "textureHeight" ].value = HEIGHT;

                    postprocessing.materialBokeh = new THREE.ShaderMaterial({uniforms: postprocessing.bokeh_uniforms, vertexShader: bokeh_shader.vertexShader, fragmentShader: bokeh_shader.fragmentShader, defines: { RINGS: shaderSettings.rings, SAMPLES: shaderSettings.samples } } );

                    postprocessing.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
                    postprocessing.quad.position.z = - 500;
                    postprocessing.scene.add( postprocessing.quad );
                }

            }

            ///////////
            //animate//
            ///////////
            function animate()
            {
                requestAnimationFrame(animate, renderer.domElement);
                render();
                controls.update();
            }

            //////////////////
            //render refresh//
            //////////////////
            function render()
            {
                if ( postprocessing.enabled )
                {
                    renderer.clear();
                    // Render scene into texture
                    scene.overrideMaterial = null;
                    renderer.render( scene, camera, postprocessing.rtTextureColor, true );
                    // Render depth into texture
                    scene.overrideMaterial = material_depth;
                    renderer.render( scene, camera, postprocessing.rtTextureDepth, true );
                    // Render bokeh composite
                    renderer.render( postprocessing.scene, postprocessing.camera );
                }
                else
                {
                    scene.overrideMaterial = null;
                    renderer.clear();
                    renderer.render( scene, camera );
                }
            }
            }
            //otherwise, proceed to alternative
            else
            {
                alert('webGL is unfortunately not available');
            }
        </script>
    </body>
</html>

于 2014-11-22T11:29:35.343 回答