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

Added MeshDepthMaterial.
Optimised Particles projection in CanvasRenderer.

Mr.doob 14 years ago
parent
64df690cc0
commit
98dc841aab
15 changed files with 335 additions and 243 deletions
Unified View Show Diff Stats
  1. 0 0
      build/Three.js
  2. 0 0
      build/ThreeDebug.js
  3. 2 1
      examples/camera_free.html
  4. 1 1
      examples/camera_orthographic.html
  5. 1 43
      examples/interactive_voxelpainter.html
  6. 263 0
      examples/materials_depth.html
  7. 2 1
      examples/test.html
  8. 4 4
      src/core/Matrix4.js
  9. 0 4
      src/materials/Material.js
  10. 4 0
      src/materials/textures/Texture.js
  11. 35 20
      src/renderers/CanvasRenderer.js
  12. 10 11
      src/renderers/Projector.js
  13. 0 155
      src/renderers/Renderer.js
  14. 6 0
      src/renderers/SVGRenderer.js
  15. 7 3
      utils/build.py

File diff suppressed because it is too large
+ 0 - 0
build/Three.js


File diff suppressed because it is too large
+ 0 - 0
build/ThreeDebug.js


+ 2 - 1
examples/camera_free.html
View File 

@@ -42,12 +42,13 @@
 
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 
+		<script type="text/javascript" src="../src/materials/textures/Texture.js"></script>
 
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>

+ 1 - 1
examples/camera_orthographic.html
View File 

@@ -42,7 +42,7 @@
 
 				container.appendChild( info );
 
 				container.appendChild( info );
 
 
 
 				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -2000, 1000 );
 
+				camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 2000, 1000 );
 
 				camera.position.x = 200;
 
 				camera.position.x = 200;
 
 				camera.position.y = 100;
 
 				camera.position.y = 100;
 
 				camera.position.z = 200;
 
 				camera.position.z = 200;

+ 1 - 43
examples/interactive_voxelpainter.html
View File 

@@ -14,49 +14,7 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
 
-
 
-		<script type="text/javascript" src="../src/Three.js"></script>
 
-		<script type="text/javascript" src="../src/core/Color.js"></script>
 
-		<script type="text/javascript" src="../src/core/Vector2.js"></script>
 
-		<script type="text/javascript" src="../src/core/Vector3.js"></script>
 
-		<script type="text/javascript" src="../src/core/Vector4.js"></script>
 
-		<script type="text/javascript" src="../src/core/Ray.js"></script>
 
-		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
 
-		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
 
-		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
 
-		<script type="text/javascript" src="../src/core/Vertex.js"></script>
 
-		<script type="text/javascript" src="../src/core/Face3.js"></script>
 
-		<script type="text/javascript" src="../src/core/Face4.js"></script>
 
-		<script type="text/javascript" src="../src/core/UV.js"></script>
 
-		<script type="text/javascript" src="../src/core/Geometry.js"></script>
 
-		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
 
-		<script type="text/javascript" src="../src/lights/Light.js"></script>
 
-		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 
-		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
 
-		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
 
-		<script type="text/javascript" src="../src/objects/Object3D.js"></script>
 
-		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
 
-		<script type="text/javascript" src="../src/objects/Particle.js"></script>
 
-		<script type="text/javascript" src="../src/objects/Line.js"></script>
 
-		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
-		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 
-		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>

+ 263 - 0
examples/materials_depth.html
View File 

@@ -0,0 +1,263 @@
 
+<!DOCTYPE HTML>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js - depth material</title>
 
+		<meta charset="utf-8">
 
+		<style type="text/css">
 
+			body {
 
+				font-family: Monospace;
 
+				background-color: #000000;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
+
 
+		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
+
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
+		<script type="text/javascript">
 
+
 
+			var SCREEN_WIDTH = window.innerWidth;
 
+			var SCREEN_HEIGHT = window.innerHeight;
 
+
 
+			var container;
 
+			var stats;
 
+
 
+			var camera;
 
+			var scene;
 
+			var renderer;
 
+
 
+			var cube, plane;
 
+
 
+			var targetRotation = 0;
 
+			var targetRotationOnMouseDown = 0;
 
+
 
+			var mouseX = 0;
 
+			var mouseXOnMouseDown = 0;
 
+
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
+
 
+			var moveForward = false,
 
+			moveBackwards = false,
 
+			moveUp = false,
 
+			moveDown = false,
 
+			moveLeft = false,
 
+			moveRight = false,
 
+
 
+			yawLeft = false,
 
+			yawRight = false,
 
+			pitchUp = false,
 
+			pitchDown = false,
 
+			rollLeft = false,
 
+			rollRight = false;
 
+
 
+			var debugContext;
 
+
 
+			init();
 
+			setInterval( loop, 1000 / 60 );
 
+			// loop();
 
+
 
+			function init() {
 
+
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 2000 );
 
+				camera.position.x = 1000;
 
+				camera.position.y = 1000;
 
+				camera.position.z = 1000;
 
+				// camera.target.position.y = 150;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				// Plane
 
+
 
+				var material = new THREE.MeshDepthMaterial( { near: 1, far: 2000, wireframe: true } );
 
+
 
+				plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), material );
 
