|
@@ -1,197 +1,194 @@
|
|
|
<!DOCTYPE html>
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
<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.pixelSize.value = params.pixelSize;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function resize() {
|
|
|
|
|
-
|
|
|
|
|
- camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
|
|
- camera.updateProjectionMatrix();
|
|
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
-
|
|
|
|
|
- pixelPass.uniforms.resolution.value.set( window.innerWidth, window.innerHeight ).multiplyScalar( window.devicePixelRatio );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ <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 group;
|
|
|
|
|
+
|
|
|
|
|
+ init();
|
|
|
|
|
+ animate();
|
|
|
|
|
+
|
|
|
|
|
+ function updateGUI() {
|
|
|
|
|
+
|
|
|
|
|
+ pixelPass.uniforms.pixelSize.value = params.pixelSize;
|
|
|
|
|
|
|
|
- function init() {
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function resize() {
|
|
|
|
|
|
|
|
- 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.aspect = window.innerWidth / window.innerHeight;
|
|
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
|
|
|
- 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;
|
|
|
|
|
|
|
+ pixelPass.uniforms.resolution.value.set( window.innerWidth, window.innerHeight ).multiplyScalar( window.devicePixelRatio );
|
|
|
|
|
|
|
|
- scene = new THREE.Scene();
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- var hemisphereLight = new THREE.HemisphereLight( 0xfceafc, 0x000000, .8 );
|
|
|
|
|
- scene.add( hemisphereLight );
|
|
|
|
|
|
|
+ function init() {
|
|
|
|
|
|
|
|
- var dirLight = new THREE.DirectionalLight( 0xffffff, .5 );
|
|
|
|
|
- dirLight.position.set( 150, 75, 150 );
|
|
|
|
|
- scene.add( dirLight );
|
|
|
|
|
|
|
+ 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 );
|
|
|
|
|
|
|
|
- var dirLight2 = new THREE.DirectionalLight( 0xffffff, .2 );
|
|
|
|
|
- dirLight2.position.set( - 150, 75, - 150 );
|
|
|
|
|
- scene.add( dirLight2 );
|
|
|
|
|
|
|
+ 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;
|
|
|
|
|
|
|
|
- var dirLight3 = new THREE.DirectionalLight( 0xffffff, .1 );
|
|
|
|
|
- dirLight3.position.set( 0, 125, 0 );
|
|
|
|
|
- scene.add( dirLight3 );
|
|
|
|
|
|
|
+ scene = new THREE.Scene();
|
|
|
|
|
|
|
|
- scene.add( hemisphereLight );
|
|
|
|
|
- scene.add( dirLight );
|
|
|
|
|
- scene.add( dirLight2 );
|
|
|
|
|
- scene.add( dirLight3 );
|
|
|
|
|
|
|
+ var hemisphereLight = new THREE.HemisphereLight( 0xfceafc, 0x000000, .8 );
|
|
|
|
|
+ scene.add( hemisphereLight );
|
|
|
|
|
|
|
|
- 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 dirLight = new THREE.DirectionalLight( 0xffffff, .5 );
|
|
|
|
|
+ dirLight.position.set( 150, 75, 150 );
|
|
|
|
|
+ scene.add( dirLight );
|
|
|
|
|
|
|
|
- var numShapes = 25;
|
|
|
|
|
- group = new THREE.Group();
|
|
|
|
|
|
|
+ var dirLight2 = new THREE.DirectionalLight( 0xffffff, .2 );
|
|
|
|
|
+ dirLight2.position.set( - 150, 75, - 150 );
|
|
|
|
|
+ scene.add( dirLight2 );
|
|
|
|
|
|
|
|
- for ( var i = 0; i < numShapes; i ++ ) {
|
|
|
|
|
|
|
+ var dirLight3 = new THREE.DirectionalLight( 0xffffff, .1 );
|
|
|
|
|
+ dirLight3.position.set( 0, 125, 0 );
|
|
|
|
|
+ scene.add( dirLight3 );
|
|
|
|
|
|
|
|
- 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, shininess: 200 } );
|
|
|
|
|
- var mesh = new THREE.Mesh( geom, mat );
|
|
|
|
|
- var s = 4 + Math.random() * 10;
|
|
|
|
|
- mesh.scale.set( s, s, s );
|
|
|
|
|
|
|
+ var geometries = [
|
|
|
|
|
+ new THREE.SphereGeometry( 1, 64, 64 ),
|
|
|
|
|
+ new THREE.BoxGeometry( 1, 1, 1 ),
|
|
|
|
|
+ new THREE.ConeGeometry( 1, 1, 32 ),
|
|
|
|
|
+ new THREE.TetrahedronGeometry( 1 ),
|
|
|
|
|
+ new THREE.TorusKnotGeometry( 1, .4 )
|
|
|
|
|
+ ];
|
|
|
|
|
|
|
|
- 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 );
|
|
|
|
|
|
|
+ group = new THREE.Group();
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ for ( var i = 0; i < 25; i ++ ) {
|
|
|
|
|
|
|
|
- scene.add( group );
|
|
|
|
|
|
|
+ var geom = geometries[ Math.floor( Math.random() * geometries.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, shininess: 200 } );
|
|
|
|
|
+ var mesh = new THREE.Mesh( geom, mat );
|
|
|
|
|
+ var s = 4 + Math.random() * 10;
|
|
|
|
|
+ mesh.scale.set( s, s, s );
|
|
|
|
|
|
|
|
- composer = new THREE.EffectComposer( renderer );
|
|
|
|
|
- composer.addPass( new THREE.RenderPass( scene, camera ) );
|
|
|
|
|
|
|
+ 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 );
|
|
|
|
|
|
|
|
- pixelPass = new THREE.ShaderPass( THREE.PixelShader );
|
|
|
|
|
- pixelPass.uniforms.resolution.value = new THREE.Vector2( window.innerWidth, window.innerHeight );
|
|
|
|
|
- pixelPass.uniforms.resolution.value.multiplyScalar( window.devicePixelRatio );
|
|
|
|
|
- pixelPass.renderToScreen = true;
|
|
|
|
|
- composer.addPass( pixelPass );
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- window.addEventListener( 'resize', resize );
|
|
|
|
|
|
|
+ scene.add( group );
|
|
|
|
|
|
|
|
- params = {
|
|
|
|
|
- pixelSize: 128,
|
|
|
|
|
- postprocessing: true
|
|
|
|
|
- };
|
|
|
|
|
- gui = new dat.GUI();
|
|
|
|
|
- gui.add( params, 'pixelSize' ).min( 2 ).max( 256 ).step( 2 );
|
|
|
|
|
- gui.add( params, 'postprocessing' );
|
|
|
|
|
|
|
+ composer = new THREE.EffectComposer( renderer );
|
|
|
|
|
+ composer.addPass( new THREE.RenderPass( scene, camera ) );
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ pixelPass = new THREE.ShaderPass( THREE.PixelShader );
|
|
|
|
|
+ pixelPass.uniforms.resolution.value = new THREE.Vector2( window.innerWidth, window.innerHeight );
|
|
|
|
|
+ pixelPass.uniforms.resolution.value.multiplyScalar( window.devicePixelRatio );
|
|
|
|
|
+ pixelPass.renderToScreen = true;
|
|
|
|
|
+ composer.addPass( pixelPass );
|
|
|
|
|
|
|
|
- function update() {
|
|
|
|
|
|
|
+ window.addEventListener( 'resize', resize );
|
|
|
|
|
|
|
|
- controls.update();
|
|
|
|
|
- updateGUI();
|
|
|
|
|
- group.rotation.y += .0015;
|
|
|
|
|
- group.rotation.z += .001;
|
|
|
|
|
|
|
+ params = {
|
|
|
|
|
+ pixelSize: 128,
|
|
|
|
|
+ postprocessing: true
|
|
|
|
|
+ };
|
|
|
|
|
+ gui = new dat.GUI();
|
|
|
|
|
+ gui.add( params, 'pixelSize' ).min( 2 ).max( 256 ).step( 2 );
|
|
|
|
|
+ gui.add( params, 'postprocessing' );
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- function animate() {
|
|
|
|
|
|
|
+ function update() {
|
|
|
|
|
|
|
|
- update();
|
|
|
|
|
|
|
+ controls.update();
|
|
|
|
|
+ updateGUI();
|
|
|
|
|
|
|
|
- if ( params.postprocessing ) {
|
|
|
|
|
|
|
+ group.rotation.y += .0015;
|
|
|
|
|
+ group.rotation.z += .001;
|
|
|
|
|
|
|
|
- composer.render();
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- } else {
|
|
|
|
|
|
|
+ function animate() {
|
|
|
|
|
|
|
|
- renderer.render( scene, camera );
|
|
|
|
|
|
|
+ update();
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if ( params.postprocessing ) {
|
|
|
|
|
|
|
|
- window.requestAnimationFrame( animate );
|
|
|
|
|
|
|
+ composer.render();
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ } else {
|
|
|
|
|
|
|
|
- </script>
|
|
|
|
|
- </body>
|
|
|
|
|
|
|
+ renderer.render( scene, camera );
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ window.requestAnimationFrame( animate );
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ </script>
|
|
|
|
|
+ </body>
|
|
|
</html>
|
|
</html>
|
Mr.doob