Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge remote-tracking branch 'remotes/mrdoob/dev' into dev

alteredq 14 years ago
parent
8ab93926ce 319d423262
commit
51b6db1c54
4 changed files with 787 additions and 21 deletions
Unified View Show Diff Stats
  1. 10 20
      examples/webgl_interactive_voxelpainter.html
  2. 614 0
      examples/webgl_materials_cars_parallaxbarrier.html
  3. 1 1
      examples/webgl_performance.html
  4. 162 0
      src/extras/renderers/ParallaxBarrierWebGLRenderer.js

+ 10 - 20
examples/webgl_interactive_voxelpainter.html
View File 

@@ -22,7 +22,7 @@
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/RequestAnimationFrame.js"></script>
 
 		<script src="js/RequestAnimationFrame.js"></script>
 
 		<script src="js/Stats.js"></script>
 
 		<script src="js/Stats.js"></script>
 
-		
+
 
 		<link href="js/gui/gui.css" media="screen" rel="stylesheet" type="text/css" />
 
 		<link href="js/gui/gui.css" media="screen" rel="stylesheet" type="text/css" />
 
 		<script src="js/gui/gui.min.js"></script>
 
 		<script src="js/gui/gui.min.js"></script>
 
 
 
@@ -44,7 +44,7 @@
 
 			var gui, voxelConfig = {
 
 			var gui, voxelConfig = {
 
 				orthographicProjection: false
 
 				orthographicProjection: false
 
 			};
 
 			};
 
-			
+
 
 			init();
 
 			init();
 
 			animate();
 
 			animate();
 
 
 
@@ -58,12 +58,12 @@
 
 				info.style.top = '10px';
 
 				info.style.top = '10px';
 
 				info.style.width = '100%';
 
 				info.style.width = '100%';
 
 				info.style.textAlign = 'center';
 
 				info.style.textAlign = 'center';
 
-				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - voxel painter - webgl<br /><strong>click</strong>: add voxel, <strong>control + click</strong>: remove voxel, <strong>shift + click</strong>: rotate, <a href="javascript:save();return false;">save .png</a>';
 
+				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - voxel painter - webgl<br><strong>click</strong>: add voxel, <strong>control + click</strong>: remove voxel, <strong>shift + click</strong>: rotate, <a href="javascript:save();return false;">save .png</a>';
 
 				container.appendChild( info );
 
 				container.appendChild( info );
 
 
 
 				camera = new THREE.CombinedCamera( window.innerWidth, window.innerHeight, 45, 1, 10000, -2000, 10000 );
 
 				camera = new THREE.CombinedCamera( window.innerWidth, window.innerHeight, 45, 1, 10000, -2000, 10000 );
 
 				camera.position.y = 800;
 
 				camera.position.y = 800;
 
-				
+
 
 				cameraTarget = new THREE.Vector3( 0, 0, 0 );
 
 				cameraTarget = new THREE.Vector3( 0, 0, 0 );
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
@@ -99,20 +99,10 @@
 
 				scene.add( ambientLight );
 
 				scene.add( ambientLight );
 
 
 
 				var directionalLight = new THREE.DirectionalLight( 0xffffff );
 
 				var directionalLight = new THREE.DirectionalLight( 0xffffff );
 
-				directionalLight.position.x = Math.random() - 0.5;
 
-				directionalLight.position.y = Math.random() - 0.5;
 
-				directionalLight.position.z = Math.random() - 0.5;
 
-				directionalLight.position.normalize();
 
-				scene.add( directionalLight );
 
-
 
-				var directionalLight = new THREE.DirectionalLight( 0x808080 );
 
-				directionalLight.position.x = Math.random() - 0.5;
 
-				directionalLight.position.y = Math.random() - 0.5;
 
-				directionalLight.position.z = Math.random() - 0.5;
 
-				directionalLight.position.normalize();
 
+				directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
 
 				scene.add( directionalLight );
 
 				scene.add( directionalLight );
 
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer : true } );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
@@ -126,11 +116,11 @@
 
 				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 
 				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 
 				document.addEventListener( 'keyup', onDocumentKeyUp, false );
 
 				document.addEventListener( 'keyup', onDocumentKeyUp, false );
 
