javascript
/
three.js
kopia lustrzana https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - postprocessing - digital glitch</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 = [], matData = [], group;

            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.shadowMap.enabled = true;
                renderer.shadowMap.type = THREE.PCSoftShadowMap;
                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)

                var shadowLight = new THREE.DirectionalLight(0xffffff, .5);

                shadowLight.position.set(150, 75, 150);

                shadowLight.castShadow = true;
                shadowLight.shadow.camera.left = -75;
                shadowLight.shadow.camera.right = 75;
                shadowLight.shadow.camera.top = 75;
                shadowLight.shadow.camera.bottom = -75;
                shadowLight.shadow.camera.near = 1;
                shadowLight.shadow.camera.far = 1000;

                shadowLight.shadow.mapSize.width = 1024;
                shadowLight.shadow.mapSize.height = 1024;

                var shadowLight2 = shadowLight.clone();
                shadowLight2.castShadow = false;
                shadowLight2.intensity = .2;
                shadowLight2.position.set(-150, 75, -150);

                var shadowLight3 = shadowLight.clone();
                shadowLight3.castShadow = false;
                shadowLight3.intensity = .1;
                shadowLight3.position.set(0, 125, 0);

                scene.add(hemisphereLight);
                scene.add(shadowLight);
                scene.add(shadowLight2);
                scene.add(shadowLight3);

                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));

                matData.push(new THREE.MeshStandardMaterial({
                    color: 0xd9486b,
                    emissive: 0x790f15,
                    roughness: .14,
                    flatShading: false,
                    metalness: .3
                }));

                matData.push(new THREE.MeshStandardMaterial({
                    color: 0xb3f28b,
                    emissive: 0x68841f,
                    metalness: .5,
                    flatShading: false,
                    roughness: .06
                }));

                matData.push(new THREE.MeshStandardMaterial({
                    color: 0xfcfa37,
                    emissive: 0xbd4215,
                    metalness: .5,
                    flatShading: false,
                    roughness: .06
                }));

                matData.push(new THREE.MeshStandardMaterial({
                    color: 0x5c70fb,
                    emissive: 0x1235ae,
                    roughness: 0,
                    flatShading: false,
                    metalness: 0
                }));

                matData.push(new THREE.MeshStandardMaterial({
                    color: 0xbe9a47,
                    emissive: 0x676925,
                    roughness: .16,
                    flatShading: false,
                    metalness: 0
                }));

                matData.push(new THREE.MeshStandardMaterial({
                    color: 0xb3f28b,
                    emissive: 0x68841f,
                    metalness: .5,
                    flatShading: false,
                    roughness: .06
                }));

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

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

                    var geom = geomData[Math.floor(Math.random()*geomData.length)];
                    var mat = matData[Math.floor(Math.random()*matData.length)]
                    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
                }
                var 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);
            }

            init();
            animate();

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