+				plane.rotation.x = - 90 * ( Math.PI / 180 );
 
+				plane.doubleSided = true;
 
+				scene.addObject( plane );
 
+
 
+				// Spheres
 
+
 
+				geometry = new Sphere( 100, 16, 8 );
 
+				// material = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 1 } );
 
+				material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
 
+
 
+				for (var i = 0; i < 20; i ++ ) {
 
+
 
+					cube = new THREE.Mesh( geometry, material );
 
+					cube.overdraw = true;
 
+
 
+					cube.position.x = ( i % 5 ) * 200 - 400;
 
+					cube.position.z = Math.floor( i / 5 ) * 200 - 400;
 
+
 
+					/*
 
+					cube.position.x = Math.random() * 1000 - 500;
 
+					cube.position.y = Math.random() * 1000 - 500;
 
+					cube.position.z = Math.random() * 1000 - 500;
 
+
 
+					cube.rotation.x = Math.random() * 200 - 100;
 
+					cube.rotation.y = Math.random() * 200 - 100;
 
+					cube.rotation.z = Math.random() * 200 - 100;
 
+					cube.scale.x = cube.scale.y = cube.scale.z = Math.random() + 0.5;
 
+					*/
 
+
 
+					scene.addObject(cube);
 
+
 
+				}
 
+
 
+				// Lights
 
+
 
+				var ambientLight = new THREE.AmbientLight( Math.random() * 0x202020 );
 
+				scene.addLight( ambientLight );
 
+
 
+				var directionalLight = new THREE.DirectionalLight( Math.random() * 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.addLight( directionalLight );
 
+
 
+				var pointLight = new THREE.PointLight( 0xff0000, 1 );
 
+				scene.addLight( pointLight );
 
+
 
+				renderer = new THREE.CanvasRenderer();
 
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
+
 
+				container.appendChild( renderer.domElement );
 
+
 
+				var debugCanvas = document.createElement( 'canvas' );
 
+				debugCanvas.width = 512;
 
+				debugCanvas.height = 512;
 
+				debugCanvas.style.position = 'absolute';
 
+				debugCanvas.style.top = '0px';
 
+				debugCanvas.style.left = '0px';
 
+
 
+				container.appendChild( debugCanvas );
 
+
 
+				debugContext = debugCanvas.getContext( '2d' );
 
+				debugContext.setTransform( 1, 0, 0, 1, 256, 256 );
 
+				debugContext.strokeStyle = '#808080';
 
+
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+				container.appendChild(stats.domElement);
 
+
 
+				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 
+				document.addEventListener( 'keyup', onDocumentKeyUp, false );
 
+			}
 
+
 
+			function onDocumentKeyDown( event ) {
 
+
 
+				switch( event.keyCode ) {
 
+
 
+					case 38: moveForward = true; break; // up
 
+					case 40: moveBackwards = true; break; // down
 
+					case 37: moveLeft = true; break; // left
 
+					case 39: moveRight = true; break; // right
 
+					case 65: yawLeft = true; break; // a
 
+					case 68: yawRight = true; break; // d
 
+					case 87: moveUp/*pitchUp*/ = true; break; // w
 
+					case 83: moveDown/*pitchDown*/ = true; break; // s
 
+					case 90: rollLeft = true; break; // z
 
+					case 67: rollRight = true; break; // c
 
+
 
+				}
 
+
 
+			}
 
+
 
