Почетна Преглед Помоћ
Пријавите се
javascript
/
three.js
огледало од https://github.com/tazdij/three.js.git
2
0
Креирај огранак 0
Датотеке Дискусије 0 Вики
Преглед изворни кода

Some more clean up in Projector and CanvasRenderer.
Fixed some examples that used ParticleCircleMaterial.

Mr.doob пре 14 година
родитељ
1d2d88bc66
комит
999a87358b
8 измењених фајлова са 107 додато и 20 уклоњено
Подељен поглед Покажи статистику Diff
  1. 14 3
      examples/canvas_lights_pointlights_smooth.html
  2. 17 2
      examples/canvas_lines.html
  3. 17 3
      examples/canvas_lines_sphere.html
  4. 1 1
      examples/canvas_performance.html
  5. 1 1
      examples/canvas_sandbox.html
  6. 41 1
      src/renderers/CanvasRenderer.js
  7. 15 9
      src/renderers/Projector.js
  8. 1 0
      src/renderers/renderables/RenderableFace3.js

+ 14 - 3
examples/canvas_lights_pointlights_smooth.html
Прегледај датотеку 

@@ -73,15 +73,26 @@
 
 				light3 = new THREE.PointLight( 0x80ff80 );
 
 				scene.addLight( light3 );
 
 
-				particle1 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xff0040 } ) );
 
+				var PI2 = Math.PI * 2;
 
+				var program = function ( context, color ) {
 
+
 
+					context.fillStyle = color.__styleString;
 
+					context.beginPath();
 
+					context.arc( 0, 0, 1, 0, PI2, true );
 
+					context.closePath();
 
+					context.fill();
 
+
 
+				}
 
+
 
+				particle1 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0xff0040, program: program } ) );
 
 				particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
 
 				scene.addObject( particle1 );
 
 
-				particle2 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0x0040ff } ) );
 
+				particle2 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x0040ff, program: program } ) );
 
 				particle2.scale.x = particle2.scale.y = particle2.scale.z = 0.5;
 
 				scene.addObject( particle2 );
 
 
-				particle3 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0x80ff80 } ) );
 
+				particle3 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x80ff80, program: program } ) );
 
 				particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
 
 				scene.addObject( particle3 );

+ 17 - 2
examples/canvas_lines.html
Прегледај датотеку 

