From 35ec84ca2a918d07beeee55f6f1107a306cdfb62 Mon Sep 17 00:00:00 2001
From: Fabien Benetou <fabien-services@benetou.fr>
Date: Sun, 18 Dec 2022 19:12:11 +0100
Subject: [PATCH] instancing, moved sound to rig, http to https

---
 index.html   | 62 ++++++++++++++++++++++++++++++++++------------------
 portail.html |  1 +
 2 files changed, 42 insertions(+), 21 deletions(-)
diff --git a/index.html b/index.html
index 4c8e437..e261f65 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,11 @@
 <html>
   <head>
     <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/diarmidmackenzie/instanced-mesh@v0.6.0/src/instanced-mesh.min.js"></script>
   </head>
   <body>
 <script>
+if(window.location.protocol != 'https:') { location.href =   location.href.replace("http://", "https://"); }
 
 var simsrc = "simulations/initial_simulation_data/crop_outpy_"
 var forceSimulationSource = AFRAME.utils.getUrlParameter('simsrc');
@@ -12,6 +14,7 @@ if ( forceSimulationSource ) {
 	console.log(simsrc,"switched from default simulation to this one")
 	// sould also update the src of id="debug_sim_cerema" with a specific step, e.g 50
 }
+const desktopHeight = 2.5
 const simext = ".jpg"
 const simstart = 1
 const simend = 95 // mostly correct as new simulations got to 96 steps
@@ -61,9 +64,9 @@ var positionsCurated = [
 			offsetWatersimPosition: "-124.32254 0.78377 -46.41836", // TODO use
 			hotspots: [ "-134.62038 3 -13.29107", "-125.89544 3 -30.36393", "-119.72245 3 -49.78609", "-96.91944 3 -95.00968", "-90.17903 3 -109.1628", "-142.76086 3 11.1124"],
 			visualMarkerPositions:[ 
-				{position:"-124.32254 0.78377 -46.41836"},
-				{position:"-130.50386 0.78377 -30.91602"},
-				{position:"-137.62082 0.78377 -12.86285"},
+				{position:"-125.67578 0.78377 -46.72093"},
+				{position:"-132.39466 0.78377 -30.06373"},
+				{position:"-138.95986 0.78377 -13.43454"},
 			],
 		},
 	]
@@ -337,7 +340,8 @@ function makeLamp( treedata, el){
 	tree.setAttribute("position", AFRAME.utils.coordinates.stringify( 
 		pointFromCoordinates( {lat:treedata.lat, lon:treedata.lon} )
 	) )
-	tree.setAttribute("gltf-model", "Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Lampadaire.glb" )
+	//tree.setAttribute("gltf-model", "Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Lampadaire.glb" )
+	tree.setAttribute("instanced-mesh-member", "mesh:#meshlamp")
 	el.appendChild( tree )
 }
 
@@ -348,7 +352,8 @@ function makeTree( treedata, el){
 	tree.setAttribute("position", AFRAME.utils.coordinates.stringify( 
 		pointFromCoordinates( {lat:treedata.lat, lon:treedata.lon} )
 	) )
-	tree.setAttribute("gltf-model", "Visuals/EXPORTS/EXPORTS_gltf/AA_Ruelle_Arbre.glb" )
+	//tree.setAttribute("gltf-model", "Visuals/EXPORTS/EXPORTS_gltf/AA_Ruelle_Arbre.glb" )
+	tree.setAttribute("instanced-mesh-member", "mesh:#meshtree")
 	el.appendChild( tree )
 }
 
@@ -501,7 +506,10 @@ AFRAME.registerComponent('teleport-via-cursor', {
 	var cam = document.querySelector("#camera-rig")
 	this.el.addEventListener('click', function (evt) {
 		var pos = el.getAttribute("position")
-		cam.setAttribute("position", pos.x + " 1.6 " + pos.z)
+		if (!AFRAME.utils.device.checkHeadsetConnected())
+			cam.setAttribute("position", pos.x + " " + desktopHeight + " " + pos.z)
+		else
+			cam.setAttribute("position", pos.x + " " + 1.6 + " " + pos.z)
 		// might want to blink too, e.g black sphere around the camera for .5s
 	});
 	this.el.addEventListener('fusing', function (evt) {
@@ -625,15 +633,25 @@ var animationTime = 0 // this isn't exactly aligned with animations
 
 loadedosmways = [];
 
-function playSound(param){
+function playSound(){
 	var entity = document.querySelector('[sound]');
 	entity.components.sound.playSound();
 	document.querySelector("a-entity[sound]").components.sound.playSound()
-	param.style.display = "none";
+	document.querySelector("#mainbutton").style.display = "none";
+}
+
+
+function startExperience(){
+	AFRAME.scenes[0].enterVR();
+	playSound();
 	resetAnimations()
+	if (!AFRAME.utils.device.checkHeadsetConnected()){
+		document.querySelector("#camera-rig").object3D.position.y = desktopHeight
+		// works only at the beginning, not after teleporting
+	}
 }
 </script>
- <button id=mainbutton style="z-index: 1; position: absolute; width:50%; margin: auto; text-align:center; top:45%; left:30%; height:30%;" onclick="playSound(this)">Demarrer l'experience</button> 
+ <button id=mainbutton style="z-index: 1; position: absolute; width:50%; margin: auto; text-align:center; top:45%; left:30%; height:30%;" onclick="startExperience()">Demarrer l'experience</button> 
     <a-scene displaymodels forcestats customdebug >
 	<a-entity id="hotspots" hotspots ></a-entity>
 	<a-entity id="watervisuals" watervisuals ></a-entity>
@@ -641,17 +659,17 @@ function playSound(param){
       <a-entity id="leftHand" hand-tracking-controls="hand: left;"></a-entity>
       <a-entity id="rightHand" hand-tracking-controls="hand: right;"></a-entity>
       <a-entity id="camera-rig" set-initial-camera-from-data>
+	      <a-sound autoplay="false" loop="true" src="src: url(Sounds/AMBIANCES/CEREMA_AMB_VILLE.mp3)"></a-sound>
+	      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_CRACK_MAISON_01.mp3)"></a-sound>
+	      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_CRACK_MAISON_02.mp3)"></a-sound>
+	      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_CRACK_MAISON_03.mp3)"></a-sound>
+	      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_CRACK_MAISON_04.mp3)"></a-sound>
+	      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_SIRENNES_POMPIER.mp3)"></a-sound>
+	      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_SIRENNE_COMMUNALE.mp3)"></a-sound>
+	      <a-entity position="0 -1.2 0" sound="src: url(Sounds/FX/CEREMA_BOUCLE_EAU.mp3); loop:true; autoplay:false; volume:0;"
+		      animation="property: sound.volume; from:0; to: 1; dur: 9000; easing: linear; loop: false;"
+		      ></a-entity>
 	      <a-entity camera look-controls hud>