-				
+
 
 				// add GUI
 
 				// add GUI
 
 				gui = new GUI();
 
 				gui = new GUI();
 
 				gui.add(voxelConfig, 'orthographicProjection').onChange(function(){
 
 				gui.add(voxelConfig, 'orthographicProjection').onChange(function(){
 
-					
+
 
 					if ( voxelConfig.orthographicProjection ) {
 
 					if ( voxelConfig.orthographicProjection ) {
 
 						camera.toOrthographic();
 
 						camera.toOrthographic();
 
 						camera.position.x = 1000;
 
 						camera.position.x = 1000;
 
@@ -141,9 +131,9 @@
 
 						camera.toPerspective();
 
 						camera.toPerspective();
 
 						camera.position.y = 800;
 
 						camera.position.y = 800;
 
 					}
 
 					}
 
-				
+
 
 				});
 
 				});
 
-				
+
 
 			}
 
 			}
 
 
 
 			function getRealIntersector( intersects ) {
 
 			function getRealIntersector( intersects ) {

+ 614 - 0
examples/webgl_materials_cars_parallaxbarrier.html
View File 

@@ -0,0 +1,614 @@
 
+<!doctype html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - materials - cube reflection [cars]</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:#000;
 
+				color:#fff;
 
+				padding:0;
 
+				margin:0;
 
+				overflow:hidden;
 
+				font-family:georgia;
 
+				text-align:center;
 
+			}
 
+			h1 { }
 
+			a { color:skyblue; text-decoration:none }
 
+			canvas { pointer-events:none; z-index:10; position:relative; }
 
+
 
+			#d { position:absolute; width: 100%; text-align:center; margin:1em 0 -4.5em 0; z-index:1000; }
 
+
 
+			.bwrap { margin:0.5em 0 0 0 }
 
+			button { font-family:georgia; border:0; background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px; }
 
+			button:hover { background:#333 }
 
+			#buttons_cars button { color:#fa0 }
 
+
 
+			#car_info { text-align:center; }
 
+			#car_name { font-size:1em }
 
+			#car_author { font-size:1em }
 
+
 
+			#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
 
+		</style>
 
+	</head>
 
+
 
+	<body>
 
+		<div id="d">
 
+			<div id="info">
 
+				<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl demo :
 
+				texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank">Humus</a> :
 
+				<span id="car_info">
 
+					<span id="car_name">Bugatti Veyron model</span>
 
+					by <span id="car_author"><a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a></span>
 
+				</span>
 
+
 
+			</div>
 
+
 
+			<div id="buttons_cars" class="bwrap">
 
+				<button id="veyron">Bugatti Veyron</button>
 
+				<button id="gallardo">Lamborghini Gallardo</button>
 
+				<button id="f50">Ferrari F50</button>
 
+				<button id="camaro">Chevrolet Camaro</button>
 
+			</div>
 
+
 
+			<div id="buttons_materials" class="bwrap"></div>
 
+		</div>
 
+
 
+		<script src="../build/Three.js"></script>
 
+		<script src="../src/extras/renderers/ParallaxBarrierWebGLRenderer.js"></script>
 
+
 
+		<script src="js/Detector.js"></script>
 
+		<script src="js/RequestAnimationFrame.js"></script>
 
+		<script src="js/Stats.js"></script>
 
+
 
+		<script>
 
+
 
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+
 
+			var STATS_ENABLED = false;
 
+
 
+			var CARS = {
 
+
 
+				"veyron": 	{
 
+
 
+					name:	"Bugatti Veyron",
 
+					url: 	"obj/veyron/VeyronNoUv_bin.js",
 
+					author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a>',
 
+					init_rotation: [ 0, 0, 0 ],
 
+					scale: 5.5,
 
+					init_material: 4,
 
+					body_materials: [ 2 ],
 
+
 
+					object: null,
 
+					buttons: null,
 
+					materials: null
 
+
 
+				},
 
+
 
+				"gallardo": {
 
+
 
+					name: 	"Lamborghini Gallardo",
 
+					url:	"obj/gallardo/GallardoNoUv_bin.js",
 
+					author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank">machman_3d</a>',
 
+					init_rotation: [ 0, 0, 0 ],
 
+					scale: 3.7,
 
+					init_material: 9,
 
+					body_materials: [ 3 ],
 
+
 
+					object:	null,
 
+					buttons: null,
 
+					materials: null
 
+
 
+				},
 
+
 
+				"f50": {
 
+
 
+					name: 	"Ferrari F50",
 
+					url:	"obj/f50/F50NoUv_bin.js",
 
+					author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1687" target="_blank">daniel sathya</a>',
 
+					init_rotation: [ 0, 0, 0 ],
 
+					scale: 0.175,
 
+					init_material: 2,
 
+					body_materials: [ 3, 6, 7, 8, 9, 10, 23, 24 ],
 
+
 
+					object:	null,
 
+					buttons: null,
 
+					materials: null
 
+
 
+				},
 
+
 
+				"camaro": {
 
+
 
+					name: 	"Chevrolet Camaro",
 
+					url:	"obj/camaro/CamaroNoUv_bin.js",
 
+					author: '<a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank">dskfnwn</a>',
 
+					init_rotation: [ 0.0, 0.0, 0.0 ],
 
+					scale: 75,
 
+					init_material: 0,
 
+					body_materials: [ 0 ],
 
+
 
+					object:	null,
 
+					buttons: null,
 
+					materials: null
 
+
 
+				}
 
+
 
+			};
 
+
 
+
 
+			var container, stats;
 
+
 
+			var camera, scene, renderer;
 
+
 
+			var m, mi;
 
+
 
+			var directionalLight, pointLight;
 
+
 
+			var mouseX = 0, mouseY = 0;
 
+
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
+
 
+			var loader = new THREE.BinaryLoader( true );
 
+			document.body.appendChild( loader.statusDomElement );
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				// LIGHTS
 
+
 
+				var ambient = new THREE.AmbientLight( 0x555555 );
 
+				scene.add( ambient );
 
+
 
+				directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
 
+				directionalLight.position.set( 2, 1.2, 10 ).normalize();
 
+				scene.add( directionalLight );
 
+
 
+				directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 
+				directionalLight.position.set( - 2, 1.2, -10 ).normalize();
 
+				scene.add( directionalLight );
 
+
 
+				pointLight = new THREE.PointLight( 0xffaa00, 2 );
 
+				pointLight.position.set( 2000, 1200, 10000 );
 
+				scene.add( pointLight );
 
+
 
+				// Skybox
 
+
 
+				var shader = THREE.ShaderUtils.lib[ "cube" ];
 
+				shader.uniforms[ "tCube" ].texture = textureCube;
 
+
 
+				var material = new THREE.ShaderMaterial( {
 
+
 
+					fragmentShader: shader.fragmentShader,
 
+					vertexShader: shader.vertexShader,
 
+					uniforms: shader.uniforms
 
+
 
+				} ),
 
+
 
+				mesh = new THREE.Mesh( new THREE.CubeGeometry( 100000, 100000, 100000 ), material );
 
+				mesh.flipSided = true;
 
+				scene.add( mesh );
 
+
 
+				//
 
+
 
+				renderer = new THREE.ParallaxBarrierWebGLRenderer();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setFaceCulling( 0 );
 
+
 
+				container.appendChild( renderer.domElement );
 
+
 
+				if ( STATS_ENABLED ) {
 
+
 
+					stats = new Stats();
 
+					stats.domElement.style.position = 'absolute';
 
+					stats.domElement.style.top = '0px';
 
+					stats.domElement.style.zIndex = 100;
 
+					container.appendChild( stats.domElement );
 
+
 
+				}
 
+
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+
 
+				var r = "textures/cube/Bridge2/";
 
+				var urls = [ r + "posx.jpg", r + "negx.jpg",
 
+							 r + "posy.jpg", r + "negy.jpg",
 
+							 r + "posz.jpg", r + "negz.jpg" ];
 
+
 
+				var textureCube = THREE.ImageUtils.loadTextureCube( urls );
 
+
 
+				// common materials
 
+
 
+				var mlib = {
 
+
 
+				"Orange": 	new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
 
+				"Blue": 	new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
 
+				"Red": 		new THREE.MeshLambertMaterial( { color: 0x660000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
 
+				"Black": 	new THREE.MeshLambertMaterial( { color: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.15 } ),
 
+				"White":	new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
 
+
 
+				"Carmine": 	new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
+				"Gold": 	new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
+				"Bronze":	new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
 
+				"Chrome": 	new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.Multiply } ),
 
+
 
+				"Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
+				"Blue metal": 	new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MultiplyOperation  } ),
 
+				"Red metal": 	new THREE.MeshLambertMaterial( { color: 0x770000, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
+				"Green metal": 	new THREE.MeshLambertMaterial( { color: 0x007711, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
+				"Black metal":	new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
+
 
+				"Pure chrome": 	new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ),
 
+				"Dark chrome":	new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ),
 
+				"Darker chrome":new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube } ),
 
+
 
+				"Black glass": 	new THREE.MeshLambertMaterial( { color: 0x101016, envMap: textureCube, opacity: 0.975, transparent: true } ),
 
+				"Dark glass":	new THREE.MeshLambertMaterial( { color: 0x101046, envMap: textureCube, opacity: 0.25, transparent: true } ),
 
+				"Blue glass":	new THREE.MeshLambertMaterial( { color: 0x668899, envMap: textureCube, opacity: 0.75, transparent: true } ),
 
+				"Light glass":	new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, transparent: true, combine: THREE.MixOperation, reflectivity: 0.25 } ),
 
