home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

Added dot screen shader / effect. Extended postprocessing demo. Fixed viewport bug for render targets.

Browse Source
This commit is contained in:
alteredq
2011-08-30 16:48:47 +02:00
parent 32f0f884bd
commit 093bbb1cb9
7 changed files with 254 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/webgl_postprocessing.html
+124 -29
View File
@@ -17,11 +17,14 @@
}
#info {
color:#000;
position: absolute;
top: 0px; width: 100%;
color:#000;
background-color: rgba( 255, 255, 255, 0.95 );
position: relative;
margin: 0 auto -2em;
top: 0px;
width: 550px;
padding: 5px;
z-index:100;
}
a { color: red; }
@@ -29,12 +32,13 @@
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl postprocessing example -
<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head
</div>
<div id="container"></div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
@@ -42,6 +46,8 @@
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
<script type="text/javascript" src="js/postprocessing/FilmPass.js"></script>
<script type="text/javascript" src="js/postprocessing/SepiaPass.js"></script>
<script type="text/javascript" src="js/postprocessing/DotScreenPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ScreenPass.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
@@ -84,14 +90,14 @@
var container, stats;
var composer;
var composerScene, composer1, composer2, composer3, composer4;
var cameraOrtho, cameraPerspective, sceneModel, sceneBG, renderer, mesh, directionalLight;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var halfWidth = window.innerWidth / 2;
var halfHeight = window.innerHeight / 2;
var rtTexture, materialColor, materialScreen, materialFilm, materialConvolution, blurx, blury, quadBG, quadScreen;
var rtTexture, materialColor, material2D, quadBG1, quadBG2;
var delta = 0.01;
@@ -102,7 +108,7 @@
container = document.getElementById( 'container' );
cameraOrtho = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
cameraOrtho = new THREE.OrthoCamera( -halfWidth, halfWidth, halfHeight, -halfHeight, -10000, 10000 );
cameraOrtho.position.z = 100;
cameraPerspective = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
@@ -134,11 +140,12 @@
} );
var plane = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight );
var plane = new THREE.PlaneGeometry( 1, 1 );
quadBG = new THREE.Mesh( plane, materialColor );
quadBG.position.z = -500;
sceneBG.addObject( quadBG );
quadBG1 = new THREE.Mesh( plane, materialColor );
quadBG1.position.z = -500;
quadBG1.scale.set( window.innerWidth, window.innerHeight, 1 );
sceneBG.addObject( quadBG1 );
//
@@ -155,22 +162,83 @@
//
var renderBackground = new THREE.RenderPass( sceneBG, cameraOrtho );
var renderModel = new THREE.RenderPass( sceneModel, cameraPerspective );
var effectBloom = new THREE.BloomPass( 0.75 );
var effectFilm = new THREE.FilmPass( 0.35, 0.5, 2048, false );
var effectFilmBW = new THREE.FilmPass( 0.35, 0.5, 2048, true );
var effectSepia = new THREE.SepiaPass( 1.0 );
var effectScreen = new THREE.ScreenPass();
var effectDotScreen = new THREE.DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.4 );
effectFilm.renderToScreen = true;
effectFilmBW.renderToScreen = true;
effectDotScreen.renderToScreen = true;
//
var renderBackground = new THREE.RenderPass( sceneBG, cameraOrtho );
var renderModel = new THREE.RenderPass( sceneModel, cameraPerspective );
renderModel.clear = false;
effectFilm.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composerScene = new THREE.EffectComposer( renderer );
composer.addPass( renderBackground );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectSepia );
composer.addPass( effectFilm );
composerScene.addPass( renderBackground );
composerScene.addPass( renderModel );
//
scene2D = new THREE.Scene();
var shader = THREE.ShaderUtils.lib[ "screen" ];
material2D = new THREE.MeshShaderMaterial( {
uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
} );
material2D.uniforms[ "tDiffuse" ].texture = composerScene.renderTarget;
quadBG2 = new THREE.Mesh( plane, material2D );
quadBG2.position.z = -500;
quadBG2.scale.set( window.innerWidth, window.innerHeight, 1 );
scene2D.addObject( quadBG2 );
var renderScene = new THREE.RenderPass( scene2D, cameraOrtho );
//
composer1 = new THREE.EffectComposer( renderer );
composer1.addPass( renderScene );
composer1.addPass( effectBloom );
composer1.addPass( effectFilmBW );
//
composer2 = new THREE.EffectComposer( renderer );
composer2.addPass( renderScene );
composer2.addPass( effectDotScreen );
//
composer3 = new THREE.EffectComposer( renderer );
composer3.addPass( renderScene );
composer3.addPass( effectSepia );
composer3.addPass( effectFilm );
//
composer4 = new THREE.EffectComposer( renderer );
composer4.addPass( renderScene );
composer4.addPass( effectBloom );
composer4.addPass( effectSepia );
composer4.addPass( effectScreen );
//
@@ -182,19 +250,32 @@
function onWindowResize( event ) {
halfWidth = window.innerWidth / 2;
halfHeight = window.innerHeight / 2;
renderer.setSize( window.innerWidth, window.innerHeight );
cameraPerspective.aspect = window.innerWidth / window.innerHeight;
cameraPerspective.updateProjectionMatrix();
cameraOrtho.left = window.innerWidth / - 2;
cameraOrtho.right = window.innerWidth / 2;
cameraOrtho.top = window.innerHeight / 2;
cameraOrtho.bottom = window.innerHeight / - 2;
cameraOrtho.left = -halfWidth;
cameraOrtho.right = halfWidth;
cameraOrtho.top = halfHeight;
cameraOrtho.bottom = -halfHeight;
cameraOrtho.updateProjectionMatrix();
composer.reset();
composerScene.reset();
composer1.reset();
composer2.reset();
composer3.reset();
composer4.reset();
material2D.uniforms[ "tDiffuse" ].texture = composerScene.renderTarget;
quadBG1.scale.set( window.innerWidth, window.innerHeight, 1 );
quadBG2.scale.set( window.innerWidth, window.innerHeight, 1 );
}
@@ -265,8 +346,22 @@
materialColor.uniforms.time.value += delta / 2;
renderer.setViewport( 0, 0, 2 * halfWidth, 2 * halfHeight );
renderer.clear();
composer.render( delta );
composerScene.render( delta );
renderer.setViewport( 0, 0, halfWidth, halfHeight );
composer1.render( delta );
renderer.setViewport( halfWidth, 0, halfWidth, halfHeight );
composer2.render( delta );
renderer.setViewport( 0, halfHeight, halfWidth, halfHeight );
composer3.render( delta );
renderer.setViewport( halfWidth, halfHeight, halfWidth, halfHeight );
composer4.render( delta );
}