Merge pull request #1 from mrdoob/dev

Dev sync

editor/index.html

@@ -65,7 +65,7 @@
 		<script src="js/Menubar.Help.js"></script>
 		<script src="js/Menubar.Status.js"></script>
 		<script src="js/Sidebar.js"></script>
-		<script src="js/Sidebar.Renderer.js"></script>
+		<script src="js/Sidebar.Project.js"></script>
 		<script src="js/Sidebar.Scene.js"></script>
 		<script src="js/Sidebar.Object3D.js"></script>
 		<script src="js/Sidebar.Animation.js"></script>

editor/js/Config.js

@@ -9,10 +9,11 @@ var Config = function () {
 	var storage = {
 		'autosave': true,
 		'theme': 'css/light.css',
-		
-		'renderer': 'WebGLRenderer',
-		'renderer/antialias': true,
-	
+
+		'project/renderer': 'WebGLRenderer',
+		'project/renderer/antialias': true,
+		'project/vr': false,
+
 		'camera/position': [ 500, 250, 500 ],
 		'camera/target': [ 0, 0, 0 ],
 
@@ -20,7 +21,7 @@ var Config = function () {
 		'ui/sidebar/geometry/collapsed': true,
 		'ui/sidebar/material/collapsed': true,
 		'ui/sidebar/object3d/collapsed': false,
-		'ui/sidebar/renderer/collapsed': true,
+		'ui/sidebar/project/collapsed': true,
 		'ui/sidebar/scene/collapsed': false,
 		'ui/sidebar/script/collapsed': true
 	};

editor/js/Sidebar.Renderer.js → editor/js/Sidebar.Project.js

@@ -2,7 +2,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Renderer = function ( editor ) {
+Sidebar.Project = function ( editor ) {
 
 	var signals = editor.signals;
 
@@ -17,14 +17,14 @@ Sidebar.Renderer = function ( editor ) {
 	};
 
 	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( editor.config.getKey( 'ui/sidebar/renderer/collapsed' ) );
+	container.setCollapsed( editor.config.getKey( 'ui/sidebar/project/collapsed' ) );
 	container.onCollapsedChange( function ( boolean ) {
 
-		editor.config.setKey( 'ui/sidebar/renderer/collapsed', boolean );
+		editor.config.setKey( 'ui/sidebar/project/collapsed', boolean );
 
 	} );
 
-	container.addStatic( new UI.Text( 'RENDERER' ) );
+	container.addStatic( new UI.Text( 'PROJECT' ) );
 	container.add( new UI.Break() );
 
 	// class
@@ -42,28 +42,28 @@ Sidebar.Renderer = function ( editor ) {
 	var rendererTypeRow = new UI.Panel();
 	var rendererType = new UI.Select().setOptions( options ).setWidth( '150px' ).onChange( function () {
 
-		editor.config.setKey( 'renderer', this.getValue() );
+		editor.config.setKey( 'project/renderer', this.getValue() );
 		updateRenderer();
 
 	} );
 
-	rendererTypeRow.add( new UI.Text( 'Type' ).setWidth( '90px' ) );
+	rendererTypeRow.add( new UI.Text( 'Renderer' ).setWidth( '90px' ) );
 	rendererTypeRow.add( rendererType );
 
 	container.add( rendererTypeRow );
 
-	if ( editor.config.getKey( 'renderer' ) !== undefined ) {
+	if ( editor.config.getKey( 'project/renderer' ) !== undefined ) {
 
-		rendererType.setValue( editor.config.getKey( 'renderer' ) );
+		rendererType.setValue( editor.config.getKey( 'project/renderer' ) );
 
 	}
-	
+
 	// antialiasing
 
 	var rendererAntialiasRow = new UI.Panel();
-	var rendererAntialias = new UI.Checkbox( editor.config.getKey( 'renderer/antialias' ) ).setLeft( '100px' ).onChange( function () {
+	var rendererAntialias = new UI.Checkbox( editor.config.getKey( 'project/renderer/antialias' ) ).setLeft( '100px' ).onChange( function () {
 
-		editor.config.setKey( 'renderer/antialias', this.getValue() );
+		editor.config.setKey( 'project/renderer/antialias', this.getValue() );
 		// updateRenderer();
 
 	} );
@@ -73,6 +73,21 @@ Sidebar.Renderer = function ( editor ) {
 
 	container.add( rendererAntialiasRow );
 
+	// VR
+
+	var vrRow = new UI.Panel();
+	var vr = new UI.Checkbox( editor.config.getKey( 'project/vr' ) ).setLeft( '100px' ).onChange( function () {
+
+		editor.config.setKey( 'project/vr', this.getValue() );
+		// updateRenderer();
+
+	} );
+
+	vrRow.add( new UI.Text( 'VR' ).setWidth( '90px' ) );
+	vrRow.add( vr );
+
+	container.add( vrRow );
+
 	//
 
 	function updateRenderer() {

editor/js/Sidebar.js

@@ -7,7 +7,7 @@ var Sidebar = function ( editor ) {
 	var container = new UI.Panel();
 	container.setId( 'sidebar' );
 
-	container.add( new Sidebar.Renderer( editor ) );
+	container.add( new Sidebar.Project( editor ) );
 	container.add( new Sidebar.Scene( editor ) );
 	container.add( new Sidebar.Object3D( editor ) );
 	container.add( new Sidebar.Geometry( editor ) );

editor/js/Viewport.js

@@ -535,7 +535,7 @@ var Viewport = function ( editor ) {
 	};
 
 	var clearColor;
-	var renderer = createRenderer( editor.config.getKey( 'renderer' ), editor.config.getKey( 'renderer/antialias' ) );
+	var renderer = createRenderer( editor.config.getKey( 'project/renderer' ), editor.config.getKey( 'project/renderer/antialias' ) );
 	container.dom.appendChild( renderer.domElement );
 
 	animate();

examples/index.html

@@ -211,7 +211,6 @@
 				"webgl_effects_anaglyph",
 				"webgl_effects_parallaxbarrier",
 				"webgl_effects_stereo",
-				"webgl_effects_vr",
 				"webgl_geometries",
 				"webgl_geometries2",
 				"webgl_geometry_colors",
@@ -358,6 +357,7 @@
 				"webgl_shaders_vector",
 				"webgl_shadowmap",
 				"webgl_shadowmap_performance",
+				"webgl_shadowmap_viewer",
 				"webgl_sprites",
 				"webgl_terrain_dynamic",
 				"webgl_test_memory",
@@ -370,6 +370,9 @@
 				"webgldeferred_arealights",
 				"webgldeferred_pointlights"
 			],
+			"vr": [
+				"vr_cubes"
+			],
 			"css3d": [
 				"css3d_molecules",
 				"css3d_panorama",

examples/js/controls/EditorControls.js

@@ -116,8 +116,6 @@ THREE.EditorControls = function ( object, domElement ) {
 
 		if ( scope.enabled === false ) return;
 
-		event.preventDefault();
-
 		if ( event.button === 0 ) {
 
 			state = STATE.ROTATE;
@@ -145,8 +143,6 @@ THREE.EditorControls = function ( object, domElement ) {
 
 		if ( scope.enabled === false ) return;
 
-		event.preventDefault();
-
 		pointer.set( event.clientX, event.clientY );
 
 		var movementX = pointer.x - pointerOld.x;

examples/js/controls/OrbitControls.js

@@ -17,7 +17,7 @@
 //
 // This is a drop-in replacement for (most) TrackballControls used in examples.
 // That is, include this js file and wherever you see:
-//    	controls = new THREE.TrackballControls( camera );
+//      controls = new THREE.OrbitControls( camera );
 //      controls.target.z = 150;
 // Simple substitute "OrbitControls" and the control should work as-is.
 

examples/js/renderers/RaytracingRenderer.js

@@ -49,6 +49,8 @@ THREE.RaytracingRenderer = function ( parameters ) {
 
 	};
 
+	this.setPixelRatio = function () {};
+
 	this.setSize = function ( width, height ) {
 
 		canvas.width = width;
@@ -532,4 +534,4 @@ THREE.RaytracingRenderer = function ( parameters ) {
 
 	};
 
-};
\ No newline at end of file
+};

examples/js/utils/ShadowMapViewer.js

+/**
+ * @author arya-s / https://github.com/arya-s
+ *
+ * This is a helper for visualising a given light's shadow map.
+ * It works for shadow casting lights: THREE.DirectionalLight and THREE.SpotLight.
+ * It renders out the shadow map and displays it on a HUD.
+ *
+ * Example usage:
+ *	1) Include <script src='examples/js/utils/ShadowMapViewer.js'><script> in your html file
+ *
+ *	2) Create a shadow casting light and name it optionally:
+ *		var light = new THREE.DirectionalLight( 0xffffff, 1 );
+ *		light.castShadow = true;
+ *		light.name = 'Sun';
+ *
+ *	3) Create a shadow map viewer for that light and set its size and position optionally:
+ *		var shadowMapViewer = THREE.ShadowMapViewer( light );
+ *		shadowMapViewer.size.set( 128, 128 );	//width, height  default: 256, 256
+ *		shadowMapViewer.position.set( 10, 10 );	//x, y in pixel	 default: 0, 0 (top left corner)
+ *
+ *	4) Render the shadow map viewer in your render loop:
+ *		shadowMapViewer.render( renderer );
+ *
+ *	5) Optionally: Update the shadow map viewer on window resize:
+ *		shadowMapViewer.updateForWindowResize();
+ *
+ *	6) If you set the position or size members directly, you need to call shadowMapViewer.update();
+ */
+
+THREE.ShadowMapViewer = function ( light ) {
+
+	//- Internals
+	var scope = this;
+	var doRenderLabel = ( light.name !== undefined && light.name !== '' );
+	var userAutoClearSetting;
+
+	//Holds the initial position and dimension of the HUD
+	var frame = { 
+		x: 10,
+		y: 10,
+		width: 256,
+		height: 256,
+	};
+
+	var camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 10 );
+	camera.position.set( 0, 0, 2 );
+	var scene = new THREE.Scene();
+
+	//HUD for shadow map
+	var shader = THREE.UnpackDepthRGBAShader;
+
+	var uniforms = new THREE.UniformsUtils.clone( shader.uniforms );
+	var material = new THREE.ShaderMaterial( {
+		uniforms: uniforms,
+		vertexShader: shader.vertexShader,
+		fragmentShader: shader.fragmentShader
+	} );
+	var plane = new THREE.PlaneBufferGeometry( frame.width, frame.height );
+	var mesh = new THREE.Mesh( plane, material );
+
+	scene.add( mesh );
+
+
+	//Label for light's name
+	var labelCanvas, labelMesh;
+
+	if ( doRenderLabel ) {
+
+		labelCanvas = document.createElement( 'canvas' );
+
+		var context = labelCanvas.getContext( '2d' );
+		context.font = 'Bold 20px Arial';
+
+		var labelWidth = context.measureText( light.name ).width;
+		labelCanvas.width = labelWidth;
+		labelCanvas.height = 25;	//25 to account for g, p, etc.
+
+		context.font = 'Bold 20px Arial';
+		context.fillStyle = 'rgba( 255, 0, 0, 1 )';
+		context.fillText( light.name, 0, 20 );
+
+		var labelTexture = new THREE.Texture( labelCanvas );
+		labelTexture.magFilter = THREE.LinearFilter;
+		labelTexture.minFilter = THREE.LinearFilter;
+		labelTexture.needsUpdate = true;
+
+		var labelMaterial = new THREE.MeshBasicMaterial( { map: labelTexture, side: THREE.DoubleSide } );
+		labelMaterial.transparent = true;
+
+		var labelPlane = new THREE.PlaneBufferGeometry( labelCanvas.width, labelCanvas.height );
+		labelMesh = new THREE.Mesh( labelPlane, labelMaterial );
+
+		scene.add( labelMesh );
+
+	}
+
+
+	function resetPosition () {
+
+		scope.position.set( scope.position.x, scope.position.y );
+
+	}
+
+	//- API
+	// Set to false to disable displaying this shadow map
+	this.enabled = true; 
+
+	// Set the size of the displayed shadow map on the HUD
+	this.size = {
+		width: frame.width,
+		height: frame.height,
+		set: function ( width, height ) {
+
+			this.width = width;
+			this.height = height;
+
+			mesh.scale.set( this.width / frame.width, this.height / frame.height, 1 );
+
+			//Reset the position as it is off when we scale stuff
+			resetPosition();
+
+		}
+	};
+
+	// Set the position of the displayed shadow map on the HUD
+	this.position = {
+		x: frame.x,
+		y: frame.y,
+		set: function ( x, y ) {
+
+			this.x = x;
+			this.y = y;
+
+			var width = scope.size.width;
+			var height = scope.size.height;
+
+			mesh.position.set( -window.innerWidth / 2 + width / 2 + this.x, window.innerHeight / 2 - height / 2 - this.y, 0 );
+
+			if ( doRenderLabel ) labelMesh.position.set( mesh.position.x, mesh.position.y - scope.size.height / 2 + labelCanvas.height / 2, 0 );
+
+		}
+	};
+
+	this.render = function ( renderer ) {
+
+		if ( this.enabled ) {
+
+			//Because a light's .shadowMap is only initialised after the first render pass
+			//we have to make sure the correct map is sent into the shader, otherwise we
+			//always end up with the scene's first added shadow casting light's shadowMap
+			//in the shader
+			//See: https://github.com/mrdoob/three.js/issues/5932
+			uniforms.tDiffuse.value = light.shadowMap;
+
+			userAutoClearSetting = renderer.autoClear;
+			renderer.autoClear = false; // To allow render overlay
+			renderer.clearDepth()
+			renderer.render( scene, camera );
+			renderer.autoClear = userAutoClearSetting;	//Restore user's setting
+
+		}
+
+	};
+
+	this.updateForWindowResize = function () {
+
+		if ( this.enabled ) {
+
+			 camera.left = window.innerWidth / - 2;
+			 camera.right = window.innerWidth / 2;
+			 camera.top = window.innerHeight / 2;
+			 camera.bottom = window.innerHeight / - 2;
+
+		}
+
+	};
+
+	this.update = function () {
+
+		this.position.set( this.position.x, this.position.y );
+		this.size.set( this.size.width, this.size.height );
+
+	};
+
+	//Force an update to set position/size
+	this.update();
+
+}
+
+THREE.ShadowMapViewer.prototype.constructor = THREE.ShadowMapViewer;

examples/webgl_lensflares.html

@@ -59,8 +59,6 @@
 
 			var clock = new THREE.Clock();
 
-			var composer;
-
 			init();
 			animate();
 

examples/webgl_shadowmap_viewer.html

+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - ShadowMapViewer example </title>
+		<meta charset="utf-8">
+		<style>
+			body {
+				font-family: Monospace;
+				background-color: #000;
+				color: #fff;
+				margin: 0px;
+				overflow: hidden;
+			}
+			#info {
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+				display:block;
+			}
+			#info a { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
+		</style>
+	</head>
+	<body>
+		<div id="info">
+		<a href="http://threejs.org" target="_blank">three.js</a> - ShadowMapViewer example by <a href="https://github.com/arya-s">arya-s</a>
+		</div>
+
+		<script src="../build/three.min.js"></script>
+
+		<script src="js/controls/OrbitControls.js"></script>
+
+		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
+
+		<script src="js/utils/ShadowMapViewer.js"></script>
+
+		<script src="js/Detector.js"></script>
+		
+		<script src="js/libs/stats.min.js"></script>
+
+		<script>
+		
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var camera, scene, renderer, clock, stats;
+			var dirLight, spotLight;
+			var torusKnot, cube;
+			var dirLightShadowMapViewer, spotLightShadowMapViewer;
+
+			init();
+			animate();
+
+
+			function init() {
+
+				initScene();
+				initShadowMapViewers();
+				initMisc();
+
+				document.body.appendChild( renderer.domElement );
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function initScene() {
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 1000 );
+				camera.position.set( 0, 15, 35 );
+
+				scene = new THREE.Scene();
+
+				// Lights
+				var ambient = new THREE.AmbientLight( 0x404040 );
+				scene.add( ambient );
+
+				spotLight = new THREE.SpotLight( 0xffffff );
+				spotLight.position.set( 10, 10, 5 );
+				spotLight.castShadow = true;
+				spotLight.shadowCameraNear = 8;
+				spotLight.shadowCameraFar = 30;
+				spotLight.shadowDarkness = 0.5;
+				spotLight.shadowCameraVisible = true;
+				spotLight.shadowMapWidth = 1024;
+				spotLight.shadowMapHeight = 1024;
+				spotLight.name = 'Spot Light';
+				scene.add( spotLight );
+
+				dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				dirLight.position.set( 0, 10, 0 );
+				dirLight.castShadow = true;
+				dirLight.shadowCameraNear = 0.01;
+				dirLight.shadowCameraFar = 10;
+				dirLight.shadowCameraRight = 15;
+				dirLight.shadowCameraLeft = -15;
+				dirLight.shadowCameraTop	= 15;
+				dirLight.shadowCameraBottom = -15;
+				dirLight.shadowDarkness = 0.5;
+				dirLight.shadowCameraVisible = true;
+				dirLight.shadowMapWidth = 1024;
+				dirLight.shadowMapHeight = 1024;
+				dirLight.name = 'Dir. Light';
+				scene.add( dirLight );
+
+
+				// Geometry
+				var geometry = new THREE.TorusKnotGeometry( 25, 8, 75, 20 );
+				var material = new THREE.MeshPhongMaterial( {
+					color: 0xff0000,
+					shininess: 150,
+					specular: 0x222222,
+					shading: THREE.SmoothShading,
+				} );
+
+				torusKnot = new THREE.Mesh( geometry, material );
+				torusKnot.scale.multiplyScalar( 1 / 18 );
+				torusKnot.position.y = 3;
+				torusKnot.castShadow = true;
+				torusKnot.receiveShadow = true;
+				scene.add( torusKnot );
+
+				var geometry = new THREE.BoxGeometry( 3, 3, 3 );
+				cube = new THREE.Mesh( geometry, material );
+				cube.position.set( 8, 3, 8 );
+				cube.castShadow = true;
+				cube.receiveShadow = true;
+				scene.add( cube );
+
+				var geometry = new THREE.BoxGeometry( 10, 0.15, 10 );
+				var material = new THREE.MeshPhongMaterial( {
+					color: 0xa0adaf,
+					shininess: 150,
+					specular: 0xffffff,
+					shading: THREE.SmoothShading
+				} );
+
+				var ground = new THREE.Mesh( geometry, material );
+				ground.scale.multiplyScalar( 3 );
+				ground.castShadow = false;
+				ground.receiveShadow = true;
+				scene.add( ground );
+
+			}
+
+			function initShadowMapViewers() {
+
+				dirLightShadowMapViewer = new THREE.ShadowMapViewer( dirLight );
+				dirLightShadowMapViewer.position.x = 10;
+				dirLightShadowMapViewer.position.y = 10;
+				dirLightShadowMapViewer.size.width = 256;
+				dirLightShadowMapViewer.size.height = 256;
+				dirLightShadowMapViewer.update(); //Required when setting position or size directly
+
+				spotLightShadowMapViewer = new THREE.ShadowMapViewer( spotLight );
+				spotLightShadowMapViewer.size.set( 256, 256 );
+				spotLightShadowMapViewer.position.set( 276, 10 );
+				// spotLightShadowMapViewer.update();	//NOT required because .set updates automatically
+
+			}
+
+			function initMisc() {
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
+				renderer.shadowMapEnabled = true;
+				renderer.shadowMapType = THREE.BasicShadowMap;
+
+				// Mouse control
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 2, 0 );
+				controls.update();
+
+				clock = new THREE.Clock();
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.right = '0px';
+				stats.domElement.style.top = '0px';
+				document.body.appendChild( stats.domElement );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				dirLightShadowMapViewer.updateForWindowResize();
+				spotLightShadowMapViewer.updateForWindowResize();
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+				render();
+
+				stats.update();
+
+			}
+
+			function renderScene() {
+
+				renderer.render( scene, camera );
+
+			}
+
+			function renderShadowMapViewers() {
+
+				dirLightShadowMapViewer.render( renderer );
+				spotLightShadowMapViewer.render( renderer );
+
+			}
+
+			function render() {
+
+				var delta = clock.getDelta();
+
+				renderScene();
+				renderShadowMapViewers();
+
+				torusKnot.rotation.x += 0.25 * delta;
+				torusKnot.rotation.y += 2 * delta;
+				torusKnot.rotation.z += 1 * delta;
+
+				cube.rotation.x += 0.25 * delta;
+				cube.rotation.y += 2 * delta;
+				cube.rotation.z += 1 * delta;
+
+			}
+
+		</script>
+	</body>
+</html>