Checking how Sprites would look without baked image size.

See discussion in #491

build/three.js

@@ -33994,7 +33994,8 @@ THREE.SpritePlugin = function ( ) {
 
 				}
 
-				size = sprite.map.image.width / ( sprite.scaleByViewport ? viewportHeight : 1 );
+				//size = sprite.map.image.width / ( sprite.scaleByViewport ? viewportHeight : 1 );
+				size = 1 / ( sprite.scaleByViewport ? viewportHeight : 1 );
 
 				scale[ 0 ] = size * invAspect * sprite.scale.x;
 				scale[ 1 ] = size * sprite.scale.y;

build/three.min.js

@@ -1,3 +1,4 @@
+// three.min.js - http://github.com/mrdoob/three.js
 'use strict';var THREE=THREE||{REVISION:"53dev"};self.console=self.console||{info:function(){},log:function(){},debug:function(){},warn:function(){},error:function(){}};self.Int32Array=self.Int32Array||Array;self.Float32Array=self.Float32Array||Array;String.prototype.startsWith=String.prototype.startsWith||function(a){return this.slice(0,a.length)===a};String.prototype.endsWith=String.prototype.endsWith||function(a){var a=String(a),b=this.lastIndexOf(a);return(-1<b&&b)===this.length-a.length};
 String.prototype.trim=String.prototype.trim||function(){return this.replace(/^\s+|\s+$/g,"")};
 (function(){for(var a=0,b=["ms","moz","webkit","o"],c=0;c<b.length&&!window.requestAnimationFrame;++c)window.requestAnimationFrame=window[b[c]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[b[c]+"CancelAnimationFrame"]||window[b[c]+"CancelRequestAnimationFrame"];void 0===window.requestAnimationFrame&&(window.requestAnimationFrame=function(b){var c=Date.now(),f=Math.max(0,16-(c-a)),g=window.setTimeout(function(){b(c+f)},f);a=c+f;return g});window.cancelAnimationFrame=window.cancelAnimationFrame||
@@ -727,8 +728,8 @@ g);b.bufferData(b.ELEMENT_ARRAY_BUFFER,e,b.STATIC_DRAW);var a=THREE.ShaderSprite
 "uvScale");j.rotation=b.getUniformLocation(h,"rotation");j.scale=b.getUniformLocation(h,"scale");j.alignment=b.getUniformLocation(h,"alignment");j.color=b.getUniformLocation(h,"color");j.map=b.getUniformLocation(h,"map");j.opacity=b.getUniformLocation(h,"opacity");j.useScreenCoordinates=b.getUniformLocation(h,"useScreenCoordinates");j.affectedByDistance=b.getUniformLocation(h,"affectedByDistance");j.screenPosition=b.getUniformLocation(h,"screenPosition");j.modelViewMatrix=b.getUniformLocation(h,"modelViewMatrix");
 j.projectionMatrix=b.getUniformLocation(h,"projectionMatrix");l=false};this.render=function(d,e,p,o){var d=d.__webglSprites,q=d.length;if(q){var r=i,t=j,B=o/p,p=p*0.5,u=o*0.5,s=true;b.useProgram(h);if(!l){b.enableVertexAttribArray(r.position);b.enableVertexAttribArray(r.uv);l=true}b.disable(b.CULL_FACE);b.enable(b.BLEND);b.depthMask(true);b.bindBuffer(b.ARRAY_BUFFER,f);b.vertexAttribPointer(r.position,2,b.FLOAT,false,16,0);b.vertexAttribPointer(r.uv,2,b.FLOAT,false,16,8);b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,
 g);b.uniformMatrix4fv(t.projectionMatrix,false,e._projectionMatrixArray);b.activeTexture(b.TEXTURE0);b.uniform1i(t.map,0);for(var z,A=[],r=0;r<q;r++){z=d[r];if(z.visible&&z.opacity!==0)if(z.useScreenCoordinates)z.z=-z.position.z;else{z._modelViewMatrix.multiply(e.matrixWorldInverse,z.matrixWorld);z.z=-z._modelViewMatrix.elements[14]}}d.sort(a);for(r=0;r<q;r++){z=d[r];if(z.visible&&z.opacity!==0&&z.map&&z.map.image&&z.map.image.width){if(z.useScreenCoordinates){b.uniform1i(t.useScreenCoordinates,1);
-b.uniform3f(t.screenPosition,(z.position.x-p)/p,(u-z.position.y)/u,Math.max(0,Math.min(1,z.position.z)))}else{b.uniform1i(t.useScreenCoordinates,0);b.uniform1i(t.affectedByDistance,z.affectedByDistance?1:0);b.uniformMatrix4fv(t.modelViewMatrix,false,z._modelViewMatrix.elements)}e=z.map.image.width/(z.scaleByViewport?o:1);A[0]=e*B*z.scale.x;A[1]=e*z.scale.y;b.uniform2f(t.uvScale,z.uvScale.x,z.uvScale.y);b.uniform2f(t.uvOffset,z.uvOffset.x,z.uvOffset.y);b.uniform2f(t.alignment,z.alignment.x,z.alignment.y);
-b.uniform1f(t.opacity,z.opacity);b.uniform3f(t.color,z.color.r,z.color.g,z.color.b);b.uniform1f(t.rotation,z.rotation);b.uniform2fv(t.scale,A);if(z.mergeWith3D&&!s){b.enable(b.DEPTH_TEST);s=true}else if(!z.mergeWith3D&&s){b.disable(b.DEPTH_TEST);s=false}c.setBlending(z.blending,z.blendEquation,z.blendSrc,z.blendDst);c.setTexture(z.map,0);b.drawElements(b.TRIANGLES,6,b.UNSIGNED_SHORT,0)}}b.enable(b.CULL_FACE);b.enable(b.DEPTH_TEST);b.depthMask(true)}}};
+b.uniform3f(t.screenPosition,(z.position.x-p)/p,(u-z.position.y)/u,Math.max(0,Math.min(1,z.position.z)))}else{b.uniform1i(t.useScreenCoordinates,0);b.uniform1i(t.affectedByDistance,z.affectedByDistance?1:0);b.uniformMatrix4fv(t.modelViewMatrix,false,z._modelViewMatrix.elements)}e=1/(z.scaleByViewport?o:1);A[0]=e*B*z.scale.x;A[1]=e*z.scale.y;b.uniform2f(t.uvScale,z.uvScale.x,z.uvScale.y);b.uniform2f(t.uvOffset,z.uvOffset.x,z.uvOffset.y);b.uniform2f(t.alignment,z.alignment.x,z.alignment.y);b.uniform1f(t.opacity,
+z.opacity);b.uniform3f(t.color,z.color.r,z.color.g,z.color.b);b.uniform1f(t.rotation,z.rotation);b.uniform2fv(t.scale,A);if(z.mergeWith3D&&!s){b.enable(b.DEPTH_TEST);s=true}else if(!z.mergeWith3D&&s){b.disable(b.DEPTH_TEST);s=false}c.setBlending(z.blending,z.blendEquation,z.blendSrc,z.blendDst);c.setTexture(z.map,0);b.drawElements(b.TRIANGLES,6,b.UNSIGNED_SHORT,0)}}b.enable(b.CULL_FACE);b.enable(b.DEPTH_TEST);b.depthMask(true)}}};
 THREE.DepthPassPlugin=function(){this.enabled=false;this.renderTarget=null;var a,b,c,d,e=new THREE.Frustum,f=new THREE.Matrix4;this.init=function(e){a=e.context;b=e;var e=THREE.ShaderLib.depthRGBA,f=THREE.UniformsUtils.clone(e.uniforms);c=new THREE.ShaderMaterial({fragmentShader:e.fragmentShader,vertexShader:e.vertexShader,uniforms:f});d=new THREE.ShaderMaterial({fragmentShader:e.fragmentShader,vertexShader:e.vertexShader,uniforms:f,morphTargets:true});c._shadowPass=true;d._shadowPass=true};this.render=
 function(a,b){this.enabled&&this.update(a,b)};this.update=function(g,h){var i,j,l,m,n,p;a.clearColor(1,1,1,1);a.disable(a.BLEND);b.setDepthTest(true);b.autoUpdateScene&&g.updateMatrixWorld();if(!h._viewMatrixArray)h._viewMatrixArray=new Float32Array(16);if(!h._projectionMatrixArray)h._projectionMatrixArray=new Float32Array(16);h.matrixWorldInverse.getInverse(h.matrixWorld);h.matrixWorldInverse.flattenToArray(h._viewMatrixArray);h.projectionMatrix.flattenToArray(h._projectionMatrixArray);f.multiply(h.projectionMatrix,
 h.matrixWorldInverse);e.setFromMatrix(f);b.setRenderTarget(this.renderTarget);b.clear();p=g.__webglObjects;i=0;for(j=p.length;i<j;i++){l=p[i];n=l.object;l.render=false;if(n.visible&&(!(n instanceof THREE.Mesh)||!n.frustumCulled||e.contains(n))){n._modelViewMatrix.multiply(h.matrixWorldInverse,n.matrixWorld);l.render=true}}i=0;for(j=p.length;i<j;i++){l=p[i];if(l.render){n=l.object;l=l.buffer;n.material&&b.setMaterialFaces(n.material);m=n.customDepthMaterial?n.customDepthMaterial:n.geometry.morphTargets.length?

examples/webgl_sprites.html

@@ -53,7 +53,7 @@
 
 				var amount = 200;
 				var radius = 500;
-				var mapA = THREE.ImageUtils.loadTexture( "textures/sprite0.png" );
+				var mapA = THREE.ImageUtils.loadTexture( "textures/sprite0.png", undefined, function() { createHUDSprites() } );
 				var mapB = THREE.ImageUtils.loadTexture( "textures/sprite1.png" );
 				mapC = THREE.ImageUtils.loadTexture( "textures/sprite2.png" );
 
@@ -90,20 +90,30 @@
 
 				// add 2d-sprites
 
-				sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );
-				sprite.position.set( 100, 100, 0 );
-				sprite.opacity = 0.25;
-				scene.add( sprite );
+				var createHUDSprites = function() {
 
-				sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );
-				sprite.position.set( 150, 150, 2 );
-				sprite.opacity = 0.5;
-				scene.add( sprite );
+					var scaleX = mapA.image.width;
+					var scaleY = mapA.image.height;
 
-				sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );
-				sprite.position.set( 200, 200, 3 );
-				sprite.opacity = 1;
-				scene.add( sprite );
+					sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );
+					sprite.position.set( 100, 100, 0 );
+					sprite.scale.set( scaleX, scaleY, 1 );
+					sprite.opacity = 0.25;
+					scene.add( sprite );
+
+					sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );
+					sprite.position.set( 150, 150, 2 );
+					sprite.scale.set( scaleX, scaleY, 1 );
+					sprite.opacity = 0.5;
+					scene.add( sprite );
+
+					sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );
+					sprite.position.set( 200, 200, 3 );
+					sprite.scale.set( scaleX, scaleY, 1 );
+					sprite.opacity = 1;
+					scene.add( sprite );
+
+				}
 
 				// renderer
 