+			function onDocumentKeyUp( event ) {
 
+
 
+				switch( event.keyCode ) {
 
+
 
+					case 38: moveForward = false; break; // up
 
+					case 40: moveBackwards = false; break; // down
 
+					case 37: moveLeft = false; break; // left
 
+					case 39: moveRight = false; break; // right
 
+					case 65: yawLeft = false; break; // a
 
+					case 68: yawRight = false; break; // d
 
+					case 87: moveUp/*pitchUp*/ = false; break; // w
 
+					case 83: moveDown/*pitchDown*/ = false; break; // s
 
+					case 90: rollLeft = false; break; // z
 
+					case 67: rollRight = false; break; // c
 
+
 
+				}
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function loop() {
 
+
 
+				if ( moveForward ) camera.position.z -= 5; // camera.moveZ( 5 );
 
+				if ( moveBackwards ) camera.position.z += 5; // camera.moveZ( - 5 );
 
+
 
+				if ( moveUp ) camera.position.y += 5; // camera.moveZ( 5 );
 
+				if ( moveDown ) camera.position.y -= 5; // camera.moveZ( - 5 );
 
+
 
+				if ( moveLeft ) camera.position.x -= 5; // camera.moveX( - 5 );
 
+				if ( moveRight ) camera.position.x += 5; // camera.moveX( 5 );
 
+
 
+				if ( pitchUp ) camera.rotation.x += 0.01; // camera.rotateX( 1 );
 
+				if ( pitchDown ) camera.rotation.x -= 0.01; // camera.rotateX( - 1 );
 
+
 
+				if ( yawLeft ) camera.target.position.x -= 5; // camera.rotation.y += 0.01; // camera.rotateY( 1 );
 
+				if ( yawRight ) camera.target.position.x += 5; // camera.rotation.y -= 0.01; // camera.rotateY( - 1 );
 
+
 
+				if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 );
 
+				if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 );
 
+
 
+				debugContext.clearRect( -256, -256, 512, 512 );
 
+
 
+				debugContext.beginPath();
 
+
 
+				// center
 
+				debugContext.moveTo( -10, 0 );
 
+				debugContext.lineTo( 10, 0 );
 
+				debugContext.moveTo( 0, -10 );
 
+				debugContext.lineTo( 0, 10 );
 
+
 
+				// camera
 
+
 
+				debugContext.moveTo( camera.position.x * 0.1, camera.position.z * 0.1 );
 
+				debugContext.lineTo( camera.target.position.x * 0.1, camera.target.position.z * 0.1 );
 
+				debugContext.rect( camera.position.x * 0.1 - 5, camera.position.z * 0.1 - 5, 10, 10 );
 
+				debugContext.rect( camera.target.position.x * 0.1 - 5, camera.target.position.z * 0.1 - 5, 10, 10 );
 
+				debugContext.rect( - 50, - 50, 100, 100 );
 
+
 
+				for ( var i = 1; i < scene.objects.length; i++ ) {
 
+
 
+					var object = scene.objects[i];
 
+
 
+					/*
 
+					object.rotation.x += 0.01;
 
+					object.rotation.y += 0.005;
 
+					object.position.y = Math.sin( object.rotation.x ) * 200;
 
+					*/
 
+
 
+					debugContext.rect( object.position.x * 0.1 - 5, object.position.z * 0.1 - 5, 10, 10 );
 
+
 
+				}
 
+
 
+				debugContext.closePath();
 
+				debugContext.stroke();
 
+
 
+				renderer.render(scene, camera);
 
+
 
+				stats.update();
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 2 - 1
examples/test.html
View File 

@@ -41,12 +41,13 @@
 
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 
+		<script type="text/javascript" src="../src/materials/textures/Texture.js"></script>
 
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
 
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>

+ 4 - 4
src/core/Matrix4.js
View File 