@@ -41,7 +41,7 @@
 
 			function init() {
 
 
 				var container, separation = 100, amountX = 50, amountY = 50,
 
-				particles, particle, material;
 
+				particles, particle;
 
 
 				container = document.createElement('div');
 
 				document.body.appendChild(container);
 
@@ -57,7 +57,22 @@
 
 
 				// particles
 
 
-				material = new THREE.ParticleCircleMaterial( { color: 0xffffff } );
 
+				var PI2 = Math.PI * 2;
 
+				var material = new THREE.ParticleCanvasMaterial( {
 
+
 
+							color: 0xffffff,
 
+							program: function ( context, color ) {
 
+
 
+								context.fillStyle = color.__styleString;
 
+								context.beginPath();
 
+								context.arc( 0, 0, 1, 0, PI2, true );
 
+								context.closePath();
 
+								context.fill();
 
+
 
+							}
 
+
 
+				} );
 
+
 
 				var geometry = new THREE.Geometry();
 
 
 				for ( var i = 0; i < 100; i ++ ) {

+ 17 - 3
examples/canvas_lines_sphere.html
Прегледај датотеку 

@@ -44,7 +44,7 @@
 
 			function init() {
 
 
 				var container, separation = 100, amountX = 50, amountY = 50,
 
-				particles, particle, material;
 
+				particles, particle;
 
 
 				container = document.createElement('div');
 
 				document.body.appendChild(container);
 
@@ -60,9 +60,23 @@
 
 
 				// particles
 
 
-				material = new THREE.ParticleCircleMaterial( { color: 0xffffff, opacity: 1 } );
 
+				var PI2 = Math.PI * 2;
 
+				var material = new THREE.ParticleCanvasMaterial( {
 
 
-				for (var i = 0; i < 1000; i++) {
 
+							color: 0xffffff,
 
+							program: function ( context, color ) {
 
+
 
+								context.fillStyle = color.__styleString;
 
+								context.beginPath();
 
+								context.arc( 0, 0, 1, 0, PI2, true );
 
+								context.closePath();
 
+								context.fill();
 
+
 
+							}
 
+
 
+				} );
 
+
 
+				for ( var i = 0; i < 1000; i ++ ) {
 
 
 					particle = new THREE.Particle( material );
 
 					particle.position.x = Math.random() * 2 - 1;

+ 1 - 1
examples/canvas_performance.html
Прегледај датотеку 

@@ -14,7 +14,7 @@
 
 	</head>
 
 	<body>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script>		
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
 		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>

+ 1 - 1
examples/canvas_sandbox.html
Прегледај датотеку 

@@ -51,7 +51,7 @@
 
 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/MeshShaderMaterial.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/ParticleCanvasMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
 
 		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 
 		<script type="text/javascript" src="../src/materials/RenderTarget.js"></script>

+ 41 - 1
src/renderers/CanvasRenderer.js
Прегледај датотеку 

@@ -20,7 +20,7 @@ THREE.CanvasRenderer = function () {
 
 	_contextFillStyle = null,
 
 	_contextLineWidth = 1,
 
 
-	_v1, _v2, _v3,
 
+	_v1, _v2, _v3, _v4,
 
 	_v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
 
 
 	_color = new THREE.Color(),
 
@@ -248,6 +248,15 @@ THREE.CanvasRenderer = function () {
 
 
 				}
 
 
+			} else if ( element instanceof THREE.RenderableFace4 ) {
 
+
 
+				_v1 = element.v1; _v2 = element.v2; _v3 = element.v3; _v4 = element.v4;
 
+
 
+				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
 
+				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
 
+				_v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;
 
+				_v4.positionScreen.x *= _canvasWidthHalf; _v4.positionScreen.y *= _canvasHeightHalf;
 
+
 
 			}
 
 
 			/*
 
@@ -675,6 +684,37 @@ THREE.CanvasRenderer = function () {
 
 
 		function texturePath( x0, y0, x1, y1, x2, y2, bitmap, u0, v0, u1, v1, u2, v2 ) {
 
 
+			/*
 
+			// http://tulrich.com/geekstuff/canvas/jsgl.js
 
+
 
+			var m11, m12, m21, m22, dx, dy, denom,
 
+			width = bitmap.width - 1,
 
+			height = bitmap.height - 1;
 
+
 
+			u0 *= width; v0 *= height;
 
+			u1 *= width; v1 *= height;
 
+			u2 *= width; v2 *= height;
 
+
 
+			_context.save();
 
+
 
+			denom = u0 * (v2 - v1) - u1 * v2 + u2 * v1 + (u1 - u2) * v0;
 
+
 
+			if ( denom == 0 ) return;
 
+
 
+			m11 = - (v0 * (x2 - x1) - v1 * x2 + v2 * x1 + (v1 - v2) * x0) / denom;
 
+			m12 = (v1 * y2 + v0 * (y1 - y2) - v2 * y1 + (v2 - v1) * y0) / denom;
 
+			m21 = (u0 * (x2 - x1) - u1 * x2 + u2 * x1 + (u1 - u2) * x0) / denom;
 
+			m22 = - (u1 * y2 + u0 * (y1 - y2) - u2 * y1 + (u2 - u1) * y0) / denom;
 
+			dx = (u0 * (v2 * x1 - v1 * x2) + v0 * (u1 * x2 - u2 * x1) + (u2 * v1 - u1 * v2) * x0) / denom;
 
+			dy = (u0 * (v2 * y1 - v1 * y2) + v0 * (u1 * y2 - u2 * y1) + (u2 * v1 - u1 * v2) * y0) / denom;
 
+
 
+			_context.transform( m11, m12, m21, m22, dx, dy );
 
+
 
+			_context.clip();
 
+			_context.drawImage( bitmap, 0, 0 );
 
+			_context.restore();
 
+			*/
 
+
 
 			// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
 
 
 			var a, b, c, d, e, f, det, idet,

+ 15 - 9
src/renderers/Projector.js
Прегледај датотеку 

@@ -95,11 +95,12 @@ THREE.Projector = function() {
 
 	this.projectScene = function ( scene, camera, sort ) {
 
 
 		var renderList = [], near = camera.near, far = camera.far,
 
-		o, ol, v, vl, f, fl, n, nl, objects, object,
 
-		objectMatrix, objectMaterials,
 
+		o, ol, v, vl, f, fl, n, nl, u, ul, objects, object,
 
+		objectMatrix, objectMaterials, objectOverdraw,
 
 		objectMatrixRotation,
 
 		geometry, vertices, vertex, vertexPositionScreen,
 
-		faces, face, faceVertexNormals, faceVertexUvs, normal, v1, v2, v3, v4;
 
+		faces, face, faceVertexNormals, normal, faceVertexUvs, uvs,
 
+		v1, v2, v3, v4;
 
 
 		_face3Count = 0;
 
 		_lineCount = 0;
 
@@ -124,6 +125,7 @@ THREE.Projector = function() {
 
 			objectMatrixRotation = object.matrixRotationWorld;
 
 
 			objectMaterials = object.materials;
 
+			objectOverdraw = object.overdraw;
 
 
 			_vertexCount = 0;
 
 
@@ -184,7 +186,7 @@ THREE.Projector = function() {
 
 								faceVertexNormals = face.vertexNormals;
 
 								_face3VertexNormals = _face3.vertexNormalsWorld;
 
 
-								for ( n = 0; n < 3; n ++ ) {
 
+								for ( n = 0, nl = faceVertexNormals.length; n < nl; n ++ ) {
 
 
 									normal = _face3VertexNormals[ n ];
 
 									normal.copy( faceVertexNormals[ n ] );
 
@@ -192,18 +194,22 @@ THREE.Projector = function() {
 
 
 								}
 
 
-								faceVertexUvs = geometry.faceVertexUvs[ 0 ][ f ];
 
+								faceVertexUvs = geometry.faceVertexUvs;
 
 
-								if ( faceVertexUvs ) {
 
+								for ( u = 0, ul = faceVertexUvs.length; u < ul; u ++ ) {
 
 
-									_face3.uvs[ 0 ] = faceVertexUvs[ 0 ];
 
-									_face3.uvs[ 1 ] = faceVertexUvs[ 1 ];
 
-									_face3.uvs[ 2 ] = faceVertexUvs[ 2 ];
 
+									uvs = faceVertexUvs[ u ];
 
+
 
+									_face3.uvs[ u ] = [];
 
+									_face3.uvs[ u ][ 0 ] = uvs[ 0 ];
 
+									_face3.uvs[ u ][ 1 ] = uvs[ 1 ];
 
+									_face3.uvs[ u ][ 2 ] = uvs[ 2 ];
 
 
 								}
 
 
 								_face3.meshMaterials = objectMaterials;
 
 								_face3.faceMaterials = face.materials;
 
+								_face3.overdraw = objectOverdraw;
 
 
 								_face3.z = _face3.centroidScreen.z;

+ 1 - 0
src/renderers/renderables/RenderableFace3.js
Прегледај датотеку 

@@ -16,6 +16,7 @@ THREE.RenderableFace3 = function () {
 
 
 	this.meshMaterials = null;
 
 	this.faceMaterials = null;
 
+	this.overdraw = false;
 
 	this.uvs = [];
 
 
 	this.z = null;