+
 
+				"Red glass":	new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.75, transparent: true } ),
 
+				"Yellow glass":	new THREE.MeshLambertMaterial( { color: 0xffffaa, opacity: 0.75, transparent: true } ),
 
+				"Orange glass":	new THREE.MeshLambertMaterial( { color: 0x995500, opacity: 0.75, transparent: true } ),
 
+
 
+				"Orange glass 50":	new THREE.MeshLambertMaterial( { color: 0xffbb00, opacity: 0.5, transparent: true } ),
 
+				"Red glass 50": 	new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } ),
 
+
 
+				"Fullblack rough":	new THREE.MeshLambertMaterial( { color: 0x000000 } ),
 
+				"Black rough":		new THREE.MeshLambertMaterial( { color: 0x050505 } ),
 
+				"Darkgray rough":	new THREE.MeshLambertMaterial( { color: 0x090909 } ),
 
+				"Red rough":		new THREE.MeshLambertMaterial( { color: 0x330500 } ),
 
+
 
+				"Darkgray shiny":	new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x050505 } ),
 
+				"Gray shiny":		new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } )
 
+
 
+				}
 
+
 
+				// Gallardo materials
 
+
 
+				CARS[ "gallardo" ].materials = {
 
+
 
+					body: [
 
+
 
+						[ "Orange", 	mlib[ "Orange" ] ],
 
+						[ "Blue", 		mlib[ "Blue" ] ],
 
+						[ "Red", 		mlib[ "Red" ] ],
 
+						[ "Black", 		mlib[ "Black" ] ],
 
+						[ "White", 		mlib[ "White" ] ],
 
+
 
+						[ "Orange metal", 	mlib[ "Orange metal" ] ],
 
+						[ "Blue metal", 	mlib[ "Blue metal" ] ],
 
+						[ "Green metal", 	mlib[ "Green metal" ] ],
 
+						[ "Black metal", 	mlib[ "Black metal" ] ],
 
+
 
+						[ "Carmine", 	mlib[ "Carmine" ] ],
 
+						[ "Gold", 		mlib[ "Gold" ] ],
 
+						[ "Bronze", 	mlib[ "Bronze" ] ],
 
+						[ "Chrome", 	mlib[ "Chrome" ] ]
 
+
 
+					]
 
+
 
+				}
 
