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

Came up with a crazy approach to get Vertex Colors. Gouraud yet on step closer.
Changed the DepthMaterial to use this approach instead.

Mr.doob 14 years ago
parent
c6d69d8286
commit
fe82bdbda9
5 changed files with 96 additions and 128 deletions
Unified View Show Diff Stats
  1. 0 0
      build/Three.js
  2. 0 0
      build/ThreeDebug.js
  3. 5 4
      examples/materials_depth.html
  4. 0 84
      examples/materials_depth2.html
  5. 91 40
      src/renderers/CanvasRenderer.js

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


+ 5 - 4
examples/materials_depth.html
View File 

@@ -16,7 +16,7 @@
 
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 		<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/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>
 
 
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
@@ -77,12 +77,13 @@
 
 
 
 				plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), material );
 
 				plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), material );
 
 				plane.rotation.x = - 90 * ( Math.PI / 180 );
 
 				plane.rotation.x = - 90 * ( Math.PI / 180 );
 
+				plane.position.y = - 100;
 
 				plane.doubleSided = true;
 
 				plane.doubleSided = true;
 
 				scene.addObject( plane );
 
 				scene.addObject( plane );
 
 
 
 				// Spheres
 
 				// Spheres
 
 
 
-				geometry = new Sphere( 100, 8, 4 );
 
+				geometry = new Cube( 100, 100, 100 );
 
 				//material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
 
 				//material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
 
 				material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
 
 				material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
 
 
 
@@ -128,7 +129,7 @@
 
 				scene.addLight( pointLight );
 
 				scene.addLight( pointLight );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
-				//renderer = new THREE.WebGLRenderer();
 
+				// renderer = new THREE.WebGLRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
@@ -239,7 +240,7 @@
 
 
 
 					object.rotation.x += 0.01;
 
 					object.rotation.x += 0.01;
 
 					object.rotation.y += 0.005;
 
 					object.rotation.y += 0.005;
 
-					object.position.y = Math.sin( object.rotation.x ) * 200;
 
+					object.position.y = Math.sin( object.rotation.x ) * 200 + 200;
 
 
 
 					debugContext.rect( object.position.x * 0.1 - 5, object.position.z * 0.1 - 5, 10, 10 );
 
 					debugContext.rect( object.position.x * 0.1 - 5, object.position.z * 0.1 - 5, 10, 10 );

+ 0 - 84
examples/materials_depth2.html
View File 

@@ -1,84 +0,0 @@
 
-<!DOCTYPE HTML>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js - depth material</title>
 
-		<meta charset="utf-8">
 
-		<style type="text/css">
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #808080;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-				text-decoration: none;
 
-			}
 
-
 