@@ -152,8 +162,18 @@
 					var sprite = group.children[ c ];
 					var scale = Math.sin( time + sprite.position.x * 0.01 ) * 0.3 + 1.0;
 
+					var imageWidth = 1;
+					var imageHeight = 1;
+
+					if ( sprite.map && sprite.map.image && sprite.map.image.width ) {
+
+						imageWidth = sprite.map.image.width;
+						imageHeight = sprite.map.image.height;
+
+					}
+
 					sprite.rotation += 0.1 * ( c / group.children.length );
-					sprite.scale.set( scale, scale, 1.0 );
+					sprite.scale.set( scale * imageWidth, scale * imageHeight, 1.0 );
 
 					if ( sprite.map !== mapC )
 						sprite.opacity = Math.sin( time + sprite.position.x * 0.01 ) * 0.4 + 0.6;

src/extras/renderers/plugins/SpritePlugin.js

@@ -170,7 +170,8 @@ THREE.SpritePlugin = function ( ) {
 
 				}
 
-				size = sprite.map.image.width / ( sprite.scaleByViewport ? viewportHeight : 1 );
+				//size = sprite.map.image.width / ( sprite.scaleByViewport ? viewportHeight : 1 );
+				size = 1 / ( sprite.scaleByViewport ? viewportHeight : 1 );
 
 				scale[ 0 ] = size * invAspect * sprite.scale.x;
 				scale[ 1 ] = size * sprite.scale.y;