x_ite 4.0.5 → 4.7.5

package/src/x_ite/Browser/Core/BrowserOptions.js

@@ -48,39 +48,53 @@
 
 
 define ([
-	"jquery",
 	"x_ite/Fields",
 	"x_ite/Basic/X3DFieldDefinition",
 	"x_ite/Basic/FieldDefinitionArray",
 	"x_ite/Basic/X3DBaseNode",
 	"x_ite/Bits/X3DConstants",
 	"x_ite/Browser/Core/PrimitiveQuality",
+	"x_ite/Browser/Core/Shading",
 	"x_ite/Browser/Core/TextureQuality",
+	"x_ite/Browser/Navigation/X3DFlyViewer",
 ],
-function ($,
-          Fields,
+function (Fields,
           X3DFieldDefinition,
           FieldDefinitionArray,
           X3DBaseNode,
           X3DConstants,
           PrimitiveQuality,
-          TextureQuality)
+          Shading,
+          TextureQuality,
+          X3DFlyViewer)
 {
 "use strict";
-	
+
+	function toBoolean (value, defaultValue)
+	{
+		if (value === "true" || value === "TRUE")
+			return true;
+
+		if (value === "false" || value === "FALSE")
+			return false;
+
+		return defaultValue;
+	}
+
 	function BrowserOptions (executionContext)
 	{
 		X3DBaseNode .call (this, executionContext);
 
 		this .addAlias ("AntiAliased", this .Antialiased_);
 
-		this .setAttributeSplashScreen ();
-
+		this .textureQuality   = TextureQuality .MEDIUM
 		this .primitiveQuality = PrimitiveQuality .MEDIUM;
-		this .textureQuality   = TextureQuality   .MEDIUM;
+		this .shading          = Shading .GOURAUD;
+
+		this .setAttributeSplashScreen ();
 	}
 
-	BrowserOptions .prototype = $.extend (Object .create (X3DBaseNode .prototype),
+	BrowserOptions .prototype = Object .assign (Object .create (X3DBaseNode .prototype),
 	{
 		constructor: BrowserOptions,
 		fieldDefinitions: new FieldDefinitionArray ([
@@ -95,6 +109,8 @@ function ($,
 			new X3DFieldDefinition (X3DConstants .inputOutput, "Shading",                new Fields .SFString ("GOURAUD")),
 			new X3DFieldDefinition (X3DConstants .inputOutput, "MotionBlur",             new Fields .SFBool ()),
 			new X3DFieldDefinition (X3DConstants .inputOutput, "Gravity",                new Fields .SFFloat (9.80665)),
+			new X3DFieldDefinition (X3DConstants .inputOutput, "StraightenHorizon",      new Fields .SFBool (true)),
+			new X3DFieldDefinition (X3DConstants .inputOutput, "LogarithmicDepthBuffer", new Fields .SFBool (false)),
 		]),
 		getTypeName: function ()
 		{
@@ -111,18 +127,22 @@ function ($,
 		initialize: function ()
 		{
 			X3DBaseNode .prototype .initialize .call (this);
-			
-			this .SplashScreen_              .addInterest ("set_splashScreen__", this);
-			this .Rubberband_                .addInterest ("set_rubberband__", this);
-			this .PrimitiveQuality_          .addInterest ("set_primitiveQuality__", this);
-			this .TextureQuality_            .addInterest ("set_textureQuality__", this);
-			this .Shading_                   .addInterest ("set_shading__", this);
-			this .getBrowser () .shutdown () .addInterest ("configure", this);
+
+			this .SplashScreen_              .addInterest ("set_splashScreen__",           this);
+			this .Rubberband_                .addInterest ("set_rubberband__",             this);
+			this .PrimitiveQuality_          .addInterest ("set_primitiveQuality__",       this);
+			this .TextureQuality_            .addInterest ("set_textureQuality__",         this);
+			this .Shading_                   .addInterest ("set_shading__",                this);
+			this .StraightenHorizon_         .addInterest ("set_straightenHorizon__",      this);
+			this .LogarithmicDepthBuffer_    .addInterest ("set_logarithmicDepthBuffer__", this);
 
 			this .configure ();
 		},
 		configure: function ()
 		{
+			if (! this .isInitialized ())
+				return;
+
 			var fieldDefinitions = this .getFieldDefinitions ();
 
 			for (var i = 0; i < fieldDefinitions .length; ++ i)
@@ -131,7 +151,7 @@ function ($,
 					fieldDefinition = fieldDefinitions [i],
 					field           = this .getField (fieldDefinition .name);
 
-				if (this .getBrowser () .getDataStorage () ["BrowserOptions." + fieldDefinition .name] !== undefined)
+				if (this .getBrowser () .getLocalStorage () ["BrowserOptions." + fieldDefinition .name] !== undefined)
 					continue;
 
 				if (! field .equals (fieldDefinition .value))
@@ -139,51 +159,64 @@ function ($,
 			}
 
 			var
-				rubberband       = this .getBrowser () .getDataStorage () ["BrowserOptions.Rubberband"],
-				primitiveQuality = this .getBrowser () .getDataStorage () ["BrowserOptions.PrimitiveQuality"],
-				textureQuality   = this .getBrowser () .getDataStorage () ["BrowserOptions.TextureQuality"];
+				rubberband        = this .getBrowser () .getLocalStorage () ["BrowserOptions.Rubberband"],
+				primitiveQuality  = this .getBrowser () .getLocalStorage () ["BrowserOptions.PrimitiveQuality"],
+				textureQuality    = this .getBrowser () .getLocalStorage () ["BrowserOptions.TextureQuality"],
+				straightenHorizon = this .getBrowser () .getLocalStorage () ["BrowserOptions.StraightenHorizon"];
 
 			this .setAttributeSplashScreen ();
 
-			if (rubberband       !== undefined && rubberband       !== this .Rubberband_       .getValue ()) this .Rubberband_       = rubberband;
-			if (primitiveQuality !== undefined && primitiveQuality !== this .PrimitiveQuality_ .getValue ()) this .PrimitiveQuality_ = primitiveQuality;
-			if (textureQuality   !== undefined && textureQuality   !== this .TextureQuality_   .getValue ()) this .TextureQuality_   = textureQuality;
+			if (rubberband !== undefined && rubberband !== this .Rubberband_ .getValue ())
+				this .Rubberband_ = rubberband;
+
+			if (primitiveQuality !== undefined && primitiveQuality !== this .PrimitiveQuality_ .getValue () .toUpperCase ())
+				this .PrimitiveQuality_ = primitiveQuality;
+
+			if (textureQuality !== undefined && textureQuality !== this .TextureQuality_ .getValue () .toUpperCase ())
+				this .TextureQuality_ = textureQuality;
+
+			if (straightenHorizon !== undefined && straightenHorizon !== this .StraightenHorizon_ .getValue ())
+				this .StraightenHorizon_ = straightenHorizon;
 		},
 		setAttributeSplashScreen: function ()
 		{
 			this .SplashScreen_ .set (this .getSplashScreen ());
 		},
-		getSplashScreen: function ()
+		getCache: function ()
 		{
-			return this .getBrowser () .getElement () .attr ("splashScreen") !== "false";
+			return toBoolean (this .getBrowser () .getElement () .attr ("cache"), true);
 		},
-		getNotifications: function ()
+		getContextMenu: function ()
 		{
-			return this .getBrowser () .getElement () .attr ("notifications") !== "false";
+			return toBoolean (this .getBrowser () .getElement () .attr ("contextMenu"), true);
 		},
-		getTimings: function ()
+		getDebug: function ()
 		{
-			return this .getBrowser () .getElement () .attr ("timings") !== "false";
+			return toBoolean (this .getBrowser () .getElement () .attr ("debug"), false);
 		},
-		getContextMenu: function ()
+		getNotifications: function ()
 		{
-			return this .getBrowser () .getElement () .attr ("contextMenu") !== "false";
+			return toBoolean (this .getBrowser () .getElement () .attr ("notifications"), true);
 		},
-		getCache: function ()
+		getSplashScreen: function ()
 		{
-			return this .getBrowser () .getElement () .attr ("cache") !== "false";
+			return toBoolean (this .getBrowser () .getElement () .attr ("splashScreen"), true);
+		},
+		getTimings: function ()
+		{
+			return toBoolean (this .getBrowser () .getElement () .attr ("timings"), true);
 		},
 		getPrimitiveQuality: function ()
 		{
 			return this .primitiveQuality;
 		},
-		getTextureQuality: function ()
+		getShading: function ()
 		{
-			return this .textureQuality;
+			return this .shading;
 		},
-		getShading: function ()
+		getTextureQuality: function ()
 		{
-			return this .Shading_ .getValue ();
+			return this .textureQuality;
 		},
 		set_splashScreen__: function (splashScreen)
 		{
@@ -191,83 +224,89 @@ function ($,
 		},
 		set_rubberband__: function (rubberband)
 		{
-			this .getBrowser () .getDataStorage () ["BrowserOptions.Rubberband"] = rubberband .getValue ();
+			this .getBrowser () .getLocalStorage () ["BrowserOptions.Rubberband"] = rubberband .getValue ();
+			this .getBrowser () .getViewer () .initShaders ();
 		},
-		set_primitiveQuality__: function (primitiveQuality)
+		set_primitiveQuality__: function (value)
 		{
-			this .getBrowser () .getDataStorage () ["BrowserOptions.PrimitiveQuality"] = primitiveQuality .getValue ();
+			var
+				browser          = this .getBrowser (),
+				primitiveQuality = value .getValue () .toUpperCase ();
+
+			browser .getLocalStorage () ["BrowserOptions.PrimitiveQuality"] = primitiveQuality;
 
 			var
-				arc      = this .getBrowser () .getArc2DOptions (),
-				arcClose = this .getBrowser () .getArcClose2DOptions (),
-				circle   = this .getBrowser () .getCircle2DOptions (),
-				disk     = this .getBrowser () .getDisk2DOptions (),
-				cone     = this .getBrowser () .getConeOptions (),
-				cylinder = this .getBrowser () .getCylinderOptions (),
-				sphere   = this .getBrowser () .getSphereOptions ();
-
-			switch (primitiveQuality .getValue ())
+				cone     = browser .getConeOptions (),
+				cylinder = browser .getCylinderOptions (),
+				sphere   = browser .getSphereOptions ();
+
+			switch (primitiveQuality)
 			{
 				case "LOW":
 				{
+					if (this .primitiveQuality === PrimitiveQuality .LOW)
+						break;
+
 					this .primitiveQuality = PrimitiveQuality .LOW;
-				
-					arc .dimension_      = 20;
-					arcClose .dimension_ = 20;
-					circle .dimension_   = 20;
-					disk .dimension_     = 20;
+
+					if (browser .setGeometry2DPrimitiveQuality)
+						browser .setGeometry2DPrimitiveQuality (this .primitiveQuality);
 
 					cone     .xDimension_ = 16;
 					cylinder .xDimension_ = 16;
-
-					sphere .xDimension_ = 20;
-					sphere .yDimension_ = 9;
+					sphere   .xDimension_ = 20;
+					sphere   .yDimension_ = 9;
 					break;
 				}
 				case "HIGH":
 				{
+					if (this .primitiveQuality === PrimitiveQuality .HIGH)
+						break;
+
 					this .primitiveQuality = PrimitiveQuality .HIGH;
 
-					arc .dimension_      = 80;
-					arcClose .dimension_ = 80;
-					circle .dimension_   = 80;
-					disk .dimension_     = 80;
+					if (browser .setGeometry2DPrimitiveQuality)
+						browser .setGeometry2DPrimitiveQuality (this .primitiveQuality);
 
 					cone     .xDimension_ = 32;
 					cylinder .xDimension_ = 32;
-
-					sphere .xDimension_ = 64;
-					sphere .yDimension_ = 31;
+					sphere   .xDimension_ = 64;
+					sphere   .yDimension_ = 31;
 					break;
 				}
 				default:
 				{
+					if (this .primitiveQuality === PrimitiveQuality .MEDIUM)
+						break;
+
 					this .primitiveQuality = PrimitiveQuality .MEDIUM;
 
-					arc .dimension_      = 40;
-					arcClose .dimension_ = 40;
-					circle .dimension_   = 40;
-					disk .dimension_     = 40;
+					if (browser .setGeometry2DPrimitiveQuality)
+						browser .setGeometry2DPrimitiveQuality (this .primitiveQuality);
 
 					cone     .xDimension_ = 20;
 					cylinder .xDimension_ = 20;
-
-					sphere .xDimension_ = 32;
-					sphere .yDimension_ = 15;
+					sphere   .xDimension_ = 32;
+					sphere   .yDimension_ = 15;
 					break;
 				}
 			}
 		},
-		set_textureQuality__: function (textureQuality)
+		set_textureQuality__: function (value)
 		{
-			this .getBrowser () .getDataStorage () ["BrowserOptions.TextureQuality"] = textureQuality .getValue ();
+			var textureQuality = value .getValue () .toUpperCase ();
+
+			this .getBrowser () .getLocalStorage () ["BrowserOptions.TextureQuality"] = textureQuality;
 
 			var textureProperties = this .getBrowser () .getDefaultTextureProperties ();
 
-			switch (textureQuality .getValue ())
+			switch (textureQuality)
 			{
 				case "LOW":
 				{
+					if (this .textureQuality === TextureQuality .LOW)
+						break;
+
 					this .textureQuality = TextureQuality .LOW;
 
 					textureProperties .magnificationFilter_ = "AVG_PIXEL";
@@ -281,19 +320,25 @@ function ($,
 				}
 				case "HIGH":
 				{
+					if (this .textureQuality === TextureQuality .HIGH)
+						break;
+
 					this .textureQuality = TextureQuality .HIGH;
 
 					textureProperties .magnificationFilter_ = "NICEST";
 					textureProperties .minificationFilter_  = "NICEST";
 					textureProperties .textureCompression_  = "NICEST";
 					textureProperties .generateMipMaps_     = true;
-			
+
 					//glHint (GL_GENERATE_MIPMAP_HINT,        GL_NICEST);
 					//glHint (GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);
 					break;
 				}
 				default:
 				{
+					if (this .textureQuality === TextureQuality .MEDIUM)
+						break;
+
 					this .textureQuality = TextureQuality .MEDIUM;
 
 					textureProperties .magnificationFilter_ = "NICEST";
@@ -307,9 +352,92 @@ function ($,
 				}
 			}
 		},
-		set_shading__: function (shading)
+		set_shading__: function (value)
+		{
+			var shading = value .getValue () .toUpperCase ();
+
+			switch (shading)
+			{
+				case "POINT":
+				case "POINTSET":
+				{
+					this .shading = Shading .POINT;
+					break;
+				}
+				case "WIREFRAME":
+				{
+					this .shading = Shading .WIREFRAME;
+					break;
+				}
+				case "FLAT":
+				{
+					this .shading = Shading .FLAT;
+					break;
+				}
+				case "PHONG":
+				{
+					this .shading = Shading .PHONG;
+					break;
+				}
+				default:
+				{
+					this .shading = Shading .GOURAUD;
+					break;
+				}
+			}
+
+			this .getBrowser () .setShading (this .shading);
+		},
+		set_straightenHorizon__: function (straightenHorizon)
 		{
-			this .getBrowser () .setShading (shading .getValue ());
+			this .getBrowser () .getLocalStorage () ["BrowserOptions.StraightenHorizon"] = straightenHorizon .getValue ();
+		},
+		set_logarithmicDepthBuffer__: function (logarithmicDepthBuffer)
+		{
+			var
+				browser = this .getBrowser (),
+				gl      = browser .getContext ();
+
+			logarithmicDepthBuffer = logarithmicDepthBuffer .getValue () && (gl .getVersion () >= 2 || Boolean (browser .getExtension ("EXT_frag_depth")));
+
+			if (logarithmicDepthBuffer === browser .getRenderingProperties () .LogarithmicDepthBuffer_ .getValue ())
+				return;
+
+			browser .getRenderingProperties () .LogarithmicDepthBuffer_ = logarithmicDepthBuffer;
+
+			// Recompile shaders.
+
+			// There's no need to update background shader.
+
+			if (browser .hasPointShader ())
+			{
+				browser .getPointShader () .parts_ [0] .getValue () .url_ .addEvent ();
+				browser .getPointShader () .parts_ [1] .getValue () .url_ .addEvent ();
+			}
+
+			if (browser .hasLineShader ())
+			{
+				browser .getLineShader () .parts_ [0] .getValue () .url_ .addEvent ();
+				browser .getLineShader () .parts_ [1] .getValue () .url_ .addEvent ();
+			}
+
+			if (browser .hasGouraudShader ())
+			{
+				browser .getGouraudShader () .parts_ [0] .getValue () .url_ .addEvent ();
+				browser .getGouraudShader () .parts_ [1] .getValue () .url_ .addEvent ();
+			}
+
+			if (browser .hasPhongShader ())
+			{
+				browser .getPhongShader () .parts_ [0] .getValue () .url_ .addEvent ();
+				browser .getPhongShader () .parts_ [1] .getValue () .url_ .addEvent ();
+			}
+
+			if (browser .hasShadowShader ())
+			{
+				browser .getShadowShader () .parts_ [0] .getValue () .url_ .addEvent ();
+				browser .getShadowShader () .parts_ [1] .getValue () .url_ .addEvent ();
+			}
 		},
 	});
 

package/src/x_ite/Browser/Core/BrowserProperties.js

@@ -48,15 +48,13 @@
 
 
 define ([
-	"jquery",
 	"x_ite/Fields",
 	"x_ite/Basic/X3DFieldDefinition",
 	"x_ite/Basic/FieldDefinitionArray",
 	"x_ite/Basic/X3DBaseNode",
 	"x_ite/Bits/X3DConstants",
 ],
-function ($,
-          Fields,
+function (Fields,
           X3DFieldDefinition,
           FieldDefinitionArray,
           X3DBaseNode, 
@@ -69,7 +67,7 @@ function ($,
 		X3DBaseNode .call (this, executionContext);
 	}
 
-	BrowserProperties .prototype = $.extend (Object .create (X3DBaseNode .prototype),
+	BrowserProperties .prototype = Object .assign (Object .create (X3DBaseNode .prototype),
 	{
 		constructor: BrowserProperties,
 		fieldDefinitions: new FieldDefinitionArray ([

package/src/x_ite/Browser/Core/BrowserTimings.js

@@ -59,7 +59,7 @@ function ($,
           _)
 {
 "use strict";
-	
+
    function f2 (n) { return Math .floor (n * 100) / 100; }
 
 	function BrowserTimings (executionContext)
@@ -69,7 +69,7 @@ function ($,
 		this .addChildObjects ("enabled", new SFBool ());
 	}
 
-	BrowserTimings .prototype = $.extend (Object .create (X3DBaseNode .prototype),
+	BrowserTimings .prototype = Object .assign (Object .create (X3DBaseNode .prototype),
 	{
 		constructor: BrowserTimings,
 		getTypeName: function ()
@@ -91,21 +91,21 @@ function ($,
 			this .enabled_ .addInterest ("set_enabled__", this);
 
 			this .localeOptions = { minimumFractionDigits: 2, maximumFractionDigits: 2 };
-			this .type          = this .getBrowser () .getDataStorage () ["BrowserTimings.type"] || "LESS";
+			this .type          = this .getBrowser () .getLocalStorage () ["BrowserTimings.type"] || "LESS";
 			this .startTime     = 0;
 			this .frames        = 0;
 
-			this .element = $("<div></div>") .addClass ("x_ite-private-browser-timings") .appendTo (this .getBrowser () .getElement () .find (".x_ite-private-surface"));
+			this .element = $("<div></div>") .addClass ("x_ite-private-browser-timings") .appendTo (this .getBrowser () .getSurface ());
 			this .table   = $("<table></table>") .appendTo (this .element);
 			this .header  = $("<thead></thead>") .append ($("<tr></tr>") .append ($("<th colspan='2'></th>"))) .appendTo (this .table);
 			this .body    = $("<tbody></tbody>") .appendTo (this .table);
 			this .footer  = $("<tfoot></tfoot>") .append ($("<tr></tr>") .append ($("<td colspan='2'></td>"))) .appendTo (this .table);
-			this .button  = $("<button></button>") .click (this .set_type__ .bind (this)) .appendTo (this .footer .find ("td"));
+			this .button  = $("<button></button>") .attr ("type", "button") .click (this .set_type__ .bind (this)) .appendTo (this .footer .find ("td"));
 			this .rows    = [ ];
 
 			this .set_button__ ();
 
-			if (this .getBrowser () .getDataStorage () ["BrowserTimings.enabled"])
+			if (this .getBrowser () .getLocalStorage () ["BrowserTimings.enabled"])
 				this .enabled_ = true;
 		},
 		setEnabled: function (value)
@@ -121,7 +121,7 @@ function ($,
 			if (! this .getBrowser () .getBrowserOptions () .getTimings ())
 				return;
 
-			this .getBrowser () .getDataStorage () ["BrowserTimings.enabled"] = enabled .getValue ();
+			this .getBrowser () .getLocalStorage () ["BrowserTimings.enabled"] = enabled .getValue ();
 
 			if (enabled .getValue ())
 			{
@@ -142,7 +142,7 @@ function ($,
 			else
 				this .type = "MORE";
 
-			this .getBrowser () .getDataStorage () ["BrowserTimings.type"] = this .type;
+			this .getBrowser () .getLocalStorage () ["BrowserTimings.type"] = this .type;
 
 			this .set_button__ ();
 			this .build ();
@@ -157,11 +157,11 @@ function ($,
 		update: function ()
 		{
 			var currentTime = this .getBrowser () .getCurrentTime ();
-		
+
 			if (currentTime - this .startTime > 1)
 			{
 			   this .build ();
-				
+
 				this .frames    = 0;
 				this .startTime = currentTime;
 			}
@@ -177,21 +177,21 @@ function ($,
 				fixed       = this .localeOptions,
 				rows        = this .rows,
 				r           = 0;
-			
+
 			rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Frame rate") + ":")) .append ($("<td></td>") .text (f2(this .frames / (currentTime - this .startTime)) .toLocaleString (language, fixed) + " " + _("fps")));
 			rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Speed")      + ":")) .append ($("<td></td>") .text (f2(this .getSpeed (browser .currentSpeed))         .toLocaleString (language, fixed) + " " + this .getSpeedUnit (browser .currentSpeed)));
 
 			if (this .type === "MORE")
 			{
-				var 
+				var
 					layers            = browser .getWorld () .getLayerSet () .getLayers (),
 					activeLayer       = browser .getActiveLayer (),
 					systemTime        = browser .systemTime,
 					navigationTime    = activeLayer && browser .getCollisionCount () ? activeLayer .collisionTime : 0,
 					collisionTime     = browser .collisionTime + navigationTime,
 					routingTime       = browser .browserTime - (browser .cameraTime + browser .collisionTime + browser .displayTime + navigationTime),
-					prepareEvents     = Object .keys (browser .prepareEvents () .getInterests ()) .length - 1,
-					sensors           = Object .keys (browser .sensors () .getInterests ()) .length,
+					prepareEvents     = browser .prepareEvents () .getInterests () .size - 1,
+					sensors           = browser .sensorEvents () .getInterests () .size,
 					opaqueShapes      = 0,
 					transparentShapes = 0;
 
@@ -207,8 +207,9 @@ function ($,
 				rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Browser")   + ":")) .append ($("<td></td>") .text (f2(systemTime)           .toLocaleString (language, fixed) + " " + _("ms")));
 				rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("X3D")       + ":")) .append ($("<td></td>") .text (f2(browser .browserTime) .toLocaleString (language, fixed) + " " + _("ms")));
 				rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Routing")   + ":")) .append ($("<td></td>") .text (f2(routingTime)          .toLocaleString (language, fixed) + " " + _("ms")));
-				rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Picking")   + ":")) .append ($("<td></td>") .text (f2(browser .pickingTime) .toLocaleString (language, fixed) + " " + _("ms")));
+				rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Pointer")   + ":")) .append ($("<td></td>") .text (f2(browser .pointerTime) .toLocaleString (language, fixed) + " " + _("ms")));
 				rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Camera")    + ":")) .append ($("<td></td>") .text (f2(browser .cameraTime)  .toLocaleString (language, fixed) + " " + _("ms")));
+				rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Picking")   + ":")) .append ($("<td></td>") .text (f2(browser .pickingTime) .toLocaleString (language, fixed) + " " + _("ms")));
 				rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Collision") + ":")) .append ($("<td></td>") .text (f2(collisionTime)        .toLocaleString (language, fixed) + " " + _("ms")));
 				rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Display")   + ":")) .append ($("<td></td>") .text (f2(browser .displayTime) .toLocaleString (language, fixed) + " " + _("ms")));
 				rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Shapes")    + ":")) .append ($("<td></td>") .text (opaqueShapes + " + " + transparentShapes));