Fixed blending bug with sprites. Added example.

08127af6 · Mikael Emtinger · 615f8720 · 08127af6 · 08127af6 · 08127af6
6 changed file
--- a/build/Three.js
+++ b/build/Three.js
--- a/examples/textures/sprite0.jpg
+++ b/examples/textures/sprite0.jpg
--- a/examples/textures/sprite1.jpg
+++ b/examples/textures/sprite1.jpg
--- a/examples/webgl_sprites.html
+++ b/examples/webgl_sprites.html
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js - webgl</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background:#fff;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+		</style>
+	</head>
+
+	<body>
+		<script type="text/javascript" src="../build/Three.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+			var statsEnabled = true;
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var nodeA, nodeA;
+			var time = 0;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+			
+
+			init();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 1500;
+
+				scene = new THREE.Scene();
+	
+
+				// create sprites
+
+				var amount = 200;
+				var radius = 500;
+				var mapA =  ImageUtils.loadTexture( "textures/sprite0.jpg" );
+				var mapB =  ImageUtils.loadTexture( "textures/sprite1.jpg" );
+				
+				nodeA = new THREE.Mesh( new Cube( 10, 10, 10 ), new THREE.MeshLambertMaterial( { color: 0xff0000 } ));
+				
+				for( var a = 0; a < amount; a++ ) {
+					
+					var sprite = new THREE.Sprite( { map: mapA, useScreenCoordinates: false, mergeWith3D: false, blending: THREE.AdditiveBlending } );
+					sprite.position.set( Math.random() - 0.5, 
+					                     Math.random() - 0.5,
+					                     Math.random() - 0.5 );
+					
+					if( sprite.position.z < 0 ) {
+						
+						sprite.map = mapB;
+						
+					}
+					
+					sprite.position.normalize();
+					sprite.position.multiplyScalar( radius );
+					
+					nodeA.addChild( sprite );
+				}
+				
+				scene.addChild( nodeA );
+						
+
+				// renderer
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setClearColorHex( 0x000000, 1 );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortObjects = true;
+				
+				container.appendChild( renderer.domElement );
+
+				if ( statsEnabled ) {
+
+					stats = new Stats();
+					stats.domElement.style.position = 'absolute';
+					stats.domElement.style.top = '0px';
+					stats.domElement.style.zIndex = 100;
+					container.appendChild( stats.domElement );
+
+				}
+
+				setInterval( loop, 1000 / 60 );
+			}
+
+
+			function loop() {
+
+				for( var c = 0; c < nodeA.children.length; c++ ) {
+					
+					var sprite = nodeA.children[ c ];
+					var scale = Math.sin( time + sprite.position.x * 0.01 ) * 0.3 + 1.0;
+					
+					sprite.rotation += 0.1 * ( c / nodeA.children.length );
+					sprite.scale.set( scale, scale, 1.0 );
+					sprite.opacity = Math.sin( time + sprite.position.x * 0.01 ) * 0.4 + 0.6;
+				}
+
+				nodeA.rotation.x = time * 0.5;
+				nodeA.rotation.y = time * 0.75;
+				nodeA.rotation.z = time * 1.0;
+
+				time += 0.02;
+
+				renderer.render( scene, camera );
+
+				if ( statsEnabled ) stats.update();
+
+			}
+
+			function log( text ) {
+
+				var e = document.getElementById("log");
+				e.innerHTML = text + "<br/>" + e.innerHTML;
+
+			}
+		</script>
+	</body>
+</html>
--- a/src/objects/Sprite.js
+++ b/src/objects/Sprite.js
@@ -21,7 +21,7 @@ THREE.Sprite = function( parameters ) {
 	}
 	
 	this.useScreenCoordinates = parameters.useScreenCoordinates !== undefined ? parameters.useScreenCoordinates : true;
-	this.mergeWith3D = parameters.mergeWith3D !== undefined ? parameters.mergeWith3D : false;
+	this.mergeWith3D = parameters.mergeWith3D !== undefined ? parameters.mergeWith3D : !parameters.useScreenCoordinates;
 	this.affectedByDistance = parameters.affectedByDistance !== undefined ? parameters.affectedByDistance : !parameters.useScreenCoordinates;
 	this.alignment = parameters.alignment instanceof THREE.Vector2 ? parameters.alignment : THREE.SpriteAlignment.center;
 	
@@ -52,8 +52,7 @@ THREE.Sprite.prototype.updateMatrix = function () {

 	if ( this.scale.x !== 1 || this.scale.y !== 1 ) {

-		this.scale3d.set( this.scale.x, this.scale.y, 1 );
-		this.matrix.scale( this.scale3d );
+		this.matrix.scale( this.scale );
 		this.boundRadiusScale = Math.max( this.scale.x, this.scale.y );

 	}

--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -3129,6 +3129,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			}

 		}
+
 		// render 2d
 		
 		if ( scene.__webglSprites.length ) {
@@ -3330,6 +3331,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 		_oldBlending = "";

 		_gl.disable( _gl.CULL_FACE );
+		_gl.enable( _gl.BLEND );

 		_gl.bindBuffer( _gl.ARRAY_BUFFER, _sprite.vertexBuffer );
 		_gl.vertexAttribPointer( attributes.position, 2, _gl.FLOAT, false, 2 * 8, 0 );
@@ -3341,8 +3343,6 @@ THREE.WebGLRenderer = function ( parameters ) {

 		_gl.activeTexture( _gl.TEXTURE0 );
 		_gl.uniform1i( uniforms.map, 0 );
-
-		_gl.depthMask( false );
 		

 		// render all non-custom shader sprites
@@ -3374,8 +3374,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 					}
 				
 					size = object.map.image.width / ( object.affectedByDistance ? 1 : _viewportHeight );
-					scale[ 0 ] = size * invAspect;
-					scale[ 1 ] = size;
+					scale[ 0 ] = size * invAspect * object.scale.x;
+					scale[ 1 ] = size * object.scale.y;
 				
 					_gl.uniform2f( uniforms.uvScale, object.uvScale.x, object.uvScale.y );
 					_gl.uniform2f( uniforms.uvOffset, object.uvOffset.x, object.uvOffset.y );
@@ -3387,11 +3387,15 @@ THREE.WebGLRenderer = function ( parameters ) {
 					if( object.mergeWith3D && !mergeWith3D ) {
 						
 						_gl.enable( _gl.DEPTH_TEST );
+						_gl.depthMask( true );
+						
 						mergeWith3D = true;
 						
 					} else if( !object.mergeWith3D && mergeWith3D ) {
 						
 						_gl.disable( _gl.DEPTH_TEST );
+						_gl.depthMask( false );
+
 						mergeWith3D = false;
 						
 					}
@@ -3669,11 +3673,11 @@ THREE.WebGLRenderer = function ( parameters ) {

 		}

-		for ( var o = 0, ol = scene.__webglSprites.length; o < ol; o ++ ) {
+/*		for ( var o = 0, ol = scene.__webglSprites.length; o < ol; o ++ ) {

 			updateObject( scene.__webglSprites[ o ].object, scene );

-		}
+		}*/

 	};