+
 
+				m = CARS[ "gallardo" ].materials;
 
+				mi = CARS[ "gallardo" ].init_material;
 
+
 
+				CARS[ "gallardo" ].mmap = {
 
+
 
+					0: mlib[ "Pure chrome" ], 	// wheels chrome
 
+					1: mlib[ "Black rough" ],   // tire
 
+					2: mlib[ "Black glass" ], 	// windshield
 
+					3: m.body[ mi ][ 1 ], 		// body
 
+					4: mlib[ "Red glass" ],    	// back lights
 
+					5: mlib[ "Yellow glass" ],  // front lights
 
+					6: mlib[ "Dark chrome" ]	// windshield rim
 
+
 
+				}
 
+
 
+				// Veyron materials
 
+
 
+				CARS[ "veyron" ].materials = {
 
+
 
+					body: [
 
+
 
+						[ "Orange metal", 	mlib[ "Orange metal" ] ],
 
+						[ "Blue metal", 	mlib[ "Blue metal" ] ],
 
+						[ "Red metal", 		mlib[ "Red metal" ] ],
 
+						[ "Green metal",	mlib[ "Green metal" ] ],
 
+						[ "Black metal", 	mlib[ "Black metal" ] ],
 
+
 
+						[ "Gold", 		mlib[ "Gold" ] ],
 
+						[ "Bronze", 	mlib[ "Bronze" ] ],
 
+						[ "Chrome", 	mlib[ "Chrome" ] ]
 
+
 
+					],
 
+
 
+				}
 
