adjusted height, removed textured walls (perf), add instancing

index.html

@@ -14,12 +14,19 @@ 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
 }
+var simscale = 0.035
+var forceDisplacementScale = AFRAME.utils.getUrlParameter('simscale');
+if ( forceDisplacementScale ) {
+	simscale = forceDisplacementScale
+	console.log(simsrc,"switched from default simulation scale to this one", simscale)
+}
+const vrHeight = 0.8
 const desktopHeight = 2.5
 const simext = ".jpg"
 const simstart = 1
 const simend = 95 // mostly correct as new simulations got to 96 steps
 const sim_filename_padding = true
-const animationSpeedStep = 500
+const animationSpeedStep = 900
 var animationCurrentStep = simstart
 
 var wsimanim 
@@ -52,11 +59,12 @@ var positionsCurated = [
 			offsetWatersimPosition: "-124.32254 0.78377 -46.41836", // TODO use
 			hotspots: [
 				// done via the AFrame inspector then pasting here, then regex
-				"43.48623 3 -288.74555", "68.57429 3 -282.87103", "46.02284 3 -305.55214", "49.22355 3 -327.33712", "52.05644 3 -340.62478", "77.24641 3 -340.95731", "78.9282 3 -321.94687", "76.38192 3 -304.13508", "73.59993999999999 3 -290.19813", "56.94803999999999 3 -283.86604",
+"-36.50124 3 18.52317", "-15.31684 3 26.46878", "-42.59553 3 32.46203", "12.26538 3 38.90027", "-0.69236 3 67.76877", "-49.01323 3 48.21272", "-79.56723 3 34.81311", "-94.0 3 25.0", "-19.2 3 60", "-86.58562 3 -5.73462", "-58.70357 3 8.36794",
 			],
 			visualMarkerPositions:[ 
-				{rotation:"0 -90 0" , position:"54.31842 -0.21946 -335.17472"},
+				// {rotation:"0 -90 0" , position:"54.31842 -0.21946 -335.17472"},
-				{rotation:"0 -90 0" , position:"46.8447 -0.21946 -291.55328"},
+				{rotation:"0 -22.49241 0", position:"-30.15801 0.05 14.66674"},
+				{rotation:"0 66.80401412327834 0" , position:"-41.94021 0.05 19.43"}
 			],
 		}, 
 		{ shortname: "ruelle", worldposition:[-126, -40], position:[49.3605700, 0.5031000], 
@@ -99,13 +107,13 @@ AFRAME.registerComponent('randomfx', {
 
 AFRAME.registerComponent('set-initial-camera-from-data', {
   init: function () {
-	this.el.setAttribute("position", positionsCurated[selection].worldposition[0] + " 1.6 " + positionsCurated[selection].worldposition[1] )
+	this.el.setAttribute("position", positionsCurated[selection].worldposition[0] + " "+vrHeight+" " + positionsCurated[selection].worldposition[1] )
   }
 })
 var ignoreCache = true // should be joined as 1 or better be location dependent
 const disableWaysForGLTFExportInHubs = false
 
-var selection = 2 // default position fallback to faciliate tests
+var selection = 1 // default position fallback to faciliate tests
 
 // initially done as a different page at first with query parameter
 var forceSelection = AFRAME.utils.getUrlParameter('position');
@@ -348,6 +356,8 @@ function makeTree( treedata, el){
 	tree.setAttribute("position", AFRAME.utils.coordinates.stringify( 
 		pointFromCoordinates( {lat:treedata.lat, lon:treedata.lon} )
 	) )
+	//tree.setAttribute("rotation", "0 "+ Math.random()*360 +" 0") // changing scale ever so slightly non uniformely could be interesting too
+	// double check documentation, seems to move them too
 	tree.setAttribute("instanced-mesh-member", "mesh:#meshtree")
 	el.appendChild( tree )
 }
@@ -363,9 +373,8 @@ function makeBuilding( points, height, el ){
 	el.appendChild( building )
 	makeWalls( poly, height, building )
 	// make3DFloor( poly, building ) // not visibile so might be removed
-	var color = new THREE.Color( 0x8F8FFF ).offsetHSL(0,0,-Math.random());
+	var color = new THREE.Color( 0x262D7B ).offsetHSL(0,0,-Math.random());
 	make3DRoof( poly, building, height, color )
-	
 }
 
 function makeLine( poly, h, el ){
@@ -494,7 +503,7 @@ AFRAME.registerComponent('teleport-via-cursor', {
 		if (!AFRAME.utils.device.checkHeadsetConnected())
 			cam.setAttribute("position", pos.x + " " + desktopHeight + " " + pos.z)
 		else
-			cam.setAttribute("position", pos.x + " " + 1.6 + " " + pos.z)
+			cam.setAttribute("position", pos.x + " " + vrHeight + " " + pos.z)
 		// might want to blink too, e.g black sphere around the camera for .5s
 	});
 	this.el.addEventListener('fusing', function (evt) {
@@ -516,9 +525,20 @@ AFRAME.registerComponent('hud', {
 	ringEl.setAttribute("position", "1.5 0 -3")
 	el.appendChild( ringEl )
 	var pointEl = document.createElement("a-text")
-	pointEl.setAttribute("value", "0.0")
+	// consider a-text instead https://github.com/lojjic/aframe-troika-text
-	pointEl.setAttribute("position", "0.3 0 -0.9")
+		// CEREMA/Visuals/ASSETS_3D/TypoTimer/Abel/Abel-Regular.ttf
+	pointEl.setAttribute("value", "0")
+	pointEl.setAttribute("color", "white")
+	pointEl.setAttribute("negate", "false")
+	pointEl.setAttribute("text", "align", "center")
+	pointEl.setAttribute("text", "font", "Visuals/Abel-Regular-msdf.json")
+	pointEl.setAttribute("position", "0.4 0 -0.9")
 	el.appendChild( pointEl )
+	var backgroundModelEl = document.createElement("a-gltf-model")
+	backgroundModelEl.setAttribute("scale", "40 50 50")
+	backgroundModelEl.setAttribute("position", "0.5 -0.4 -1.1")
+	backgroundModelEl.setAttribute("gltf-model", "Visuals/ASSETS_3D/AA_Timer.glb")
+	el.appendChild( backgroundModelEl )
 	this.ring = ringEl
 	this.hud = pointEl
   },
@@ -529,9 +549,8 @@ AFRAME.registerComponent('hud', {
 		this.start = 0
 		animationTime = 0
 	}
-        this.hud.setAttribute("value", animationTime)
+        this.hud.setAttribute("value", animationCurrentStep)
-	this.ring.setAttribute("theta-length", animationTime/20000*360)
+	this.ring.setAttribute("theta-length", animationCurrentStep/simend*360)
-        
   }
 })
 
@@ -625,8 +644,8 @@ function playSound(){
 	document.querySelector("#mainbutton").style.display = "none";
 }
 
-
 function startExperience(){
+	document.querySelector("#watersim").setAttribute("material", "displacementScale", simscale)
 	AFRAME.scenes[0].enterVR();
 	playSound();
 	resetAnimations()
@@ -662,10 +681,10 @@ function startExperience(){
 			      material="color: orange; shader: flat">
 		      </a-entity>
 	      </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-gltf-model resetanimations="" position="2 2 4" scale="50 50 50" 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-entity id="meshtree" position="-25 0 9" 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>
@@ -674,7 +693,7 @@ function startExperience(){
 		animation__pos="property: position; from:-50 50 100; to: 50 50 100; dur: 20000; easing: linear; loop: true">
 		</a-entity>
 
-      <a-entity position="0 -0.10 0" osm id="osm"></a-entity>
+      <a-entity position="0 -0.10 0" scale="1.3 1 1.3" osm id="osm"></a-entity>
 
       <!-- offset on test data for easier vr testing -->
       <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>