Use a separate texture for left/right skaters to avoid WebGL performa…

…nce issues when switching textures
phetsims · Sep 23, 2014 · fcbe3ed · fcbe3ed
1 parent 92c4f78
commit fcbe3ed
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/js/view/SkaterNode.js b/js/view/SkaterNode.js
@@ -42,8 +42,17 @@ define( function( require ) {
     this.skater = skater;
     var skaterNode = this;
 
-    var skaterImageNode = new Image( skaterRightImage, { cursor: 'pointer' } );
-    Node.call( this, {children: [skaterImageNode], renderer: 'webgl' } );
+    //Use a separate texture for left/right skaters to avoid WebGL performance issues when switching textures
+    var leftSkaterImageNode = new Image( skaterLeftImage, { cursor: 'pointer' } );
+    var rightSkaterImageNode = new Image( skaterRightImage, { cursor: 'pointer' } );
+
+    Node.call( this, {children: [leftSkaterImageNode, rightSkaterImageNode], renderer: 'webgl' } );
+
+    skater.directionProperty.link( function( direction ) {
+      leftSkaterImageNode.visible = direction === 'left';
+      rightSkaterImageNode.visible = direction === 'right';
+    } );
+
     var imageWidth = this.width;
     var imageHeight = this.height;
 
@@ -66,7 +75,6 @@ define( function( require ) {
       rotationMatrix.freeToPool();
 
       var scale = massToScale( mass );
-      skaterImageNode.image = direction === LEFT_STRING ? skaterLeftImage : skaterRightImage;
       var scalingMatrix = Matrix3.scaling( scale, scale );
       matrix.multiplyMatrix( scalingMatrix );
       scalingMatrix.freeToPool();