+
 
+				m = CARS[ "veyron" ].materials;
 
+				mi = CARS[ "veyron" ].init_material;
 
+
 
+				CARS[ "veyron" ].mmap = {
 
+
 
+					0: mlib[ "Black rough" ],		// tires + inside
 
+					1: mlib[ "Pure chrome" ],		// wheels + extras chrome
 
+					2: m.body[ mi ][ 1 ], 			// back / top / front torso
 
+					3: mlib[ "Dark glass" ],		// glass
 
+					4: mlib[ "Pure chrome" ],		// sides torso
 
+					5: mlib[ "Pure chrome" ],		// engine
 
+					6: mlib[ "Red glass 50" ],		// backlights
 
+					7: mlib[ "Orange glass 50" ]	// backsignals
 
+
 
+				}
 
+
 
+				// F50 materials
 
+
 
+				CARS[ "f50" ].materials = {
 
+
 
+					body: [
 
+
 
+						[ "Orange", 	mlib[ "Orange" ] ],
 
+						[ "Blue", 		mlib[ "Blue" ] ],
 
+						[ "Red", 		mlib[ "Red" ] ],
 
+						[ "Black", 		mlib[ "Black" ] ],
 
+						[ "White", 		mlib[ "White" ] ],
 
+
 
+						[ "Orange metal", 	mlib[ "Orange metal" ] ],
 
+						[ "Blue metal", 	mlib[ "Blue metal" ] ],
 
+						[ "Black metal", 	mlib[ "Black metal" ] ],
 
+
 
+						[ "Carmine", 	mlib[ "Carmine" ] ],
 
+						[ "Gold", 		mlib[ "Gold" ] ],
 
+						[ "Bronze", 	mlib[ "Bronze" ] ],
 
+						[ "Chrome", 	mlib[ "Chrome" ] ]
 
+
 
+					],
 
+
 
+				}
 
+
 
+				m = CARS[ "f50" ].materials;
 
+				mi = CARS[ "f50" ].init_material;
 
+
 
+				CARS[ "f50" ].mmap = {
 
+
 
+					0:  mlib[ "Dark chrome" ], 		// interior + rim
 
+					1:  mlib[ "Pure chrome" ], 		// wheels + gears chrome
 
+					2:  mlib[ "Blue glass" ], 		// glass
 
+					3:  m.body[ mi ][ 1 ], 			// torso mid + front spoiler
 
+					4:  mlib[ "Darkgray shiny" ], 	// interior + behind seats
 
+					5:  mlib[ "Darkgray shiny" ], 	// tiny dots in interior
 
+					6:  m.body[ mi ][ 1 ], 			// back torso
 
+					7:  m.body[ mi ][ 1 ], 			// right mirror decal
 
+					8:  m.body[ mi ][ 1 ], 			// front decal
 
+					9:  m.body[ mi ][ 1 ], 			// front torso
 
+					10: m.body[ mi ][ 1 ], 			// left mirror decal
 
+					11: mlib[ "Pure chrome" ], 		// engine
 
+					12: mlib[ "Darkgray rough" ],	// tires side
 
+					13: mlib[ "Darkgray rough" ],	// tires bottom
 
+					14: mlib[ "Darkgray shiny" ], 	// bottom
 
+					15: mlib[ "Black rough" ],		// ???
 
+					16: mlib[ "Orange glass" ],		// front signals
 
+					17: mlib[ "Dark chrome" ], 		// wheels center
 
+					18: mlib[ "Red glass" ], 		// back lights
 
+					19: mlib[ "Black rough" ], 		// ???
 
+					20: mlib[ "Red rough" ], 		// seats
 
+					21: mlib[ "Black rough" ], 		// back plate
 
+					22: mlib[ "Black rough" ], 		// front light dots
 
+					23: m.body[ mi ][ 1 ], 			// back torso
 
+					24: m.body[ mi ][ 1 ] 			// back torso center
 
+
 
+				}
 
+
 
+
 
+				// Camero materials
 
+
 