-		      <a-sound autoplay="false" loop="true" src="src: url(Sounds/AMBIANCES/CEREMA_AMB_VILLE.mp3)"></a-sound>
-		      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_CRACK_MAISON_01.mp3)"></a-sound>
-		      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_CRACK_MAISON_02.mp3)"></a-sound>
-		      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_CRACK_MAISON_03.mp3)"></a-sound>
-		      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_CRACK_MAISON_04.mp3)"></a-sound>
-		      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_SIRENNES_POMPIER.mp3)"></a-sound>
-		      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_SIRENNE_COMMUNALE.mp3)"></a-sound>
-		      <a-entity sound="src: url(Sounds/FX/CEREMA_BOUCLE_EAU.mp3); loop:true; autoplay:false; volume:0;"
-			      animation="property: sound.volume; from:0; to: 1; dur: 9000; easing: linear; loop: false;"
-			      ></a-entity>
 			<!-- consider time as HUD text display-->
 		      <a-entity cursor="fuse: true; fuseTimeout: 500"
 			      position="0 0 -3"
@@ -661,6 +679,8 @@ function playSound(param){
 	      </a-entity>
 		<a-gltf-model resetanimations="" position="6 6 9" scale="100 100 100" rotation="29 -160 -10" gltf-model="Visuals/ASSETS_3D/AA_Reset.glb" opacity="1"></a-gltf-model>
       </a-entity>
+	<a-entity id="meshlamp" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Lampadaire.glb" instanced-mesh ></a-entity>
+	<a-entity id="meshtree" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/AA_Ruelle_Arbre.glb" instanced-mesh ></a-entity>
 
       <a-plane id="ground" visible=false position="0 -.5 0" rotation="-90 0 0" width="1000" height="1000" color="lightgrey"></a-plane>
       <a-entity light="type: ambient; color: #BBB"></a-entity>
@@ -672,10 +692,10 @@ function playSound(param){
       <a-entity position="-70 0 -42" osm id="osm"></a-entity>
 
 	<!-- offset on test data for easier vr testing -->
-	<a-gltf-model class="models_ruelle" visible="" position="-140.71021 0.73 -28.54369" scale="1.2 1.2 1.2" rotation="0 -111.8545396388247 0" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/AA_Quaidelaruelle.glb" listosmways=""></a-gltf-model>
+	<a-gltf-model class="models_ruelle" visible="" position="-139.95628 0.73 -34.3154" scale="1.2 1.2 1.2" rotation="0 -111.8545396388247 0" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/AA_Quaidelaruelle.glb" listosmways=""></a-gltf-model>
 	<a-gltf-model class="models_baquets" visible="" position="33.17554 -1.33294 -293.0568" scale="1.2 1.2 1.2" rotation="0 170.2355012158848 0" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/AA_Citedesbaquets.glb" listosmways=""></a-gltf-model>
 	<a-plane id="landscape" position="0 -12.5 0" scale="10 10 10" rotation="-90 0 -90" width="100" height="100" geometry="segmentsHeight: 128; segmentsWidth: 128"
-material="src: ign_terrain_cached.jpg; displacementScale: 20; displacementMap: ign_elevation_cached.jpg;"></a-plane>
+material="src: ign_terrain_cached.jpg; displacementScale: 10; displacementMap: ign_elevation_cached.jpg;"></a-plane>
 
 	<a-plane id="watersim" cerema="" position="0 -51.55 0" rotation="-90 90 0" src="Visuals/EAU/Eau_01.jpg"
 		material="displacementScale: 0.04; wireframe: false; displacementMap: "
diff --git a/portail.html b/portail.html
index d32ddbf..65dffaf 100644
--- a/portail.html
+++ b/portail.html
@@ -45,6 +45,7 @@
 	</ul>
 
 	<h2>Documentation</h2>
+	Utiliser <a href="https://www.oculus.com/open_url/?url=https://fabien.benetou.fr/pub/home/CEREMA/">ouvrir via Quest app</a>.<br/>
 	Utiliser <a href="https://hmd.link">hmd.link</a> dans le navigateur Web du casque pour partager le lien genere ou <a href="https://fabien.benetou.fr/pub/home/CEREMA/portail.html">ce portail</a>.
 	<h2>Code</h2>
 	Disponible en open-source a <a href="https://git.benetou.fr/utopiah/CEREMA/">https://git.benetou.fr/utopiah/CEREMA/</a>