@@ -55,13 +55,13 @@ THREE.Matrix4.prototype = {
 
 		this.n11 = x.x; this.n12 = x.y; this.n13 = x.z; this.n14 = - x.dot( eye );
 
 		this.n11 = x.x; this.n12 = x.y; this.n13 = x.z; this.n14 = - x.dot( eye );
 
 		this.n21 = y.x; this.n22 = y.y; this.n23 = y.z; this.n24 = - y.dot( eye );
 
 		this.n21 = y.x; this.n22 = y.y; this.n23 = y.z; this.n24 = - y.dot( eye );
 
 		this.n31 = z.x; this.n32 = z.y; this.n33 = z.z; this.n34 = - z.dot( eye );
 
 		this.n31 = z.x; this.n32 = z.y; this.n33 = z.z; this.n34 = - z.dot( eye );
 
-		this.n41 = 0; this.n42 = 0; this.n43 = 0; this.
 
-n44 = 1;
 
+		this.n41 = 0; this.n42 = 0; this.n43 = 0; this.n44 = 1;
 
+
 
 	},
 
 	},
 
 
 
 	transform: function ( v ) {
 
 	transform: function ( v ) {
 
 
 
-		var vx = v.x, vy = v.y, vz = v.z, vw = v.w ? v.w : 1.0;
 
+		var vx = v.x, vy = v.y, vz = v.z, vw = v.w ? v.w : 1;
 
 
 
 		v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14 * vw;
 
 		v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14 * vw;
 
 		v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24 * vw;
 
 		v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24 * vw;
 
@@ -69,7 +69,7 @@ n44 = 1;
 
 
 
 		vw = this.n41 * vx + this.n42 * vy + this.n43 * vz + this.n44 * vw;
 
 		vw = this.n41 * vx + this.n42 * vy + this.n43 * vz + this.n44 * vw;
 
 
 
-		if( v.w ) {
 
+		if ( v.w ) {
 
 
 
 			v.w = vw;
 
 			v.w = vw;

+ 0 - 4
src/materials/Material.js
View File 

@@ -3,10 +3,6 @@
 
  * }
 
  * }
 
  */
 
  */
 
 
 
-THREE.UVMapping = 0;
 
-THREE.ReflectionMap = 1;
 
-THREE.CubeMap = 2;
 
-
 
 THREE.FlatShading = 0;
 
 THREE.FlatShading = 0;
 
 THREE.GouraudShading = 1;
 
 THREE.GouraudShading = 1;
 
 THREE.PhongShading = 2;
 
 THREE.PhongShading = 2;

+ 4 - 0
src/materials/Texture.js → src/materials/textures/Texture.js
View File 

@@ -18,3 +18,7 @@ THREE.Texture = function ( image, mapping ) {
 
 	};
 
 	};
 
 
 
 };
 
 };
 
+
 
+THREE.UVMapping = 0;
 
+THREE.ReflectionMap = 1;
 
+THREE.CubeMap = 2;

+ 35 - 20
src/renderers/CanvasRenderer.js
View File 

@@ -26,6 +26,7 @@ THREE.CanvasRenderer = function () {
 
 	_ambientLight = new THREE.Color( 0xff000000 ),
 
 	_ambientLight = new THREE.Color( 0xff000000 ),
 
 
 
 	_pi2 = Math.PI * 2,
 
 	_pi2 = Math.PI * 2,
 
+	_w, // z-buffer to w-buffer
 
 	_vector2 = new THREE.Vector2(), // Needed for expand
 
 	_vector2 = new THREE.Vector2(), // Needed for expand
 
 	_vector3 = new THREE.Vector3(), // Needed for PointLight
 
 	_vector3 = new THREE.Vector3(), // Needed for PointLight
 
 	_uv1 = new THREE.UV(), _uv2 = new THREE.UV(), _uv3 = new THREE.UV(), _uv4 = new THREE.UV(),
 
 	_uv1 = new THREE.UV(), _uv2 = new THREE.UV(), _uv3 = new THREE.UV(), _uv4 = new THREE.UV(),
 
@@ -556,6 +557,11 @@ THREE.CanvasRenderer = function () {
 
 
 
 			_color.__styleString = material.color.__styleString;
 
 			_color.__styleString = material.color.__styleString;
 
 
 
+		} else if ( material instanceof THREE.MeshDepthMaterial ) {
 
+
 
+			_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear ) );
 
+			_color.setRGBA( _w, _w, _w, 1 );
 