+				CARS[ "camaro" ].materials = {
 
+
 
+					body: [
 
+
 
+						[ "Orange", 	mlib[ "Orange" ] ],
 
+						[ "Blue", 		mlib[ "Blue" ] ],
 
+						[ "Red", 		mlib[ "Red" ] ],
 
+						[ "Black", 		mlib[ "Black" ] ],
 
+						[ "White", 		mlib[ "White" ] ],
 
+
 
+						[ "Orange metal", 	mlib[ "Orange metal" ] ],
 
+						[ "Blue metal", 	mlib[ "Blue metal" ] ],
 
+						[ "Red metal", 		mlib[ "Red metal" ] ],
 
+						[ "Green metal", 	mlib[ "Green metal" ] ],
 
+						[ "Black metal", 	mlib[ "Black metal" ] ],
 
+
 
+						[ "Gold", 		mlib[ "Gold" ] ],
 
+						[ "Bronze", 	mlib[ "Bronze" ] ],
 
+						[ "Chrome", 	mlib[ "Chrome" ] ]
 
+
 
+					],
 
+
 
+				}
 
+
 
+				m = CARS[ "camaro" ].materials;
 
+				mi = CARS[ "camaro" ].init_material;
 
+
 
+				CARS[ "camaro" ].mmap = {
 
+
 
+					0: m.body[ mi ][ 1 ], 			// car body
 
+					1: mlib[ "Pure chrome" ], 		// wheels chrome
 
+					2: mlib[ "Pure chrome" ], 		// grille chrome
 
+					3: mlib[ "Dark chrome" ], 		// door lines
 
+					4: mlib[ "Light glass" ], 		// windshield
 
+					5: mlib[ "Gray shiny" ],        // interior
 
+					6: mlib[ "Black rough" ],       // tire
 
+					7: mlib[ "Fullblack rough" ],   // tireling
 
+					8: mlib[ "Fullblack rough" ]    // behind grille
 
+
 
+				}
 
+
 
+				loader.load( { model: CARS[ "veyron" ].url, callback: function( geometry ) { createScene( geometry, "veyron" ) } } );
 
+
 
+				for( var c in CARS ) initCarButton( c );
 
+
 
+			}
 
+
 
+			function initCarButton( car ) {
 
+
 
+				$( car ).addEventListener( 'click', function() {
 
+
 
+					if ( ! CARS[ car ].object ) {
 
+
 
+						loader.statusDomElement.style.display = "block";
 
+						loader.load( { model: CARS[ car ].url, callback: function( geometry ) { createScene( geometry, car ) } } );
 
+
 
+					} else {
 
+
 
+						switchCar( car );
 
+
 
+					}
 
+
 
+				}, false);
 
+
 
+			}
 
+
 
+			function $( id ) { return document.getElementById( id ) }
 
+			function button_name( car, index ) { return "m_" + car  + "_" + index }
 
+
 
+			function switchCar( car ) {
 
+
 
+				for ( var c in CARS ) {
 
+
 
+					if ( c != car && CARS[ c ].object ) {
 
+
 
+						CARS[ c ].object.visible = false;
 
+						CARS[ c ].buttons.style.display = "none";
 
+
 
+					}
 
+				}
 
+
 
+				CARS[ car ].object.visible = true;
 
+				CARS[ car ].buttons.style.display = "block";
 
+
 
+				$( "car_name" ).innerHTML = CARS[ car ].name + " model";
 
+				$( "car_author" ).innerHTML = CARS[ car ].author;
 
+
 
+			}
 
+
 
+			function createButtons( materials, car ) {
 
+
 
+				var buttons, i, src = "";
 
+
 
+				for( i = 0; i < materials.length; i++ ) {
 
+
 
+					src += '<button id="' + button_name( car, i ) + '">' + materials[ i ][ 0 ] + '</button> ';
 
+
 
+				}
 
+
 
+				buttons = document.createElement("div");
 
+				buttons.innerHTML = src;
 
+
 
+				$( "buttons_materials" ).appendChild( buttons );
 
+
 
+				return buttons;
 
+
 
+			}
 
+
 
+			function attachButtonMaterials( materials, geometry, material_indices, car ) {
 
+
 
+				for( var i = 0; i < materials.length; i++ ) {
 
+
 
+					$( button_name( car, i ) ).counter = i;
 
+					$( button_name( car, i ) ).addEventListener( 'click', function() {
 
+
 
+						for ( var j = 0; j < material_indices.length; j++ ) {
 
+
 
+							geometry.materials[ material_indices [ j ] ][ 0 ] = materials[ this.counter ][ 1 ];
 
+
 
+						}
 
+
 
+					}, false );
 
+
 
+				}
 
+
 
+			}
 
