javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
							<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - postprocessing - pixel shader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                background-color: #000000;
                margin: 0px;
                overflow: hidden;
                font-family:Monospace;
                font-size:13px;
                /*text-align:center;*/
                font-weight: lighter;
            }

            a {
                color: gray;
                font-weight: bold;
            }

            #info {
                color: gray;
                position: absolute;
                bottom: 0px;
                width: 100%;
                padding: 15px;
            }
            
            .dg.ac {
                z-index: 1 !important;
            }
        </style>
    </head>
    <body>

        <script src="../build/three.js"></script>

        <script src="js/shaders/CopyShader.js"></script>
        <script src="js/shaders/PixelShader.js"></script>
        <script src="js/postprocessing/EffectComposer.js"></script>
        <script src="js/postprocessing/RenderPass.js"></script>
        <script src="js/postprocessing/ShaderPass.js"></script>
        <script src="js/controls/TrackballControls.js"></script>
        <script src='js/libs/dat.gui.min.js'></script>

        <div id="container"></div>

        <div id="info">
            <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - pixel shader example<br/>
            shader by <a href="http://wongbryan.github.io">wongbryan</a>
        </div>

        <script>

            var camera, scene, renderer, gui, composer;
            var pixelPass, params;

            var geomData = [], group;

            init();
            animate();

            function updateGUI() {

                pixelPass.uniforms.pixels.value = params.pixels;
                pixelPass.uniforms.step.value = params.step;

            }

            function resize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function init() {

                var container = document.getElementById( 'container' );
                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.setClearColor( 0xbfe7ff );
                container.appendChild( renderer.domElement );

                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.set( 0, 0, 30 );
                controls = new THREE.TrackballControls( camera, renderer.domElement );
                controls.rotateSpeed = 2.0;
                controls.panSpeed = 0.8;
                controls.zoomSpeed = 1.5;

                scene = new THREE.Scene();

                var hemisphereLight = new THREE.HemisphereLight( 0xfceafc, 0x000000, .8 );
                scene.add( hemisphereLight );

                var dirLight = new THREE.DirectionalLight( 0xffffff, .5 );
                dirLight.position.set( 150, 75, 150 );
                scene.add( dirLight );

                var dirLight2 = new THREE.DirectionalLight( 0xffffff, .2 );
                dirLight2.position.set( - 150, 75, - 150 );
                scene.add( dirLight2 );

                var dirLight3 = new THREE.DirectionalLight( 0xffffff, .1 );
                dirLight3.position.set( 0, 125, 0 );
                scene.add( dirLight3 );

                scene.add( hemisphereLight );
                scene.add( dirLight );
                scene.add( dirLight2 );
                scene.add( dirLight3 );

                geomData.push( new THREE.SphereGeometry( 1, 64, 64 ) );
                geomData.push( new THREE.BoxGeometry( 1, 1, 1 ) );
                geomData.push( new THREE.ConeGeometry( 1, 1, 32 ) );
                geomData.push( new THREE.TetrahedronGeometry( 1 ) );
                geomData.push( new THREE.TorusKnotGeometry( 1, .4 ) );

                var numShapes = 25;
                group = new THREE.Group();

                for ( var i = 0; i < numShapes; i ++ ) {

                    var geom = geomData[ Math.floor( Math.random() * geomData.length ) ];
                    var color = new THREE.Color();
                    color.setHSL( Math.random(), .7 + .2 * Math.random(), .5 + .1 * Math.random() );
                    var mat = new THREE.MeshPhongMaterial( { color: color } );
                    var mesh = new THREE.Mesh( geom, mat );
                    var s = 4 + Math.random() * 10;
                    mesh.scale.set( s, s, s );

                    mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
                    mesh.position.multiplyScalar( Math.random() * 200 );
                    mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
                    group.add( mesh );

                }

                scene.add( group );

                composer = new THREE.EffectComposer( renderer );
                composer.addPass( new THREE.RenderPass( scene, camera ) );

                pixelPass = new THREE.ShaderPass( THREE.PixelShader );
                pixelPass.renderToScreen = true;
                composer.addPass( pixelPass );

                window.addEventListener( 'resize', resize );

                params = {
                    pixels: 256,
                    step: 2.5,
                    postprocessing: true
                };
                gui = new dat.GUI();
                gui.add( params, 'pixels' ).min( 12.0 ).max( 512 ).step( 5.0 );
                gui.add( params, 'step' ).min( 1.0 ).max( 5.0 ).step( .25 );
                gui.add( params, 'postprocessing' );

            }

            function update() {

                controls.update();
                updateGUI();
                group.rotation.y += .0015;
                group.rotation.z += .001;

            }

            function animate() {

                update();

                if ( params.postprocessing ) {

                    composer.render();

                } else {

                    renderer.render( scene, camera );

                }

                window.requestAnimationFrame( animate );

            }

        </script>
    </body>
</html>