-			a:hover {
 
-				color: #0080ff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info">
 
-			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - depth material.<br />
 
-			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 
-		</div>
 
-
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
-		<script type="text/javascript" src="geometry/WaltHead.js"></script> 
-
 
-		<script type="text/javascript">
 
-
 
-			var camera, scene, renderer,
 
-			object;
 
-
 
-			init();
 
-			setInterval( loop, 1000 / 60 );
 
-
 
-			function init() {
 
-
 
-				var container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				camera.position.z = 1000;
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				object = new THREE.Mesh( new WaltHead(), new THREE.MeshDepthMaterial( { near: 1, far: 1000 } ) );
 
-				object.overdraw = true;
 
-				object.scale.x = object.scale.y = object.scale.z = 15;
 
-				scene.addObject( object );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-			}
 
-
 
-			function loop() {
 
-
 
-				var time = new Date().getTime() * 0.0005;
 
-
 
-				object.rotation.y -= 0.01;
 
-
 
-				renderer.render(scene, camera);
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 91 - 40
src/renderers/CanvasRenderer.js
View File 

@@ -23,6 +23,9 @@ THREE.CanvasRenderer = function () {
 
 	_v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
 
 	_v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
 
 	_v4x, _v4y, _v5x, _v5y, _v6x, _v6y,
 
 	_v4x, _v4y, _v5x, _v5y, _v6x, _v6y,
 
 
 
+	_color1, _color2, _color3, _color4,
 
+	_2near, _farPlusNear, _farMinusNear,
 
+
 
 	_bitmap, _bitmapWidth, _bitmapHeight,
 
 	_bitmap, _bitmapWidth, _bitmapHeight,
 
 
 
 	_clipRect = new THREE.Rectangle(),
 
 	_clipRect = new THREE.Rectangle(),
 
@@ -38,18 +41,27 @@ THREE.CanvasRenderer = function () {
 
 	_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(),
 
 
 
-	_depthMap = document.createElement( 'canvas' ),
 
-	_depthMapContext = _depthMap.getContext( '2d' ),
 
-	_depthMapGradient = _depthMapContext.createLinearGradient( 0, 0, 255, 0);
 
+	_pixelMap, _pixelMapContext, _pixelMapImage, _pixelMapData,
 
+	_gradientMap, _gradientMapContext, _gradientMapQuality = 32;
 
+
 
+	_pixelMap = document.createElement( 'canvas' );
 
+	_pixelMap.width = _pixelMap.height = 2;
 
+
 
+	_pixelMapContext = _pixelMap.getContext( '2d' );
 
+	_pixelMapContext.fillStyle = 'rgba(0,0,0,1)';
 
+	_pixelMapContext.fillRect( 0, 0, 2, 2 );
 
+
 
+	_pixelMapImage = _pixelMapContext.getImageData( 0, 0, 2, 2 );
 
+	_pixelMapData = _pixelMapImage.data;
 
 
 
-	_depthMap.width = 255;
 
-	_depthMap.height = 4;
 
+	_gradientMap = document.createElement( 'canvas' );
 
+	_gradientMap.width = _gradientMap.height = _gradientMapQuality;
 
 
 
-	_depthMapGradient.addColorStop( 0, "white" );
 
-	_depthMapGradient.addColorStop( 1, "black" );
 
+	_gradientMapContext = _gradientMap.getContext( '2d' );
 
+	_gradientMapContext.translate( - _gradientMapQuality / 2, - _gradientMapQuality / 2 );
 
+	_gradientMapContext.scale( _gradientMapQuality, _gradientMapQuality );
 
 
 
-	_depthMapContext.fillStyle = _depthMapGradient;
 
-	_depthMapContext.fillRect( 0, 0, 255, 4 );
 
+	_gradientMapQuality --; // Fix UVs
 
 
 
 	this.domElement = _canvas;
 
 	this.domElement = _canvas;
 
 	this.autoClear = true;
 
 	this.autoClear = true;
 
@@ -293,26 +305,6 @@ THREE.CanvasRenderer = function () {
 
 
 
 	};
 
 	};
 
 
 
-	function setBlending( blending ) {
 
-
 
-		switch( blending ) {
 
-
 
-			case 0: // THREE.NormalBlending
 
-				_context.globalCompositeOperation = "source-over";
 
-				break;
 
-			case 1: // THREE.AdditiveBlending
 
-				_context.globalCompositeOperation = "lighter";
 
-				break;
 
-			case 2: // THREE.SubtractiveBlending
 
-				_context.globalCompositeOperation = "darker";
 
-				break;
 
-
 
-		}
 
-
 
-		_contextGlobalCompositeOperation = blending;
 
-
 
-	}
 
-
 
 	function calculateAmbientLight( scene, color ) {
 
 	function calculateAmbientLight( scene, color ) {
 
 
 
 		var l, ll, light, lightColor,
 
 		var l, ll, light, lightColor,
 
@@ -627,13 +619,20 @@ THREE.CanvasRenderer = function () {
 
 			_color.setRGBA( _w, _w, _w, 1 );
 
 			_color.setRGBA( _w, _w, _w, 1 );
 
 			*/
 
 			*/
 
 
 
-			_bitmap = _depthMap;
 
+			_2near = material.__2near;
 
+			_farPlusNear = material.__farPlusNear;
 
+			_farMinusNear = material.__farMinusNear;
 
+
 
+			_color1 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v1.positionScreen.z * _farMinusNear ) ) ) * 255 );
 
+			_color2 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v2.positionScreen.z * _farMinusNear ) ) ) * 255 );
 
+			_color3 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v3.positionScreen.z * _farMinusNear ) ) ) * 255 );
 
+			// _color4 = ~~ ( ( _color2 + _color3 ) * 0.5 );
 
 
 
-			_uv1.u = ( material.__2near / (material.__farPlusNear - v1.positionScreen.z * material.__farMinusNear ) ) * 255;
 
-			_uv2.u = ( material.__2near / (material.__farPlusNear - v2.positionScreen.z * material.__farMinusNear ) ) * 255;
 
-			_uv3.u = ( material.__2near / (material.__farPlusNear - v3.positionScreen.z * material.__farMinusNear ) ) * 255;
 
+			_bitmap = getGradientTexture( [ _color1, _color1, _color1 ], [ _color2, _color2, _color2 ], [ _color3, _color3, _color3 ], [ _color3, _color3, _color3 ] );
 
 
 
-			_uv1.v = 0; _uv2.v = 1; _uv3.v = 2;
 
+			_uv1.u = 0; _uv1.v = 0; 
+			_uv2.u = _gradientMapQuality; _uv2.v = 0;
 
