x_ite 4.0.5 → 4.7.5

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

@@ -50,19 +50,15 @@
 define (function ()
 {
 "use strict";
-	
-	var i = 0;
 
-	var TextureQuality =
+	let i = 0;
+
+	const TextureQuality =
 	{
 		LOW:    i ++,
 		MEDIUM: i ++,
 		HIGH:   i ++,
 	};
 
-	Object .preventExtensions (TextureQuality);
-	Object .freeze (TextureQuality);
-	Object .seal (TextureQuality);
-
 	return TextureQuality;
 });

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

@@ -59,6 +59,7 @@ define ([
 	"x_ite/Execution/Scene",
 	"x_ite/Parser/Parser",
 	"standard/Utility/DataStorage",
+	"x_ite/DEBUG",
 ],
 function ($,
           Fields,
@@ -70,58 +71,146 @@ function ($,
           ContextMenu,
           Scene,
           Parser,
-          DataStorage)
+          DataStorage,
+          DEBUG)
 {
 "use strict";
-	
-	var browserNumber = 0;
 
-	function getContext (canvas)
+	const WEBGL_LATEST_VERSION = 2;
+
+	const extensions = [
+		"ANGLE_instanced_arrays",
+		"EXT_blend_minmax",
+		"EXT_frag_depth",
+		"EXT_shader_texture_lod",
+		"EXT_texture_filter_anisotropic",
+		"OES_element_index_uint",
+		"OES_standard_derivatives",
+		"OES_texture_float",
+		"OES_texture_float_linear",
+		"OES_texture_half_float",
+		"OES_texture_half_float_linear",
+		"OES_vertex_array_object",
+		"WEBGL_compressed_texture_s3tc",
+		"WEBGL_debug_renderer_info",
+		"WEBGL_debug_shaders",
+		"WEBGL_depth_texture",
+		"WEBGL_draw_buffers",
+		"WEBGL_lose_context",
+
+		"EXT_color_buffer_float",
+		"EXT_color_buffer_half_float",
+		"EXT_disjoint_timer_query",
+		"EXT_disjoint_timer_query_webgl2",
+		"EXT_sRGB",
+		"WEBGL_color_buffer_float",
+		"WEBGL_compressed_texture_astc",
+		"WEBGL_compressed_texture_atc",
+		"WEBGL_compressed_texture_etc",
+		"WEBGL_compressed_texture_etc1",
+		"WEBGL_compressed_texture_pvrtc",
+		"WEBGL_compressed_texture_s3tc",
+		"WEBGL_compressed_texture_s3tc_srgb",
+
+		"EXT_float_blend",
+		"OES_fbo_render_mipmap",
+		"WEBGL_get_buffer_sub_data_async",
+		"WEBGL_multiview",
+		"WEBGL_security_sensitive_resources",
+		"WEBGL_shared_resources",
+
+		"EXT_clip_cull_distance",
+		"WEBGL_debug",
+		"WEBGL_dynamic_texture",
+		"WEBGL_subarray_uploads",
+		"WEBGL_texture_multisample",
+		"WEBGL_texture_source_iframe",
+		"WEBGL_video_texture",
+
+		"EXT_texture_storage",
+		"OES_depth24",
+		"WEBGL_debug_shader_precision",
+		"WEBGL_draw_elements_no_range_check",
+		"WEBGL_subscribe_uniform",
+		"WEBGL_texture_from_depth_video",
+	];
+
+	function getContext (canvas, version, preserveDrawingBuffer)
 	{
-		var gl = canvas .getContext ("webgl") ||
-		         canvas .getContext ("experimental-webgl");
+		var
+			options = { preserveDrawingBuffer: preserveDrawingBuffer },
+			gl      = null;
+
+		if (version >= 2 && ! gl)
+		{
+			gl = canvas .getContext ("webgl2", options);
+
+			if (gl)
+				gl .getVersion = function () { return 2; };
+		}
+
+		if (version >= 1 && ! gl)
+		{
+			gl = canvas .getContext ("webgl",              options) ||
+			     canvas .getContext ("experimental-webgl", options);
+
+			if (gl)
+				gl .getVersion = function () { return 1; };
+		}
 
 		if (! gl)
 			throw new Error ("Couldn't create WebGL context.");
 
 		// Feature detection:
-		
+
 		// If the aliased linewidth ranges are both 1, gl.lineWidth is probably not possible,
 		// thus we disable it completely to prevent webgl errors.
-		
+
 		var aliasedLineWidthRange = gl .getParameter (gl .ALIASED_LINE_WIDTH_RANGE);
-		
+
 		if (aliasedLineWidthRange [0] === 1 && aliasedLineWidthRange [1] === 1)
 		{
 			gl .lineWidth = Function .prototype;
 		}
-		
+
 		// Return context.
-		
+
 		return gl;
 	}
 
+	let browserId = 0;
+
 	function X3DCoreContext (element)
 	{
-		this .number  = ++ browserNumber;
+		this .number  = ++ browserId;
 		this .element = element;
 
 		// Get canvas & context.
 
-		var browser      = $("<div></div>") .addClass ("x_ite-private-browser")  .prependTo (this .element);
-		var splashScreen = $("<div></div>") .addClass ("x_ite-private-splash-screen") .appendTo (browser);
-		var spinner      = $("<div></div>") .addClass ("x_ite-private-spinner")  .appendTo (splashScreen);
-		var progress     = $("<div></div>") .addClass ("x_ite-private-progress") .appendTo (splashScreen);
-		var surface      = $("<div></div>") .addClass ("x_ite-private-surface x_ite-private-surface-" + this .getId ()) .appendTo (browser);
+		const
+		 	browser      = $("<div></div>") .addClass ("x_ite-private-browser x_ite-private-browser-" + this .getId ()) .prependTo (this .element),
+			splashScreen = $("<div></div>") .addClass ("x_ite-private-splash-screen") .appendTo (browser),
+			spinner      = $("<div></div>") .addClass ("x_ite-private-spinner")  .appendTo (splashScreen),
+			progress     = $("<div></div>") .addClass ("x_ite-private-progress") .appendTo (splashScreen),
+			surface      = $("<div></div>") .addClass ("x_ite-private-surface") .appendTo (browser);
 
-		$("<div></div>") .addClass ("x_ite-private-spinner-text") .appendTo (progress) .text ("Lade 0 Dateien");
+		$("<div></div>") .addClass ("x_ite-private-x_ite") .html ("X_ITE<span class='x_ite-private-x3d'>X3D</span>") .appendTo (progress);
 		$("<div></div>") .addClass ("x_ite-private-progressbar")  .appendTo (progress) .append ($("<div></div>"));
+		$("<div></div>") .addClass ("x_ite-private-spinner-text") .appendTo (progress) .text ("Lade 0 Dateien");
 
 		this .splashScreen = splashScreen;
+		this .surface      = surface;
 		this .canvas       = $("<canvas></canvas>") .addClass ("x_ite-private-canvas") .prependTo (surface);
-		this .context      = getContext (this .canvas [0]);
+		this .context      = getContext (this .canvas [0], WEBGL_LATEST_VERSION, element .attr ("preserveDrawingBuffer") === "true");
+		this .extensions   = { };
 
-		this .privateScene = new Scene (this); // Scene for default nodes.
+		const gl = this .getContext ();
+
+		extensions .forEach (function (name)
+		{
+			this .extensions [name] = gl .getExtension (name);
+		},
+		this);
 
 		this .browserOptions      = new BrowserOptions      (this .getPrivateScene ());
 		this .browserProperties   = new BrowserProperties   (this .getPrivateScene ());
@@ -130,22 +219,21 @@ function ($,
 		this .browserTimings      = new BrowserTimings      (this .getPrivateScene ());
 		this .contextMenu         = new ContextMenu         (this .getPrivateScene ());
 
-		this .dataStorage = new DataStorage ("X3DBrowser(" + this .number + ").");
-		this .mobile      = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i .test (navigator .userAgent);
+		this .localStorage = new DataStorage (localStorage, "X_ITE.X3DBrowser(" + this .number + ").");
+		this .mobile       = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i .test (navigator .userAgent);
 
 		$(".x_ite-console") .empty ();
+
+		this .addChildObjects ("controlKey",  new Fields .SFBool (),
+		                       "shiftKey",    new Fields .SFBool (),
+		                       "altKey",      new Fields .SFBool (),
+		                       "altGrKey",    new Fields .SFBool ());
 	}
 
 	X3DCoreContext .prototype =
 	{
 		initialize: function ()
 		{
-			// Scene for default nodes.
-
-			this .privateScene .setPrivate (true);
-			this .privateScene .setLive (true);
-			this .privateScene .setup ();
-
 			// Setup browser nodes.
 
 			this .browserOptions      .setup ()
@@ -157,14 +245,61 @@ function ($,
 
 			// Observe Element's attributes.
 
-			this .debug    = this .getElement () .attr ("debug") == "true";
 			this .observer = new MutationObserver (this .processMutations .bind (this));
 
 			this .observer .observe (this .element [0], { attributes: true, childList: false, characterData: false, subtree: false });
+
+			// Define src and url property.
+
+			Object .defineProperty (this .getElement () .get (0), "src",
+			{
+				get: (function ()
+				{
+					return this .getExecutionContext () .getWorldURL ();
+				})
+				.bind (this),
+				set: (function (value)
+				{
+					this .loadURL (new Fields .MFString (value), new Fields .MFString ());
+				})
+				.bind (this),
+				enumerable: true,
+				configurable: false
+			});
+
+			Object .defineProperty (this .getElement () .get (0), "url",
+			{
+				get: (function ()
+				{
+					const worldURL = this .getExecutionContext () .getWorldURL ();
+
+					if (worldURL)
+						return new Fields .MFString (worldURL);
+					else
+						return new Fields .MFString ();
+				})
+				.bind (this),
+				set: (function (value)
+				{
+					this .loadURL (value, new Fields .MFString ());
+				})
+				.bind (this),
+				enumerable: true,
+				configurable: false
+			});
+
+			// Configure browser event handlers.
+
+			this .setBrowserEventHandler ("onload");
+			this .setBrowserEventHandler ("onshutdown");
+			this .setBrowserEventHandler ("onerror");
+
+			this .getElement () .bind ("keydown.X3DCoreContext", this .keydown_X3DCoreContext .bind (this));
+			this .getElement () .bind ("keyup.X3DCoreContext",   this .keyup_X3DCoreContext   .bind (this));
 		},
 		getDebug: function ()
 		{
-			return this .debug;
+			return this .getBrowserOptions () .getDebug ();
 		},
 		getNumber: function ()
 		{
@@ -178,6 +313,10 @@ function ($,
 		{
 			return this .element;
 		},
+		getSurface: function ()
+		{
+			return this .surface;
+		},
 		getSplashScreen: function ()
 		{
 			return this .splashScreen;
@@ -190,6 +329,10 @@ function ($,
 		{
 			return this .context;
 		},
+		getExtension: function (name)
+		{
+			return this .extensions [name];
+		},
 		getBrowserOptions: function ()
 		{
 			return this .browserOptions;
@@ -210,14 +353,29 @@ function ($,
 		{
 			return this .browserTimings;
 		},
-		getDataStorage: function ()
+		getLocalStorage: function ()
 		{
-			return this .dataStorage;
+			return this .localStorage;
 		},
 		getMobile: function ()
 		{
 			return this .mobile;
 		},
+		getPrivateScene: function ()
+		{
+			if (this .privateScene)
+				return this .privateScene;
+
+			// Scene for default nodes.
+
+			this .privateScene = new Scene (this);
+
+			this .privateScene .setPrivate (true);
+			this .privateScene .setLive (true);
+			this .privateScene .setup ();
+
+			return this .privateScene;
+		},
 		processMutations: function (mutations)
 		{
 			mutations .forEach (function (mutation)
@@ -228,8 +386,8 @@ function ($,
 		},
 		processMutation: function (mutation)
 		{
-			var element = mutation .target;
-			
+			const element = mutation .target;
+
 			switch (mutation .type)
 			{
 				case "attributes":
@@ -241,32 +399,51 @@ function ($,
 		},
 		processAttribute: function (mutation, element)
 		{
-			var attributeName = mutation .attributeName;
+			const attributeName = mutation .attributeName;
 
-			switch (attributeName .toLowerCase())
+			switch (attributeName .toLowerCase ())
 			{
+				case "onerror":
+				{
+					this .setBrowserEventHandler ("onerror");
+					break;
+				}
+				case "onload":
+				{
+					this .setBrowserEventHandler ("onload");
+					break;
+				}
+				case "onshutdown":
+				{
+					this .setBrowserEventHandler ("onshutdown");
+					break;
+				}
+				case "splashscreen":
+				{
+					this .getBrowserOptions () .setAttributeSplashScreen ();
+					break;
+				}
 				case "src":
-					var urlCharacters = this .getElement () .attr ("src");
-		
-					if (urlCharacters)
-						this .load ('"' + urlCharacters + '"');
+				{
+					const urlCharacters = this .getElement () .attr ("src");
 
+					this .load ('"' + urlCharacters + '"');
 					break;
+				}
 				case "url":
+				{
 					this .load (this .getElement () .attr ("url"));
 					break;
-				case "splashscreen":
-					this .getBrowserOptions () .setAttributeSplashScreen ();
-					break;
+				}
 			}
 		},
 		load: function (urlCharacters)
 		{
 			if (urlCharacters)
 			{
-			   var
-			      parser    = new Parser (this .getExecutionContext (), true),
-			      url       = new Fields .MFString (),
+			   const
+					parser    = new Parser (this .getExecutionContext ()),
+					url       = new Fields .MFString (),
 					parameter = new Fields .MFString ();
 
 				parser .setInput (urlCharacters);
@@ -281,11 +458,281 @@ function ($,
 					this .getCanvas () .fadeIn (0);
 			}
 		},
-		getPrivateScene: function ()
+		setBrowserEventHandler: function (name)
 		{
-			return this .privateScene;
+			const
+				element      = this .getElement () .get (0),
+				browserEvent = this .getElement () .attr (name);
+
+			if (browserEvent)
+				element [name] = new Function (browserEvent);
+			else
+				element [name] = Function .prototype;
+		},
+		callBrowserEventHandler: function (name)
+		{
+			const
+				element             = this .getElement () .get (0),
+				browserEventHandler = element [name];
+
+			if (window .jQuery)
+				window .jQuery (element) .trigger (name .substr (2));
+
+			else if (browserEventHandler)
+				browserEventHandler .call (element);
+		},
+		getShiftKey: function ()
+		{
+			return this .shiftKey_ .getValue ();
+		},
+		getControlKey: function ()
+		{
+			return this .controlKey_ .getValue ();
+		},
+		getAltKey: function ()
+		{
+			return this .altKey_ .getValue ();
+		},
+		getAltGrKey: function ()
+		{
+			return this .altGrKey_ .getValue ();
+		},
+		keydown_X3DCoreContext: function (event)
+		{
+			//console .log (event .keyCode);
+
+			switch (event .keyCode)
+			{
+				case 16: // Shift
+				{
+					this .shiftKey_ = true;
+					break;
+				}
+				case 17: // Ctrl
+				{
+					this .controlKey_ = true;
+					break;
+				}
+				case 18: // Alt
+				{
+					this .altKey_ = true;
+					break;
+				}
+				case 37: // Left
+				case 38: // Up
+				case 39: // Right
+				case 40: // Down
+				{
+					// Prevent bug in Firefox that event loop is broken when pressing these keys.
+					this .requestAnimationFrame ();
+					break;
+				}
+				case 49: // 1
+				{
+					if (this .getDebug ())
+					{
+						if (this .getControlKey ())
+						{
+							event .preventDefault ();
+							this .setBrowserOption ("Shading", "POINT");
+							this .getNotification () .string_ = "Shading: Pointset";
+						}
+					}
+
+					break;
+				}
+				case 50: // 2
+				{
+					if (this .getDebug ())
+					{
+						if (this .getControlKey ())
+						{
+							event .preventDefault ();
+							this .setBrowserOption ("Shading", "WIREFRAME");
+							this .getNotification () .string_ = "Shading: Wireframe";
+						}
+					}
+
+					break;
+				}
+				case 51: // 3
+				{
+					if (this .getDebug ())
+					{
+						if (this .getControlKey ())
+						{
+							event .preventDefault ();
+							this .setBrowserOption ("Shading", "FLAT");
+							this .getNotification () .string_ = "Shading: Flat";
+						}
+					}
+
+					break;
+				}
+				case 52: // 4
+				{
+					if (this .getDebug ())
+					{
+						if (this .getControlKey ())
+						{
+							event .preventDefault ();
+							this .setBrowserOption ("Shading", "GOURAUD");
+							this .getNotification () .string_ = "Shading: Gouraud";
+						}
+					}
+
+					break;
+				}
+				case 53: // 5
+				{
+					if (this .getDebug ())
+					{
+						if (this .getControlKey ())
+						{
+							event .preventDefault ();
+							this .setBrowserOption ("Shading", "PHONG");
+							this .getNotification () .string_ = "Shading: Phong";
+						}
+					}
+
+					break;
+				}
+				case 83: // s
+				{
+					if (this .getDebug ())
+					{
+						if (this .getControlKey ())
+						{
+							event .preventDefault ();
+
+							if (this .isLive () .getValue ())
+								this .endUpdate ();
+							else
+								this .beginUpdate ();
+
+							this .getNotification () .string_ = this .isLive () .getValue () ? "Begin Update" : "End Update";
+						}
+					}
+
+					break;
+				}
+				case 225: // Alt Gr
+				{
+					this .altGrKey_ = true;
+					break;
+				}
+				case 171: // Plus // Firefox
+				case 187: // Plus // Opera
+				{
+					if (this .getControlKey ())
+					{
+						event .preventDefault ();
+						this .getBrowserTimings () .setEnabled (! this .getBrowserTimings () .getEnabled ());
+					}
+
+					break;
+				}
+				case 36: // Pos 1
+				{
+					event .preventDefault ();
+					this .firstViewpoint ();
+					break;
+				}
+				case 35: // End
+				{
+					event .preventDefault ();
+					this .lastViewpoint ();
+					break;
+				}
+				case 33: // Page Up
+				{
+					event .preventDefault ();
+					this .previousViewpoint ();
+					break;
+				}
+				case 34: // Page Down
+				{
+					event .preventDefault ();
+					this .nextViewpoint ();
+					break;
+				}
+				case 119: // F8
+				{
+					if (this .getShiftKey ())
+					{
+						event .preventDefault ();
+
+						const viewpoint = this .getActiveViewpoint ();
+
+						if (! viewpoint)
+							break;
+
+						let text = "";
+
+						text += "Viewpoint {\n";
+						text += "  position " + viewpoint .getUserPosition () + "\n";
+						text += "  orientation " + viewpoint .getUserOrientation () + "\n";
+						text += "  centerOfRotation " + viewpoint .getUserCenterOfRotation () + "\n";
+						text += "}";
+
+						console .log (text);
+						copyToClipboard (text);
+
+						this .getNotification () .string_ = "Copied viewpoint to clipboard.";
+					}
+
+					break;
+				}
+			}
+		},
+		keyup_X3DCoreContext: function (event)
+		{
+			//console .log (event .which);
+
+			switch (event .which)
+			{
+				case 16: // Shift
+				{
+					this .shiftKey_ = false;
+					break;
+				}
+				case 17: // Ctrl
+				{
+					this .controlKey_ = false;
+					break;
+				}
+				case 18: // Alt
+				{
+					this .altKey_ = false;
+					break;
+				}
+				case 37: // Left
+				case 38: // Up
+				case 39: // Right
+				case 40: // Down
+				{
+					// Prevent bug in Firefox that event loop is broken when pressing these keys.
+					this .requestAnimationFrame ();
+					break;
+				}
+				case 225: // Alt Gr
+				{
+					this .altGrKey_ = false;
+					break;
+				}
+			}
 		},
 	};
 
+	function copyToClipboard (text)
+	{
+		const $temp = $("<textarea>");
+
+		$("body") .append ($temp);
+		$temp .val (text) .select ();
+		document .execCommand ("copy");
+		$temp .remove ();
+	}
+
 	return X3DCoreContext;
 });