x_ite 4.2.17 → 4.7.7

package/src/x_ite/Browser/Navigation/X3DFlyViewer.js

@@ -66,7 +66,9 @@ function ($,
           Camera)
 {
 "use strict";
-	
+
+	var macOS = /Mac OS X/i .test (navigator .userAgent)
+
 	var
 		SPEED_FACTOR           = 0.007,
 		SHIFT_SPEED_FACTOR     = 4 * SPEED_FACTOR,
@@ -74,13 +76,13 @@ function ($,
 		ROTATION_LIMIT         = 40,
 		PAN_SPEED_FACTOR       = SPEED_FACTOR,
 		PAN_SHIFT_SPEED_FACTOR = 1.4 * PAN_SPEED_FACTOR,
-		ROLL_ANGLE             = Math .PI / 32,
+		ROLL_ANGLE             = macOS ? Math .PI / 512 : Math .PI / 32,
 		ROTATE_TIME            = 0.3;
-	
+
 	var
 		MOVE = 0,
 		PAN  = 1;
-	
+
 	function X3DFlyViewer (executionContext)
 	{
 		X3DViewer .call (this, executionContext);
@@ -108,9 +110,9 @@ function ($,
 		{
 			X3DViewer .prototype .initialize .call (this);
 
-			var
+			const
 			   browser = this .getBrowser (),
-			   element = browser .getElement ();
+			   element = browser .getSurface ();
 
 			// Bind pointing device events.
 
@@ -128,6 +130,19 @@ function ($,
 			this .orientationChaser .duration_ = ROTATE_TIME;
 			this .orientationChaser .setPrivate (true);
 			this .orientationChaser .setup ();
+
+			// Preload line shader.
+			this .initShaders ()
+		},
+		initShaders: function ()
+		{
+			const browser = this .getBrowser ();
+
+			if (!browser .getBrowserOption ("Rubberband"))
+				return;
+
+			browser .getLineShader ();
+			browser .getDepthShader ();
 		},
 		addCollision: function () { },
 		removeCollision: function () { },
@@ -141,17 +156,20 @@ function ($,
 		},
 		mousedown: function (event)
 		{
+			if (this .getBrowser () .getContextMenu () .getActive ())
+				return;
+
 			if (this .button >= 0)
 				return;
 
 			this .event = event;
 
 			var
-				offset = this .getBrowser () .getElement () .offset (),
+				offset = this .getBrowser () .getSurface () .offset (),
 				x      = event .pageX - offset .left,
 				y      = event .pageY - offset .top;
-			
-			switch (event .button)
+
+			switch (this .getButton (event .button))
 			{
 				case 0:
 				{
@@ -162,7 +180,7 @@ function ($,
 					event .stopImmediatePropagation ();
 
 					this .button = event .button;
-				
+
 					$(document) .bind ("mouseup.X3DFlyViewer"   + this .getId (), this .mouseup   .bind (this));
 					$(document) .bind ("mousemove.X3DFlyViewer" + this .getId (), this .mousemove .bind (this));
 					$(document) .bind ("touchend.X3DFlyViewer"  + this .getId (), this .touchend  .bind (this));
@@ -193,6 +211,7 @@ function ($,
 							this .getBrowser () .finished () .addInterest ("display", this, MOVE);
 					}
 
+					this .isActive_ = true;
 					break;
 				}
 				case 1:
@@ -204,7 +223,7 @@ function ($,
 					event .stopImmediatePropagation ();
 
 					this .button = event .button;
-				
+
 					$(document) .bind ("mouseup.X3DFlyViewer"   + this .getId (), this .mouseup   .bind (this));
 					$(document) .bind ("mousemove.X3DFlyViewer" + this .getId (), this .mousemove .bind (this));
 
@@ -221,7 +240,8 @@ function ($,
 
 					if (this .getBrowser () .getBrowserOption ("Rubberband"))
 						this .getBrowser () .finished () .addInterest ("display", this, PAN);
-					
+
+					this .isActive_ = true;
 					break;
 				}
 			}
@@ -235,12 +255,14 @@ function ($,
 
 			this .event  = null;
 			this .button = -1;
-		
+
 			$(document) .unbind (".X3DFlyViewer" + this .getId ());
 
 			this .disconnect ();
 			this .getBrowser () .setCursor ("DEFAULT");
 			this .removeCollision ();
+
+			this .isActive_ = false;
 		},
 		mousemove: function (event)
 		{
@@ -249,11 +271,11 @@ function ($,
 			this .event = event;
 
 			var
-				offset = this .getBrowser () .getElement () .offset (),
+				offset = this .getBrowser () .getSurface () .offset (),
 				x      = event .pageX - offset .left,
 				y      = event .pageY - offset .top;
-			
-			switch (this .button)
+
+			switch (this .getButton (this .button))
 			{
 				case 0:
 				{
@@ -383,7 +405,7 @@ function ($,
 					event .button = 0;
 					event .pageX  = touches [0] .pageX;
 					event .pageY  = touches [0] .pageY;
-		
+
 					this .mousemove (event);
 					break;
 				}
@@ -394,7 +416,7 @@ function ($,
 					event .button = 0;
 					event .pageX  = (touches [0] .pageX + touches [1] .pageX) / 2;
 					event .pageY  = (touches [0] .pageY + touches [1] .pageY) / 2;
-		
+
 					this .mousemove (event);
 					break;
 				}
@@ -419,18 +441,18 @@ function ($,
 					viewpoint      = this .getActiveViewpoint (),
 					now            = performance .now (),
 					dt             = (now - this .startTime) / 1000;
-	
+
 				upVector .assign (viewpoint .getUpVector ());
-	
+
 				// Rubberband values
-	
+
 				up .setFromToVec (Vector3 .yAxis, upVector);
 
 				if (this .direction .z > 0)
 					rubberBandRotation .setFromToVec (up .multVecRot (direction .assign (this .direction)), up .multVecRot (axis .set (0, 0, 1)));
 				else
 					rubberBandRotation .setFromToVec (up .multVecRot (axis .set (0, 0, -1)), up .multVecRot (direction .assign (this .direction)));
-	
+
 				var rubberBandLength = this .direction .abs ();
 
 				// Determine positionOffset.
@@ -441,13 +463,13 @@ function ($,
 				speedFactor *= viewpoint .getSpeedFactor ();
 				speedFactor *= this .getBrowser () .getShiftKey () ? SHIFT_SPEED_FACTOR : SPEED_FACTOR;
 				speedFactor *= dt;
-	
+
 				var translation = this .getTranslationOffset (direction .assign (this .direction) .multiply (speedFactor));
-	
+
 				this .getActiveLayer () .constrainTranslation (translation, true);
-	
+
 				viewpoint .positionOffset_ = translation .add (viewpoint .positionOffset_ .getValue ());
-	
+
 				// Determine weight for rubberBandRotation.
 
 				var weight = ROTATION_SPEED_FACTOR * dt * Math .pow (rubberBandLength / (rubberBandLength + ROTATION_LIMIT), 2);
@@ -461,8 +483,8 @@ function ($,
 
 				// Straighten horizon of userOrientation.
 
-				if (viewpoint .getTypeName () !== "GeoViewpoint")
-						viewpoint .straightenHorizon (userOrientation);
+				if (viewpoint .getTypeName () !== "GeoViewpoint" && this .getStraightenHorizon ())
+					viewpoint .straightenHorizon (userOrientation);
 
 				// Determine orientationOffset.
 
@@ -476,11 +498,11 @@ function ($,
 				viewpoint .orientationOffset_ = orientationOffset;
 
 				// GeoRotation
-	
+
 				geoRotation .setFromToVec (upVector, viewpoint .getUpVector ());
-	
+
 				viewpoint .orientationOffset_ = geoRotation .multLeft (viewpoint .orientationOffset_ .getValue ());
-	
+
 				this .startTime = now;
 			};
 		})(),
@@ -498,24 +520,24 @@ function ($,
 					now            = performance .now (),
 					dt             = (now - this .startTime) / 1000,
 					upVector       = viewpoint .getUpVector ();
-	
+
 				this .constrainPanDirection (direction .assign (this .direction));
-	
+
 				var speedFactor = 1;
-	
+
 				speedFactor *= navigationInfo .speed_ .getValue ();
 				speedFactor *= viewpoint .getSpeedFactor ();
 				speedFactor *= this .getBrowser () .getShiftKey () ? PAN_SHIFT_SPEED_FACTOR : PAN_SPEED_FACTOR;
 				speedFactor *= dt;
-	
+
 				var
 					orientation = viewpoint .getUserOrientation () .multRight (new Rotation4 (viewpoint .getUserOrientation () .multVecRot (axis .assign (Vector3 .yAxis)), upVector)),
 					translation = orientation .multVecRot (direction .multiply (speedFactor));
-	
+
 				this .getActiveLayer () .constrainTranslation (translation, true);
-	
+
 				viewpoint .positionOffset_ = translation .add (viewpoint .positionOffset_ .getValue ());
-	
+
 				this .startTime = now;
 			};
 		})(),
@@ -539,7 +561,7 @@ function ($,
 		{
 			if (this .startTime)
 				return;
-			
+
 			this .disconnect ();
 			this .getBrowser () .prepareEvents () .addInterest ("pan", this);
 			this .getBrowser () .addBrowserEvent ();
@@ -555,7 +577,7 @@ function ($,
 			return function (rollAngle)
 			{
 				var viewpoint = this .getActiveViewpoint ();
-	
+
 				if (this .orientationChaser .isActive_ .getValue () && this .orientationChaser .value_changed_ .hasInterest ("set_orientationOffset__", this))
 				{
 					orientationOffset
@@ -578,7 +600,7 @@ function ($,
 					this .orientationChaser .set_value_       = viewpoint .orientationOffset_;
 					this .orientationChaser .set_destination_ = orientationOffset;
 				}
-	
+
 				this .disconnect ();
 				this .orientationChaser .value_changed_ .addInterest ("set_orientationOffset__", this);
 			};
@@ -592,7 +614,7 @@ function ($,
 			return function (fromVector, toVector)
 			{
 				var viewpoint = this .getActiveViewpoint ();
-	
+
 				if (this .orientationChaser .isActive_ .getValue () && this .orientationChaser .value_changed_ .hasInterest ("set_orientationOffset__", this))
 				{
 					userOrientation
@@ -600,11 +622,11 @@ function ($,
 						.multRight (viewpoint .getOrientation ())
 						.multRight (this .orientationChaser .set_destination_ .getValue ());
 
-					if (viewpoint .getTypeName () !== "GeoViewpoint")
+					if (viewpoint .getTypeName () !== "GeoViewpoint" && this .getStraightenHorizon ())
 						viewpoint .straightenHorizon (userOrientation);
-	
+
 					orientationOffset .assign (viewpoint .getOrientation ()) .inverse () .multRight (userOrientation);
-	
+
 					this .orientationChaser .set_destination_ = orientationOffset;
 				}
 				else
@@ -613,15 +635,15 @@ function ($,
 						.setFromToVec (toVector, fromVector)
 						.multRight (viewpoint .getUserOrientation ());
 
-					if (viewpoint .getTypeName () !== "GeoViewpoint")
+					if (viewpoint .getTypeName () !== "GeoViewpoint" && this .getStraightenHorizon ())
 						viewpoint .straightenHorizon (userOrientation);
-	
+
 					orientationOffset .assign (viewpoint .getOrientation ()) .inverse () .multRight (userOrientation);
-	
+
 					this .orientationChaser .set_value_       = viewpoint .orientationOffset_;
 					this .orientationChaser .set_destination_ = orientationOffset;
 				}
-	
+
 				this .disconnect ();
 				this .orientationChaser .value_changed_ .addInterest ("set_orientationOffset__", this);
 			};
@@ -638,7 +660,7 @@ function ($,
 			return function (interest, type)
 			{
 				// Configure HUD
-	
+
 				var
 					browser  = this .getBrowser (),
 					viewport = browser .getViewport (),
@@ -646,11 +668,11 @@ function ($,
 					height   = viewport [3];
 
 				Camera .ortho (0, width, 0, height, -1, 1, projectionMatrix);
-	
+
 				projectionMatrixArray .set (projectionMatrix);
-	
+
 				// Display Rubberband.
-	
+
 				if (type === MOVE)
 				{
 					fromPoint .set (this .fromVector .x, height - this .fromVector .z, 0);
@@ -661,42 +683,45 @@ function ($,
 					fromPoint .set (this .fromVector .x, height + this .fromVector .y, 0);
 					toPoint   .set (this .toVector   .x, height + this .toVector   .y, 0);
 				}
-	
+
 				this .transfer (fromPoint, toPoint);
-	
+
 				var
 					gl         = browser .getContext (),
 					shaderNode = browser .getLineShader (),
 					lineWidth  = gl .getParameter (gl .LINE_WIDTH);
-	
-				shaderNode .enable (gl);
-				shaderNode .enableVertexAttribute (gl, this .lineBuffer);
-	
-				gl .uniform1i (shaderNode .x3d_NumClipPlanes, 0);
-				gl .uniform1i (shaderNode .x3d_FogType,       0);
-				gl .uniform1i (shaderNode .x3d_ColorMaterial, false);
-				gl .uniform1i (shaderNode .x3d_Lighting,      true);
-	
-				gl .uniformMatrix4fv (shaderNode .x3d_ProjectionMatrix, false, projectionMatrixArray);
-				gl .uniformMatrix4fv (shaderNode .x3d_ModelViewMatrix,  false, modelViewMatrixArray);
-				
-				gl .disable (gl .DEPTH_TEST);
-	
-				// Draw a black and a white line.
-				gl .lineWidth (2);
-				gl .uniform3f (shaderNode .x3d_EmissiveColor, 0, 0, 0);
-				gl .uniform1f (shaderNode .x3d_Transparency,  0);
-	
-				gl .drawArrays (gl .LINES, 0, this .lineCount);
-	
-				gl .lineWidth (1);
-				gl .uniform3f (shaderNode .x3d_EmissiveColor, 1, 1, 1);
-	
-				gl .drawArrays (gl .LINES, 0, this .lineCount);
-				gl .enable (gl .DEPTH_TEST);
-	
-				gl .lineWidth (lineWidth);
-				shaderNode .disable (gl);
+
+				if (shaderNode .getValid ())
+				{
+					shaderNode .enable (gl);
+					shaderNode .enableVertexAttribute (gl, this .lineBuffer);
+
+					gl .uniform1i (shaderNode .x3d_NumClipPlanes,         0);
+					gl .uniform1i (shaderNode .x3d_FogType,               0);
+					gl .uniform1i (shaderNode .x3d_ColorMaterial,         false);
+					gl .uniform1i (shaderNode .x3d_LinePropertiesApplied, false);
+
+					gl .uniformMatrix4fv (shaderNode .x3d_ProjectionMatrix, false, projectionMatrixArray);
+					gl .uniformMatrix4fv (shaderNode .x3d_ModelViewMatrix,  false, modelViewMatrixArray);
+
+					gl .disable (gl .DEPTH_TEST);
+
+					// Draw a black and a white line.
+					gl .lineWidth (2);
+					gl .uniform3f (shaderNode .x3d_EmissiveColor, 0, 0, 0);
+					gl .uniform1f (shaderNode .x3d_Transparency,  0);
+
+					gl .drawArrays (gl .LINES, 0, this .lineCount);
+
+					gl .lineWidth (1);
+					gl .uniform3f (shaderNode .x3d_EmissiveColor, 1, 1, 1);
+
+					gl .drawArrays (gl .LINES, 0, this .lineCount);
+					gl .enable (gl .DEPTH_TEST);
+
+					gl .lineWidth (lineWidth);
+					shaderNode .disable (gl);
+				}
 			};
 		})(),
 		transfer: function (fromPoint, toPoint)
@@ -740,7 +765,7 @@ function ($,
 		{
 			this .disconnect ();
 			this .getBrowser () .controlKey_ .removeInterest ("set_controlKey_", this);
-			this .getBrowser () .getElement () .unbind (".X3DFlyViewer");
+			this .getBrowser () .getSurface () .unbind (".X3DFlyViewer");
 			$(document) .unbind (".X3DFlyViewer" + this .getId ());
 		},
 	});

package/src/x_ite/Browser/Navigation/X3DNavigationContext.js

@@ -72,13 +72,13 @@ function (Fields,
 	
 	function getHeadLight (browser)
 	{
-		var light = new DirectionalLight (browser .getPrivateScene ());
+		var headlight = new DirectionalLight (browser .getPrivateScene ());
 
-		light .setup ();
+		headlight .setup ();
 
-		var headlightContainer = light .getLights () .pop ();
+		var headlightContainer = headlight .getLights () .pop ();
 
-		headlightContainer .set (browser, light, null, Matrix4 .Identity);
+		headlightContainer .set (browser, headlight, null, Matrix4 .Identity);
 		headlightContainer .dispose = function () { };
 
 		return headlightContainer;
@@ -93,7 +93,7 @@ function (Fields,
 		                       "viewer",               new Fields .SFString ("EXAMINE"));
 		
 		this .activeCollisions = new Set ();
-		this .viewerNode       = null;
+		this .viewerNode       = new NoneViewer (this);
 	}
 
 	X3DNavigationContext .prototype =
@@ -102,10 +102,11 @@ function (Fields,
 		{
 			this .viewer_ .addInterest ("set_viewer__", this);
 
-			this .initialized () .addInterest ("set_world__", this);
+			this .initialized () .addInterest ("set_world__",    this);
 			this .shutdown ()    .addInterest ("remove_world__", this);
 
 			this .headlightContainer = getHeadLight (this);
+			this .viewerNode .setup ();
 		},
 		getHeadlight: function ()
 		{
@@ -127,6 +128,10 @@ function (Fields,
 		{
 			return this .viewer_ .getValue ();
 		},
+		getViewer: function ()
+		{
+			return this .viewerNode;
+		},
 		addCollision: function (object)
 		{
 			this .activeCollisions .add (object);

package/src/x_ite/Browser/Navigation/X3DViewer.js

@@ -63,11 +63,6 @@ function (X3DBaseNode,
           ViewVolume)
 {
 "use strict";
-	
-	var
-		axis     = new Vector3 (0, 0, 0),
-		distance = new Vector3 (0, 0, 0),
-		far      = new Vector3 (0, 0, 0);
 
 	function X3DViewer (executionContext)
 	{
@@ -77,9 +72,14 @@ function (X3DBaseNode,
 	X3DViewer .prototype = Object .assign (Object .create (X3DBaseNode .prototype),
 	{
 		constructor: X3DViewer,
-		initialize: function ()
+		getTypeName: function ()
 		{
+			return "X3DViewer";
 		},
+		initialize: function ()
+		{ },
+		initShaders: function ()
+		{ },
 		getActiveLayer: function ()
 		{
 			return this .getBrowser () .getActiveLayer ();
@@ -96,35 +96,60 @@ function (X3DBaseNode,
 		{
 			return this .getBrowser () .getActiveLayer () .getViewpoint ();
 		},
-		getPointOnCenterPlane: function (x, y, result)
+		getStraightenHorizon: function ()
+		{
+			return this .getBrowser () .getBrowserOption ("StraightenHorizon");
+		},
+		getButton: function (button)
 		{
-			try
+			// If Alt key is pressed and button 0, then emulate button 1 (middle).
+			if (button === 0)
 			{
-				var
-					navigationInfo   = this .getNavigationInfo (),
-					viewpoint        = this .getActiveViewpoint (),
-					viewport         = this .getViewport () .getRectangle (this .getBrowser ()),
-					projectionMatrix = viewpoint .getProjectionMatrixWithLimits (navigationInfo .getNearValue (), navigationInfo .getFarValue (viewpoint), viewport);
-
-				// Far plane point
-				ViewVolume .unProjectPoint (x, this .getBrowser () .getViewport () [3] - y, 0.9, Matrix4 .Identity, projectionMatrix, viewport, far);
-
-				if (viewpoint instanceof OrthoViewpoint)
-					return result .set (far .x, far .y, -this .getDistanceToCenter (distance) .abs ());
+				if (this .getBrowser () .getAltKey ())
+				{
+					return 1;
+				}
+			}
 
-				var direction = far .normalize ();
+			return button;
+		},
+		getPointOnCenterPlane: (function ()
+		{
+			const
+				axis     = new Vector3 (0, 0, -1),
+				distance = new Vector3 (0, 0, 0),
+				far      = new Vector3 (0, 0, 0);
 
-				return result .assign (direction) .multiply (this .getDistanceToCenter (distance) .abs () / direction .dot (axis .set (0, 0, -1)));
-			}
-			catch (error)
+			return function (x, y, result)
 			{
-				console .log (error);
-				return result .set (0, 0, 0);
-			}
-		},
+				try
+				{
+					const
+						navigationInfo   = this .getNavigationInfo (),
+						viewpoint        = this .getActiveViewpoint (),
+						viewport         = this .getViewport () .getRectangle (this .getBrowser ()),
+						projectionMatrix = viewpoint .getProjectionMatrixWithLimits (navigationInfo .getNearValue (), navigationInfo .getFarValue (viewpoint), viewport);
+
+					// Far plane point
+					ViewVolume .unProjectPoint (x, this .getBrowser () .getViewport () [3] - y, 0.9, Matrix4 .Identity, projectionMatrix, viewport, far);
+
+					if (viewpoint instanceof OrthoViewpoint)
+						return result .set (far .x, far .y, -this .getDistanceToCenter (distance) .abs ());
+
+					const direction = far .normalize ();
+
+					return result .assign (direction) .multiply (this .getDistanceToCenter (distance) .abs () / direction .dot (axis));
+				}
+				catch (error)
+				{
+					console .log (error);
+					return result .set (0, 0, 0);
+				}
+			};
+		})(),
 		getDistanceToCenter: function (distance, positionOffset)
 		{
-			var viewpoint = this .getActiveViewpoint ();
+			const viewpoint = this .getActiveViewpoint ();
 
 			return (distance
 				.assign (viewpoint .getPosition ())
@@ -133,45 +158,44 @@ function (X3DBaseNode,
 		},
 		trackballProjectToSphere: function (x, y, vector)
 		{
-			x =  x / this .getBrowser () .getViewport () [2] - 0.5;
-			y = -y / this .getBrowser () .getViewport () [3] + 0.5;
+			const viewport = this .getViewport () .getRectangle (this .getBrowser ());
+
+			y = this .getBrowser () .getViewport () [3] - y;
+
+			x = (x - viewport [0]) / viewport [2] - 0.5;
+			y = (y - viewport [1]) / viewport [3] - 0.5;
 
 			return vector .set (x, y, tbProjectToSphere (0.5, x, y));
 		},
-		lookAtPoint: (function ()
+		lookAtPoint: function (x, y, straightenHorizon)
 		{
-			var bbox = new Box3 ();
+			if (! this .touch (x, y))
+				return;
 
-			return function (x, y, straightenHorizon)
-			{
-				if (! this .touch (x, y))
-					return;
-	
-				var hit = this .getBrowser () .getNearestHit ();
+			const hit = this .getBrowser () .getNearestHit ();
 
-				this .getActiveViewpoint () .lookAtPoint (hit .intersection .point, 2 - 1.618034, straightenHorizon);
-			};
-		})(),
+			this .getActiveViewpoint () .lookAtPoint (this .getActiveLayer (), hit .intersection .point, 2 - 1.618034, straightenHorizon);
+		},
 		lookAtBBox: (function ()
 		{
-			var bbox = new Box3 ();
+			const bbox = new Box3 ();
 
 			return function (x, y, straightenHorizon)
 			{
 				if (! this .touch (x, y))
 					return;
-	
-				var hit = this .getBrowser () .getNearestHit ();
+
+				const hit = this .getBrowser () .getNearestHit ();
 
 				hit .shape .getBBox (bbox) .multRight (hit .modelViewMatrix);
 
-				this .getActiveViewpoint () .lookAtBBox (bbox, 2 - 1.618034, straightenHorizon);
+				this .getActiveViewpoint () .lookAtBBox (this .getActiveLayer (), bbox, 2 - 1.618034, straightenHorizon);
 			};
 		})(),
 		touch: function (x, y)
 		{
 			this .getBrowser () .touch (x, y);
-		
+
 			return this .getBrowser () .getHits () .length;
 		},
 		dispose: function () { },
@@ -179,7 +203,7 @@ function (X3DBaseNode,
 
 	function tbProjectToSphere (r, x, y)
 	{
-		var d = Math .sqrt (x * x + y * y);
+		const d = Math .hypot (x, y);
 
 		if (d < r * Math .sqrt (0.5)) // Inside sphere
 		{
@@ -188,7 +212,8 @@ function (X3DBaseNode,
 
 		// On hyperbola
 
-		var t = r / Math .sqrt (2);
+		const t = r / Math .sqrt (2);
+
 		return t * t / d;
 	}