+			_uv3.u = 0; _uv3.v = _gradientMapQuality;
 
 
 
 			drawTexturedTriangle( _bitmap, _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
 
 			drawTexturedTriangle( _bitmap, _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
 
 
 
@@ -723,14 +722,21 @@ THREE.CanvasRenderer = function () {
 
 			_color.setRGBA( _w, _w, _w, 1 );
 
 			_color.setRGBA( _w, _w, _w, 1 );
 
 			*/
 
 			*/
 
 
 
-			_bitmap = _depthMap;
 
+			_2near = material.__2near;
 
+			_farPlusNear = material.__farPlusNear;
 
+			_farMinusNear = material.__farMinusNear;
 
 
 
-			_uv1.u = ( material.__2near / (material.__farPlusNear - v1.positionScreen.z * material.__farMinusNear ) ) * 255;
 
-			_uv2.u = ( material.__2near / (material.__farPlusNear - v2.positionScreen.z * material.__farMinusNear ) ) * 255;
 
-			_uv3.u = ( material.__2near / (material.__farPlusNear - v3.positionScreen.z * material.__farMinusNear ) ) * 255;
 
-			_uv4.u = ( material.__2near / (material.__farPlusNear - v4.positionScreen.z * material.__farMinusNear ) ) * 255;
 
+			_color1 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v1.positionScreen.z * _farMinusNear ) ) ) * 255 );
 
+			_color2 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v2.positionScreen.z * _farMinusNear ) ) ) * 255 );
 
+			_color3 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v3.positionScreen.z * _farMinusNear ) ) ) * 255 );
 
+			_color4 = ~~ ( ( 1 - ( _2near / ( _farPlusNear - v4.positionScreen.z * _farMinusNear ) ) ) * 255 );
 
 
 
-			_uv1.v = 0; _uv2.v = 1; _uv3.v = 2; _uv4.v = 3;
 
+			_bitmap = getGradientTexture( [ _color1, _color1, _color1 ], [ _color2, _color2, _color2 ], [ _color4, _color4, _color4 ], [ _color3, _color3, _color3 ] );
 
+
 
+			_uv1.u = 0; _uv1.v = 0; 
+			_uv2.u = _gradientMapQuality; _uv2.v = 0;
 
+			_uv3.u = _gradientMapQuality; _uv3.v = _gradientMapQuality;
 
+			_uv4.u = 0; _uv4.v = _gradientMapQuality;
 
 
 
 			drawTexturedTriangle( _bitmap, _v1x, _v1y, _v2x, _v2y, _v4x, _v4y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv4.u, _uv4.v );
 
 			drawTexturedTriangle( _bitmap, _v1x, _v1y, _v2x, _v2y, _v4x, _v4y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv4.u, _uv4.v );
 
 			drawTexturedTriangle( _bitmap, _v5x, _v5y, _v3x, _v3y, _v6x, _v6y, _uv2.u, _uv2.v, _uv3.u, _uv3.v, _uv4.u, _uv4.v );
 
 			drawTexturedTriangle( _bitmap, _v5x, _v5y, _v3x, _v3y, _v6x, _v6y, _uv2.u, _uv2.v, _uv3.u, _uv3.v, _uv4.u, _uv4.v );
 
@@ -860,6 +866,51 @@ THREE.CanvasRenderer = function () {
 
 
 
 	}
 
 	}
 
 
 
+	function setBlending( blending ) {
 
+
 
+		switch( blending ) {
 
+
 
+			case 0: // THREE.NormalBlending
 
+				_context.globalCompositeOperation = "source-over";
 
+				break;
 
+			case 1: // THREE.AdditiveBlending
 
+				_context.globalCompositeOperation = "lighter";
 
+				break;
 
+			case 2: // THREE.SubtractiveBlending
 
+				_context.globalCompositeOperation = "darker";
 
+				break;
 
+
 
+		}
 
+
 
+		_contextGlobalCompositeOperation = blending;
 
+
 
+	}
 
+
 
+	function getGradientTexture( c1, c2, c3, c4 ) {
 
+
 
+		_pixelMapData[ 0 ] = c1[ 0 ];
 
+		_pixelMapData[ 1 ] = c1[ 1 ];
 
+		_pixelMapData[ 2 ] = c1[ 2 ];
 
+
 
+		_pixelMapData[ 4 ] = c2[ 0 ];
 
+		_pixelMapData[ 5 ] = c2[ 1 ];
 
+		_pixelMapData[ 6 ] = c2[ 2 ];
 
+
 
+		_pixelMapData[ 8 ] = c3[ 0 ];
 
+		_pixelMapData[ 9 ] = c3[ 1 ];
 
+		_pixelMapData[ 10 ] = c3[ 2 ];
 
+
 
+		_pixelMapData[ 12 ] = c4[ 0 ];
 
+		_pixelMapData[ 13 ] = c4[ 1 ];
 
+		_pixelMapData[ 14 ] = c4[ 2 ];
 
+
 
+		_pixelMapContext.putImageData( _pixelMapImage, 0, 0 );
 
+		_gradientMapContext.drawImage( _pixelMap, 0, 0 );
 
+
 
+		return _gradientMap;
 
+
 
+	}
 
+
 
 	function normalToComponent( normal ) {
 
 	function normalToComponent( normal ) {
 
 
 
 		// https://gist.github.com/665829
 
 		// https://gist.github.com/665829

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