+
 
+			function createScene( geometry, car ) {
 
+
 
+				loader.statusDomElement.innerHTML = "Creating model ...";
 
+
 
+				var m = new THREE.MeshFaceMaterial(),
 
+					s = CARS[ car ].scale * 1,
 
+					r = CARS[ car ].init_rotation,
 
+					materials = CARS[ car ].materials,
 
+					mi = CARS[ car ].init_material,
 
+					bm = CARS[ car ].body_materials;
 
+
 
+				for( var i in CARS[ car ].mmap ) {
 
+
 
+					geometry.materials[ i ][ 0 ] = CARS[ car ].mmap[ i ];
 
+
 
+				}
 
+
 
+				var mesh = new THREE.Mesh( geometry, m );
 
+				mesh.rotation.x = r[ 0 ];
 
+				mesh.rotation.y = r[ 1 ];
 
+				mesh.rotation.z = r[ 2 ];
 
+				mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
 
+				scene.add( mesh );
 
+
 
+				CARS[ car ].object = mesh;
 
+
 
+				CARS[ car ].buttons = createButtons( materials.body, car );
 
+				attachButtonMaterials( materials.body, geometry, bm, car );
 
+
 
+				switchCar( car );
 
+
 
+				loader.statusDomElement.style.display = "none";
 
+				loader.statusDomElement.innerHTML = "Loading model ...";
 
+
 
+			}
 
+
 
+			function onDocumentMouseMove(event) {
 
+
 
+				mouseY = ( event.clientY - window.innerHeight );
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				var timer = - new Date().getTime() * 0.0002;
 
+
 
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
+
 
+				camera.position.x = 1000 * Math.cos( timer );
 
+				camera.position.z = 1000 * Math.sin( timer );
 
+
 
+				camera.lookAt( scene.position );
 
+
 
+				renderer.render( scene, camera );
 
+
 
+				if ( STATS_ENABLED ) stats.update();
 
+
 
+			}
 
+
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 1 - 1
examples/webgl_performance.html
View File 

@@ -77,7 +77,7 @@
 
 
 
 				} } );
 
 				} } );
 
 
 
-				renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
 
+				renderer = new THREE.WebGLRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.sortObjects = false;
 
 				renderer.sortObjects = false;
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );

+ 162 - 0
src/extras/renderers/ParallaxBarrierWebGLRenderer.js
View File 

@@ -0,0 +1,162 @@
 
+/**
 
+ * @author mrdoob / http://mrdoob.com/
 
+ * @author marklundin / http://mark-lundin.com/
 
+ */
 
+
 
+if ( THREE.WebGLRenderer ) {
 
+
 
+	THREE.ParallaxBarrierWebGLRenderer = function ( parameters ) {
 
+
 
+		THREE.WebGLRenderer.call( this, parameters );
 
+
 
+		var _this = this, _setSize = this.setSize, _render = this.render;
 
+
 
+		var _cameraL = new THREE.PerspectiveCamera(),
 
+			_cameraR = new THREE.PerspectiveCamera();
 
+
 
+		var eyeRight = new THREE.Matrix4(),
 
+			eyeLeft = new THREE.Matrix4(),
 
+			focalLength = 125,
 
+			aspect, near, fov;
 
+
 
+		_cameraL.matrixAutoUpdate = _cameraR.matrixAutoUpdate = false;
 
+
 
+		var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
 
+
 
+		var _renderTargetL = new THREE.WebGLRenderTarget( 512, 512, _params ),
 
+			_renderTargetR = new THREE.WebGLRenderTarget( 512, 512, _params );
 
+
 
+		var _camera = new THREE.PerspectiveCamera( 53, 1, 1, 10000 );
 
+		_camera.position.z = 2;
 
+
 
+		_material = new THREE.ShaderMaterial( {
 
+
 
+			uniforms: {
 
+
 
+				"mapLeft": { type: "t", value: 0, texture: _renderTargetL },
 
+				"mapRight": { type: "t", value: 1, texture: _renderTargetR }
 
+
 
+			},
 
+
 
+			vertexShader: [
 
+
 
+				"varying vec2 vUv;",
 
+
 
+				"void main() {",
 
+
 
+					"vUv = vec2( uv.x, 1.0 - uv.y );",
 
+					"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
 
+
 
+				"}"
 
+
 
+			].join("\n"),
 
+
 
+			fragmentShader: [
 
+
 
+				"uniform sampler2D mapLeft;",
 
+				"uniform sampler2D mapRight;",
 
+				"varying vec2 vUv;",
 
+
 
+				"void main() {",
 
+
 
+					"vec2 uv = vUv;",
 
+
 
+					"if ( ( mod(gl_FragCoord.x, 2.0) ) > 1.00 ) {",
 
+
 
+						"gl_FragColor = texture2D( mapLeft, uv );",
 
+
 
+					"} else {",
 
+
 
+						"gl_FragColor = texture2D( mapRight, uv );",
 
+
 
+					"}",
 
+
 
+				"}"
 
+
 
+				].join("\n")
 
+
 
+		} );
 
+
 
+		var _scene = new THREE.Scene();
 
+		_scene.add( new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), _material ) );
 