+
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {
 
 
 
 			if ( _enableLighting ) {
 
 			if ( _enableLighting ) {
 
@@ -652,6 +658,11 @@ THREE.CanvasRenderer = function () {
 
 
 
 			_color.__styleString = material.color.__styleString;
 
 			_color.__styleString = material.color.__styleString;
 
 
 
+		} else if ( material instanceof THREE.MeshDepthMaterial ) {
 
+
 
+			_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear ) );
 
+			_color.setRGBA( _w, _w, _w, 1 );
 
+
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {
 
 
 
 			if ( _enableLighting ) {
 
 			if ( _enableLighting ) {
 
@@ -703,37 +714,41 @@ THREE.CanvasRenderer = function () {
 
 
 
 	}
 
 	}
 
 
 
-	function drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v3x, v3y, _uv1u, _uv1v, _uv2u, _uv2v, _uv3u, _uv3v ) {
 
+	function drawTexturedTriangle( bitmap, x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2 ) {
 
 
 
-		// Textured triangle drawing by Thatcher Ulrich.
 
-		// http://tulrich.com/geekstuff/canvas/jsgl.js
 
-
 
-		var denom, m11, m12, m21, m22, dx, dy;
 
+		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
 
 
 
 		_context.beginPath();
 
 		_context.beginPath();
 
-		_context.moveTo( v1x, v1y );
 
-		_context.lineTo( v2x, v2y );
 
-		_context.lineTo( v3x, v3y );
 
-		_context.lineTo( v1x, v1y );
 
+		_context.moveTo( x0, y0 );
 
+		_context.lineTo( x1, y1 );
 
+		_context.lineTo( x2, y2 );
 
 		_context.closePath();
 
 		_context.closePath();
 
 
 
-		_context.save();
 
-		_context.clip();
 
+		x1 -= x0;
 
+		y1 -= y0;
 
+		x2 -= x0;
 
+		y2 -= y0;
 
+
 
+		u1 -= u0;
 
+		v1 -= v0;
 
+		u2 -= u0;
 
+		v2 -= v0;
 
 
 
-		denom = _uv1u * ( _uv3v - _uv2v ) - _uv2u * _uv3v + _uv3u * _uv2v + ( _uv2u - _uv3u ) * _uv1v;
 
+		var det = 1 / ( u1 * v2 - u2 * v1 ),
 
 
 
-		m11 = - ( _uv1v * (v3x - v2x ) - _uv2v * v3x + _uv3v * v2x + ( _uv2v - _uv3v ) * v1x ) / denom;
 
-		m12 = ( _uv2v * v3y + _uv1v * ( v2y - v3y ) - _uv3v * v2y + ( _uv3v - _uv2v) * v1y ) / denom;
 
-		m21 = ( _uv1u * ( v3x - v2x ) - _uv2u * v3x + _uv3u * v2x + ( _uv2u - _uv3u ) * v1x ) / denom;
 
-		m22 = - ( _uv2u * v3y + _uv1u * ( v2y - v3y ) - _uv3u * v2y + ( _uv3u - _uv2u ) * v1y ) / denom;
 
-		dx = ( _uv1u * ( _uv3v * v2x - _uv2v * v3x ) + _uv1v * ( _uv2u * v3x - _uv3u * v2x ) + ( _uv3u * _uv2v - _uv2u * _uv3v ) * v1x ) / denom;
 
-		dy = ( _uv1u * ( _uv3v * v2y - _uv2v * v3y ) + _uv1v * ( _uv2u * v3y - _uv3u * v2y ) + ( _uv3u * _uv2v - _uv2u * _uv3v ) * v1y ) / denom;
 
+		a = ( v2 * x1 - v1 * x2 ) * det,
 
+		b = ( v2 * y1 - v1 * y2 ) * det,
 
+		c = ( u1 * x2 - u2 * x1 ) * det,
 
+		d = ( u1 * y2 - u2 * y1 ) * det,
 
 
 
-		_context.transform( m11, m12, m21, m22, dx, dy );
 
+		e = x0 - a * u0 - c * v0,
 
+		f = y0 - b * u0 - d * v0;
 
 
 
+		_context.save();
 
+		_context.transform( a, b, c, d, e, f );
 
+		_context.clip();
 
 		_context.drawImage( bitmap, 0, 0 );
 
 		_context.drawImage( bitmap, 0, 0 );
 
 		_context.restore();
 
 		_context.restore();
 
-
 
 	}
 
 	}
 
 
 
 	// Hide anti-alias gaps
 
 	// Hide anti-alias gaps

+ 10 - 11
src/renderers/Projector.js
View File 

@@ -186,7 +186,7 @@ THREE.Projector = function() {
 
 							_line.v1.copy( vertex.positionScreen );
 
 							_line.v1.copy( vertex.positionScreen );
 
 							_line.v2.copy( vertex2.positionScreen );
 
 							_line.v2.copy( vertex2.positionScreen );
 
 
 
-							// TODO: Use centriums here too.
 
+							// TODO: Use centroids here too.
 
 							_line.z = Math.max( vertex.positionScreen.z, vertex2.positionScreen.z );
 
 							_line.z = Math.max( vertex.positionScreen.z, vertex2.positionScreen.z );
 
 
 
 							_line.material = object.material;
 
 							_line.material = object.material;
 
@@ -203,24 +203,23 @@ THREE.Projector = function() {
 
 
 
 				_vector4.set( object.position.x, object.position.y, object.position.z, 1 );
 
 				_vector4.set( object.position.x, object.position.y, object.position.z, 1 );
 
 
 
-				camera.matrix.transform( _vector4 );
 
-				camera.projectionMatrix.transform( _vector4 );
 
+				_projScreenMatrix.transform( _vector4 );
 
 
 
-				object.screen.set( _vector4.x / _vector4.w, _vector4.y / _vector4.w, _vector4.z / _vector4.w );
 
+				_vector4.z /= _vector4.w;
 
 
 
-				if ( object.screen.z > 0 && object.screen.z < 1 ) {
 
+				if ( _vector4.z > 0 && _vector4.z < 1 ) {
 
 
 
 					_particle = _particlePool[ _particleCount ] = _particlePool[ _particleCount ] || new THREE.RenderableParticle();
 
 					_particle = _particlePool[ _particleCount ] = _particlePool[ _particleCount ] || new THREE.RenderableParticle();
 
-					_particle.x = object.screen.x;
 
-					_particle.y = object.screen.y;
 
-					_particle.z = object.screen.z;
 
+					_particle.x = _vector4.x / _vector4.w;
 
+					_particle.y = _vector4.y / _vector4.w;
 
+					_particle.z = _vector4.z;
 
 
 
 					_particle.rotation = object.rotation.z;
 
 					_particle.rotation = object.rotation.z;
 
 
 
-					_particle.scale.x = object.scale.x * Math.abs( _vector4.x / _vector4.w - ( _vector4.x + camera.projectionMatrix.n11 ) / ( _vector4.w + camera.projectionMatrix.n14 ) );
 
-					_particle.scale.y = object.scale.y * Math.abs( _vector4.y / _vector4.w - ( _vector4.y + camera.projectionMatrix.n22 ) / ( _vector4.w + camera.projectionMatrix.n24 ) );
 
+					_particle.scale.x = object.scale.x * Math.abs( _particle.x - ( _vector4.x + camera.projectionMatrix.n11 ) / ( _vector4.w + camera.projectionMatrix.n14 ) );
 
+					_particle.scale.y = object.scale.y * Math.abs( _particle.y - ( _vector4.y + camera.projectionMatrix.n22 ) / ( _vector4.w + camera.projectionMatrix.n24 ) );
 
+
 
 					_particle.material = object.material;
 
 					_particle.material = object.material;
 
-					_particle.color = object.color;
 
 
 
 					_renderList.push( _particle );
 
 					_renderList.push( _particle );

+ 0 - 155
src/renderers/Renderer.js
View File 

@@ -1,155 +0,0 @@
 
-var Renderer = Class.extend
 
-({
 
-	matrix: null,
 
-
 
-	viewport: null,
 
-	renderList: null,
 
-
 
-	face3Pool: null,
 
-	face4Pool: null,
 
-
 
-	width: null,
 
-	height: null,
 
-	widthHalf: null,
 
-	heightHalf: null,
 
-
 
-	init: function()
 
-	{
 
-		this.matrix = new Matrix4();
 
-
 
-		this.face3Pool = new Array();
 
-		this.face4Pool = new Array();
 
-	},
 
-
 
-	setSize: function( width, height )
 
-	{
 
-		this.width = width;
 
-		this.height = height;
 
-
 
-		this.widthHalf = this.width / 2;
 
-		this.heightHalf = this.height / 2;
 
-	},
 
-
 
-	sort: function(a, b)
 
-	{
 
-		return a.screen.z - b.screen.z;
 
-	},
 
-
 
-	render: function( scene, camera )
 
-	{
 
-		var vertex, face, object;
 
-		var face3count = 0, face4count = 0;
 
-
 
-		var focuszoom = camera.focus * camera.zoom;
 
-
 
-		var matrixMultiply = this.matrix.multiply;
 
-		var matrixTransform = this.matrix.transform;
 
-
 
-		this.renderList = new Array();
 
-
 
-		for (var i = 0; i < scene.objects.length; i++)
 
-		{
 
-			object = scene.objects[i];
 
-
 
-			if (object instanceof Mesh)
 
-			{
 
-				matrixMultiply( camera.matrix, object.matrix );
 
-
 
-				// vertices
 
-
 
-				for (var j = 0; j < object.geometry.vertices.length; j++)
 
-				{
 
-					vertex = object.geometry.vertices[j];
 
-
 
-					vertex.screen.copy( vertex );
 
-
 
-					matrixTransform( vertex.screen );
 
-
 
-					vertex.screen.z = focuszoom / (camera.focus + vertex.screen.z);
 
-
 
-					vertex.visible = vertex.screen.z > 0;					
-
 
-					vertex.screen.x *= vertex.screen.z;
 
-					vertex.screen.y *= vertex.screen.z; 
-				}
 
-
 
-				// faces
 
-
 
-				for (j = 0; j < object.geometry.faces.length; j++)
 
-				{
 
-					face = object.geometry.faces[j];
 
-					
-					// TODO: Use normals for culling
 
-
 
-					if (face instanceof Face3)
 
-					{
 
-						if (face.a.visible && face.b.visible && face.c.visible && (object.doubleSided ||
 
-						   (face.c.screen.x - face.a.screen.x) * (face.b.screen.y - face.a.screen.y) -
 
-						   (face.c.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0) )
 
-						{
 
-							face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z) * 0.3;
 
-							
-							if (this.face3Pool[face3count] == null)
 
-								this.face3Pool[face3count] = new Face3(new Vertex(), new Vertex(), new Vertex());
 
-
 
-							this.face3Pool[face3count].a.screen.copy(face.a.screen);
 
-							this.face3Pool[face3count].b.screen.copy(face.b.screen);
 
-							this.face3Pool[face3count].c.screen.copy(face.c.screen);
 
-							this.face3Pool[face3count].screen.z = face.screen.z;
 
-							this.face3Pool[face3count].color = face.color;
 
-							this.face3Pool[face3count].material = object.material;
 
-
 
-							this.renderList.push( this.face3Pool[face3count] );
 
-
 
-							face3count++;
 
-						}
 
-					}
 
-					else if (face instanceof Face4)
 
-					{
 
-						if (face.a.visible && face.b.visible && face.c.visible && (object.doubleSided ||
 
-						   ((face.d.screen.x - face.a.screen.x) * (face.b.screen.y - face.a.screen.y) -
 
-						   (face.d.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0 ||
 
-						   (face.b.screen.x - face.c.screen.x) * (face.d.screen.y - face.c.screen.y) -
 
-						   (face.b.screen.y - face.c.screen.y) * (face.d.screen.x - face.c.screen.x) > 0)) )
 
-						{
 
-							face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z + face.d.screen.z) * 0.25;
 
-
 
-							if (this.face4Pool[face4count] == null)
 
-								this.face4Pool[face4count] = new Face4(new Vertex(), new Vertex(), new Vertex(), new Vertex());
 
-
 
-							this.face4Pool[face4count].a.screen.copy(face.a.screen);
 
-							this.face4Pool[face4count].b.screen.copy(face.b.screen);
 
-							this.face4Pool[face4count].c.screen.copy(face.c.screen);
 
-							this.face4Pool[face4count].d.screen.copy(face.d.screen);
 
-							this.face4Pool[face4count].screen.z = face.screen.z;
 
-							this.face4Pool[face4count].color = face.color;
 
-							this.face4Pool[face4count].material = object.material;
 
-
 
-							this.renderList.push( this.face4Pool[face4count] );
 
-
 
-							face4count++;
 
-						}						
-					}
 
-				}
 
-			}
 
-			else if (object instanceof Particle)
 
-			{
 
-				object.screen.copy(object.position);
 
-
 
-				camera.matrix.transform( object.screen );
 
-
 
-				object.screen.z = focuszoom / (camera.focus + object.screen.z);
 
-
 
-				if (object.screen.z < 0)
 
-					continue;					
-
 
-				object.screen.x *= object.screen.z;
 
-				object.screen.y *= object.screen.z;
 
-
 
-				this.renderList.push( object );
 
-			}
 
-		}
 
-
 
-		this.renderList.sort(this.sort);
 
-	}
 
-});

+ 6 - 0
src/renderers/SVGRenderer.js
View File 

@@ -16,6 +16,7 @@ THREE.SVGRenderer = function () {
 
 	_light = new THREE.Color( 0xffffffff ),
 
 	_light = new THREE.Color( 0xffffffff ),
 
 	_ambientLight = new THREE.Color( 0xffffffff ),
 
 	_ambientLight = new THREE.Color( 0xffffffff ),
 
 
 
+	_w, // z-buffer to w-buffer
 
 	_vector3 = new THREE.Vector3(), // Needed for PointLight
 
 	_vector3 = new THREE.Vector3(), // Needed for PointLight
 
 
 
 	_svgPathPool = [], _svgCirclePool = [],
 
 	_svgPathPool = [], _svgCirclePool = [],
 
@@ -331,6 +332,11 @@ THREE.SVGRenderer = function () {
 
 
 
 			_color.__styleString = material.color.__styleString;
 
 			_color.__styleString = material.color.__styleString;
 
 
 
+		} else if ( material instanceof THREE.MeshDepthMaterial ) {
 
+
 
+			_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear) );
 
+			_color.setRGBA( _w, _w, _w, 1 );
 
+
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {
 
 
 
 			if ( _enableLighting ) {
 
 			if ( _enableLighting ) {

+ 7 - 3
utils/build.py
View File 

@@ -111,13 +111,14 @@ def buildFull(debug):
 
 		'materials/Material.js',
 
 		'materials/Material.js',
 
 		'materials/LineBasicMaterial.js',
 
 		'materials/LineBasicMaterial.js',
 
 		'materials/MeshBasicMaterial.js',
 
 		'materials/MeshBasicMaterial.js',
 
+		'materials/MeshDepthMaterial.js',
 
 		'materials/MeshLambertMaterial.js',
 
 		'materials/MeshLambertMaterial.js',
 
 		'materials/MeshPhongMaterial.js',
 
 		'materials/MeshPhongMaterial.js',
 
 		'materials/MeshFaceMaterial.js',
 
 		'materials/MeshFaceMaterial.js',
 
 		'materials/ParticleBasicMaterial.js',
 
 		'materials/ParticleBasicMaterial.js',
 
 		'materials/ParticleCircleMaterial.js',
 
 		'materials/ParticleCircleMaterial.js',
 
 		'materials/ParticleDOMMaterial.js',
 
 		'materials/ParticleDOMMaterial.js',
 
-		'materials/Texture.js',
 
+		'materials/textures/Texture.js',
 
 		'scenes/Scene.js',
 
 		'scenes/Scene.js',
 
 		'renderers/Projector.js',
 
 		'renderers/Projector.js',
 
 		'renderers/DOMRenderer.js',
 
 		'renderers/DOMRenderer.js',
 
@@ -163,12 +164,13 @@ def buildCanvas(debug):
 
 		'materials/Material.js',
 
 		'materials/Material.js',
 
 		'materials/LineBasicMaterial.js',
 
 		'materials/LineBasicMaterial.js',
 
 		'materials/MeshBasicMaterial.js',
 
 		'materials/MeshBasicMaterial.js',
 
+		'materials/MeshDepthMaterial.js',
 
 		'materials/MeshLambertMaterial.js',
 
 		'materials/MeshLambertMaterial.js',
 
 		'materials/MeshPhongMaterial.js',
 
 		'materials/MeshPhongMaterial.js',
 
 		'materials/MeshFaceMaterial.js',
 
 		'materials/MeshFaceMaterial.js',
 
 		'materials/ParticleBasicMaterial.js',
 
 		'materials/ParticleBasicMaterial.js',
 
 		'materials/ParticleCircleMaterial.js',
 
 		'materials/ParticleCircleMaterial.js',
 
-		'materials/Texture.js',
 
+		'materials/textures/Texture.js',
 
 		'scenes/Scene.js',
 
 		'scenes/Scene.js',
 
 		'renderers/Projector.js',
 
 		'renderers/Projector.js',
 
 		'renderers/CanvasRenderer.js',
 
 		'renderers/CanvasRenderer.js',
 
@@ -211,12 +213,13 @@ def buildWebGL(debug):
 
 		'materials/Material.js',
 
 		'materials/Material.js',
 
 		'materials/LineBasicMaterial.js',
 
 		'materials/LineBasicMaterial.js',
 
 		'materials/MeshBasicMaterial.js',
 
 		'materials/MeshBasicMaterial.js',
 
+		'materials/MeshDepthMaterial.js',
 
 		'materials/MeshLambertMaterial.js',
 
 		'materials/MeshLambertMaterial.js',
 
 		'materials/MeshPhongMaterial.js',
 
 		'materials/MeshPhongMaterial.js',
 
 		'materials/MeshFaceMaterial.js',
 
 		'materials/MeshFaceMaterial.js',
 
 		'materials/ParticleBasicMaterial.js',
 
 		'materials/ParticleBasicMaterial.js',
 
 		'materials/ParticleCircleMaterial.js',
 
 		'materials/ParticleCircleMaterial.js',
 
-		'materials/Texture.js',
 
+		'materials/textures/Texture.js',
 
 		'scenes/Scene.js',
 
 		'scenes/Scene.js',
 
 		'renderers/WebGLRenderer.js',
 
 		'renderers/WebGLRenderer.js',
 
 	]
 
 	]
 
@@ -254,6 +257,7 @@ def buildSVG(debug):
 
 		'materials/Material.js',
 
 		'materials/Material.js',
 
 		'materials/LineBasicMaterial.js',
 
 		'materials/LineBasicMaterial.js',
 
 		'materials/MeshBasicMaterial.js',
 
 		'materials/MeshBasicMaterial.js',
 
+		'materials/MeshDepthMaterial.js',
 
 		'materials/MeshLambertMaterial.js',
 
 		'materials/MeshLambertMaterial.js',
 
 		'materials/MeshPhongMaterial.js',
 
 		'materials/MeshPhongMaterial.js',
 
 		'materials/MeshFaceMaterial.js',
 
 		'materials/MeshFaceMaterial.js',

Some files were not shown because too many files changed in this diff