ISSUE #9 Modifications to support developing a PixelStreaming Viewer …

…for PlanBase; these changes are to support the proof of concept and will likely be completely replaced by a proper implementation.
3drepo · May 20, 2021 · c5b06af · c5b06af
1 parent 9286015
commit c5b06af
Showing 1 changed file with 64 additions and 2 deletions.
diff --git a/public/index.html b/public/index.html
@@ -26,14 +26,76 @@
 		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
 		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
 
+		<!-- These links and scripts import the Unreal Pixel Streaming browser side code. The Pixel Streaming window (div) is
+		created when load() is called. -->
+		<link type="text/css" rel="stylesheet" href="http://localhost/player.css">
+		<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
+		<script type="text/javascript" src="http://localhost/scripts/webRtcPlayer.js"></script>
+		<script type="text/javascript" src="http://localhost/scripts/app.js"></script>
+
+		<!-- This tag imports the standard unity-util.js from production, as is done in vanilla PlanBase -->
 		<script type="text/javascript" src="https://www.3drepo.io/unity/unity-util.js"></script>
+
+		<!-- This snippet overrides a number of UnityUtil static methods, to skip loading the Unity Viewer and forward
+		its api calls to Unreal instead. This snippet also tells the Pixel Streaming code where to find the signalling
+		server, as the server hosting this page will be the PlanBase one -->
+		<script type="text/javascript">
+			console.log("Unreal PlanBase Dev Loading Override");
+			UnityUtil._loadUnity = function(canvas,url){		
+				UnityUtil.toUnity = function(n,r,p){ // Override this after "Unity" is "loaded" because putting it before breaks the promise
+					console.log(n);
+					console.log(r);
+					console.log(p);
+					emitUIInteraction({methodName: n, requireStatus: r, params: p});
+				}
+			}
+			// onDataChannelConnected is defined in app.js, and with our modification 
+			// (see https://github.com/3drepo/3drepoUnreal/commit/77b46c75139182d976f05ac2dc9b9264b2e84ea6) 
+			// will be called when the Rtc DataChannel is opened. Only when the data channel is open is it safe to send messages to Unreal.
+			onDataChannelConnected = function(){
+				UnityUtil.ready();
+			}
+
+			// WebRtc data channels have practical size limits. UnityUtil defines a function multipleCallInChunks which will split
+			// commands taking long lists of ids that are likely to execeed this into multiple commands. The maximum size is hardcoded
+			// in there at 20000. The following re-definition is an identical function, only having a smaller chunk size.
+			// Todo: Compute the optimum chunkSize for a 65k message.
+			UnityUtil.multipleCallInChunks = function(arrLength, func, chunkSize = 100) {
+				let index = 0;
+				while (index < arrLength) {
+					const end = index + chunkSize >= arrLength ? undefined : index + chunkSize;
+					func(index, end);
+					index += chunkSize;
+				}
+			}
+
+			// A callback for a pixel streaming response from Unreal.
+			function handleResponse(data){
+				console.log(data);
+				switch(data){
+					case "Loaded":
+						UnityUtil.loadingProgress(2); // This is necessary to enable the Start Questions button
+				}
+			}
+
+			// This is a global variable declared by app.js, to which we can register the function above.
+			addResponseEventListener("handle_response", handleResponse);
+
+			// This global variable is declared by app.js and is used to make the connection to the signalling server.
+			// For the purposes of development, the signalling server and PlanBase web server are different, so override
+			// it here to point to the signalling server.
+			wshost = "ws://localhost/";
+		</script>
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" />
 	</head>
-	<body>
+	<body onload="load()">
 		<noscript>
 			<strong>We're sorry but Planbase doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 		</noscript>
-		<div id="viewer"><div id="unity"></div></div>
+
+		<!-- The player tag will host the Pixel Streaming content. We leave unity here to swap between them easily. 
+			player will replace unity in a full version using pixelstreaming. -->
+		<div id="viewer"><div id="unity"></div><div id="player"></div></div>
 		<div id="app"></div>
 		<!-- built files will be auto injected -->
 	</body>