Trying to get CanvasRenderer to match WebGLRenderer Sprite’s offset/repeat handling.

Failing though… help @WestLangley?

examples/misc_ubiquity_test2.html

@@ -25,6 +25,7 @@
 			var canvasRenderer, webglRenderer;
 
 			var texture, mesh;
+			var texture2;
 
 			init();
 			animate();
@@ -34,7 +35,7 @@
 				var width = window.innerWidth / 2;
 				var height = window.innerHeight;
 
-				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 2000 );
 				camera.position.z = 400;
 
 				scene = new THREE.Scene();
@@ -50,6 +51,37 @@
 				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
+				// SPRITES
+
+				texture2 = THREE.ImageUtils.loadTexture( 'textures/sprite.png' );
+				texture2.wrapS = THREE.RepeatWrapping;
+				texture2.wrapT = THREE.RepeatWrapping;
+				var material = new THREE.SpriteMaterial( { map: texture2 } );
+
+				for ( var i = 0; i < 50; i ++ ) {
+
+					var sprite = new THREE.Sprite( material );
+					sprite.position.x = Math.random() * 1000 - 500;
+					sprite.position.y = Math.random() * 1000 - 500;
+					sprite.position.z = Math.random() * 1000 - 500;
+					sprite.scale.set( 64, 64, 1 );
+					scene.add( sprite );
+
+				}
+
+				for ( var i = 0; i < 50; i ++ ) {
+
+					var material = new THREE.SpriteMaterial( { color: Math.random() * 0xffffff } );
+					var sprite = new THREE.Sprite( material );
+					sprite.position.x = Math.random() * 1000 - 500;
+					sprite.position.y = Math.random() * 1000 - 500;
+					sprite.position.z = Math.random() * 1000 - 500;
+					sprite.scale.set( 64, 64, 1 );
+					scene.add( sprite );
+
+				}
+
+
 				canvasRenderer = new THREE.CanvasRenderer();
 				canvasRenderer.setClearColor( 0xf0f0f0 );
 				canvasRenderer.setSize( width, height );
@@ -112,6 +144,16 @@
 				mesh.rotation.x = time * 2;
 				mesh.rotation.y = time * 4;
 
+				//
+
+				texture2.repeat.x = Math.sin( time ) * 0.5 + 0.5;
+				texture2.repeat.y = Math.cos( time ) * 0.5 + 0.5;
+
+				texture2.offset.x = Math.sin( time );
+				texture2.offset.y = Math.cos( time );
+
+				//
+
 				scene.updateMatrixWorld();
 
 				canvasRenderer.render( scene, camera );

src/renderers/CanvasRenderer.js

@@ -472,16 +472,49 @@ THREE.CanvasRenderer = function ( parameters ) {
 		if ( material instanceof THREE.SpriteMaterial ||
 			 material instanceof THREE.ParticleSystemMaterial ) { // Backwards compatibility
 
-			if ( material.map !== null ) {
+			var texture = material.map;
+
+			if ( texture !== null ) {
+
+				if ( texture.hasEventListener( 'update', onTextureUpdate ) === false ) {
+
+					if ( texture.image !== undefined && texture.image.width > 0 ) {
+
+						textureToPattern( texture );
+
+					}
+
+					texture.addEventListener( 'update', onTextureUpdate );
+
+				}
+
+				var pattern = _patterns[ texture.id ];
+
+				if ( pattern !== undefined ) {
 
-				var bitmap = material.map.image;
+					setFillStyle( pattern );
+
+				} else {
+
+					setFillStyle( 'rgba(0,0,0,1)' );
+
+				}
 
 				_context.save();
 				_context.translate( v1.x, v1.y );
-				_context.rotate( material.rotation );
+				if ( material.rotation !== 0 ) _context.rotate( material.rotation );
 				_context.scale( scaleX, - scaleY );
-
-				_context.drawImage( bitmap, 0, 0, bitmap.width, bitmap.height, - 0.5, - 0.5, 1, 1 );
+				_context.beginPath();
+				_context.moveTo( - 0.5, - 0.5 );
+				_context.lineTo(   0.5, - 0.5 );
+				_context.lineTo(   0.5,   0.5 );
+				_context.lineTo( - 0.5,   0.5 );
+				_context.closePath();
+				_context.translate( - 0.5, 0.5 );
+				_context.translate( - texture.offset.x, texture.offset.y );
+				_context.scale( 1 / texture.image.width, - 1 / texture.image.height );
+				_context.scale( 1 / texture.repeat.x, 1 / texture.repeat.y );
+				_context.fill();
 				_context.restore();
 
 			} else {
@@ -490,7 +523,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 				_context.save();
 				_context.translate( v1.x, v1.y );
-				_context.rotate( material.rotation );
+				if ( material.rotation !== 0 ) _context.rotate( material.rotation );
 				_context.scale( scaleX, - scaleY );
 				_context.fillRect( - 0.5, - 0.5, 1, 1 );
 				_context.restore();
@@ -504,7 +537,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 			_context.save();
 			_context.translate( v1.x, v1.y );
-			_context.rotate( - element.rotation );
+			if ( material.rotation !== 0 ) _context.rotate( material.rotation );
 			_context.scale( scaleX, scaleY );
 
 			material.program( _context );
@@ -842,16 +875,20 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 		}
 
-		if ( _patterns[ texture.id ] === undefined ) {
+		var pattern = _patterns[ texture.id ];
 
-			setFillStyle( 'rgba(0,0,0,1)' )
+		if ( pattern !== undefined ) {
+
+			setFillStyle( pattern );
+
+		} else {
+
+			setFillStyle( 'rgba(0,0,0,1)' );
 			_context.fill();
 
 			return;
 
-		}
-	
-		setFillStyle( _patterns[ texture.id ] );
+		}	
 
 		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120