+
 
+		this.setSize = function ( width, height ) {
 
+
 
+			_setSize.call( _this, width, height );
 
+
 
+			_renderTargetL.width = width;
 
+			_renderTargetL.height = height;
 
+
 
+			_renderTargetR.width = width;
 
+			_renderTargetR.height = height;
 
+
 
+		};
 
+
 
+		/*
 
+		 * Renderer now uses an asymmetric perspective projection (http://paulbourke.net/miscellaneous/stereographics/stereorender/).
 
+		 * Each camera is offset by the eye seperation and its projection matrix is also skewed asymetrically back to converge on the same
 
+		 * projection plane. Added a focal length parameter to, this is where the parallax is equal to 0.
 
+		 */
 
+
 
+		this.render = function ( scene, camera, renderTarget, forceClear ) {
 
+
 
+			camera.update( null, true );
 
+
 
+			var hasCameraChanged = aspect !== camera.aspect || near !== camera.near || fov !== camera.fov;
 
+
 
+			if( hasCameraChanged ) {
 
+
 
+				aspect = camera.aspect;
 
+				near = camera.near;
 
+				fov = camera.fov;
 
+
 
+				var projectionMatrix = camera.projectionMatrix.clone(),
 
+					eyeSep = focalLength / 30 * 0.5,
 
+					eyeSepOnProjection = eyeSep * near / focalLength,
 
+					ymax = near * Math.tan( fov * Math.PI / 360 ),
 
+					xmin, xmax;
 
+
 
+				//translate xOffset
 
+
 
+				eyeRight.n14 = eyeSep;
 
+				eyeLeft.n14 = -eyeSep;
 
+
 
+				//For left eye
 
+
 
+				xmin = -ymax * aspect + eyeSepOnProjection;
 
+				xmax = ymax * aspect + eyeSepOnProjection;
 
+				projectionMatrix.n11 = 2 * near / ( xmax - xmin );
 
+				projectionMatrix.n13 = ( xmax + xmin ) / ( xmax - xmin );
 
+				_cameraL.projectionMatrix = projectionMatrix.clone();
 
+
 
+				//for right eye
 
+
 
+				xmin = -ymax * aspect - eyeSepOnProjection;
 
+				xmax = ymax * aspect - eyeSepOnProjection;
 
+				projectionMatrix.n11 = 2 * near / ( xmax - xmin );
 
+				projectionMatrix.n13 = ( xmax + xmin ) / ( xmax - xmin );
 
+				_cameraR.projectionMatrix = projectionMatrix.clone();
 
+
 
+			}
 
+
 
+			_cameraL.matrix = camera.matrixWorld.clone().multiplySelf( eyeLeft );
 
+			_cameraL.update( null, true );
 
+			_cameraL.position.copy( camera.position );
 
+			_cameraL.near = near;
 
+			_cameraL.far = camera.far;
 
+			_render.call( _this, scene, _cameraL, _renderTargetL, true );
 
+
 
+			_cameraR.matrix = camera.matrixWorld.clone().multiplySelf( eyeRight );
 
+			_cameraR.update( null, true );
 
+			_cameraR.position.copy( camera.position );
 
+			_cameraR.near = near;
 
+			_cameraR.far = camera.far;
 
+			_render.call( _this, scene, _cameraR, _renderTargetR, true );
 
+
 
+			_render.call( _this, _scene, _camera );
 
+
 
+		};
 
+
 
+	};
 
+
 
+};