From e5eac063ed3501e6c44470883e00c1318a762b41 Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Fri, 8 Mar 2024 22:01:05 +0100
Subject: [PATCH] Performance selector is now working

Selecting something under "Powerful" will now remove some useless props from the scene, in order to save some RAM and CPU.
Not the ideal way of helping cheap computers, but for now it'll work. Maybe I will find something better later
---
 index.html                    |  8 +++---
 src/main.js                   |  5 ++--
 src/menu.js                   |  4 ++-
 src/utils/addAssetsOnScene.js | 52 +++++++++++++++++++++++------------
 4 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index b2aee12..e1bb1ed 100644
--- a/index.html
+++ b/index.html
@@ -16,10 +16,10 @@
 				<div id="quality">
 					<label for="quality-select">How strong is your computer ?</label><br>
 					<select id="quality-select">
-						<option value="max">Powerful</option>
-						<option value="high">High</option>
-						<option value="mid">Normal</option>
-						<option value="low">Low</option>
+						<option value="1">Powerful</option><!-- Percentage of props that will be placed -->
+						<option value="0.85">High</option>
+						<option value="0.6">Normal</option>
+						<option value="0.35">Low</option>
 					</select>
 				</div>
 				<!--<div id="language">
diff --git a/src/main.js b/src/main.js
index da14500..de6ed89 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,8 @@ import * as Animations from './utils/animateMesh.js';
 import * as PlayerCollisions from './utils/playerCollisions.js';
 
 // Function used to start Threejs, called from index.html
-function startThreeJS(){
+// Quality is the percentage of props to place. Ex : "0.8"
+function startThreeJS(quality){
   let Clock = new THREE.Clock();
   THREE.Cache.enabled = true;//So we can request several time the same file without worrying : https://threejs.org/docs/#api/en/loaders/FileLoader
 
@@ -24,7 +25,7 @@ function startThreeJS(){
   document.body.appendChild( renderer.domElement );
 
   //Here, we create/load every asset used, and add it in the scene
-  addAssetsOnScene(scene).then(assets => {
+  addAssetsOnScene(scene, quality).then(assets => {
 
     /* --------------------- */
     /* |      MOVEMENT     | */
diff --git a/src/menu.js b/src/menu.js
index 63f0540..72b96ce 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -5,5 +5,7 @@ import $ from 'jquery';
 
 $("#menu button").on("click", event=>{
     $("#menu").fadeOut(300);
-    document.startThreeJS();
+    const quality = $("#quality-select").val();
+    console.log(`Starting Three.Js, with quality setting ${quality} !`);
+    document.startThreeJS(quality);
 });
\ No newline at end of file
diff --git a/src/utils/addAssetsOnScene.js b/src/utils/addAssetsOnScene.js
index a9c27e4..70b33be 100644
--- a/src/utils/addAssetsOnScene.js
+++ b/src/utils/addAssetsOnScene.js
@@ -22,11 +22,30 @@ function alignGround(ground, MovingObject) {
 }
 
 
-export async function addAssetsOnScene(scene){
+export async function addAssetsOnScene(scene, quality){
     /*This function takes the scene as arg, and is used to load everything needed on the terrain.
+    It also takes a quality setting, that is used to determine if we can place every assets, or if we must limit the number of non-important props on screen.
+    Ex of quality value : "0.8" for 80% of trees loaded
+
     Player, trees, fences, and everything displayed on the screen is added by this function, at the right place
     
-    Will return an object containing created objects*/
+    Will return an object containing created objects. /!\ Object may not hold props not animated or useless, I'll work on this later*/
+
+
+    // This one is used when placing models on the scene, that aren't important
+    // According to the quality setting, we may not place some trees, or grass, so we spare some RAM and CPU
+    // This will act as a random function that will return true or false, randomly
+    const percentageOfObjectsToPlace = Number(quality)*100;
+    function shouldIPlaceThisModel(){
+        if(percentageOfObjectsToPlace==100)return true;
+
+        const randomNumberBetween1And100 = Math.floor(Math.random() * 101);
+        if(percentageOfObjectsToPlace >= randomNumberBetween1And100){
+            return true;
+        }else{
+            return false;
+        }
+    }
 
     scene.add(new THREE.AmbientLight(0x404040, 50));//Light, required to see
 
@@ -228,6 +247,14 @@ export async function addAssetsOnScene(scene){
     prepareTree(treeSakuraModel);
     prepareTree(treePineModel);
 
+    function placeTree(clone, pos){
+        if(!shouldIPlaceThisModel())return;
+        clone.position.x = pos.x;
+        clone.position.y = pos.y;
+        clone.rotation.y = Math.random() * Math.PI * 2;
+        scene.add(clone);
+    }
+
     const forestPinesLocations = [{x:-3,y:-3}, {x:-4,y:-5.9}, {x:-6.5,y:-4.3}, {x:-9.1,y:-3.1}, {x:-12.8,y:-4.35}, {x:-15.7,y:-3.3}, {x:-19.6,y:-2.6}, {x:-22.2,y:-5.3}, {x:-9.7,y:-6.2}
         , {x:-15.7,y:-7}, {x:-18.9,y:-5.8}, {x:-20.8,y:-8.5}, {x:-17.5,y:-9.6}, {x:-12.9,y:-8.45}, {x:-9.76,y:-9.6}, {x:-20.8,y:-8.5}, {x:-6.75,y:-8.25}, {x:-23,y:-10.5}
         , {x:-21,y:-11.9}, {x:-2.9,y:-8.4}, {x:-18.6,y:-12.4}, {x:-15,y:-10.8}, {x:-11.9,y:-8.4}, {x:-11.9,y:-10.8}, {x:-9,y:-12.45}, {x:-5,y:-10.3}, {x:-1.87,y:-10.9}
@@ -239,10 +266,7 @@ export async function addAssetsOnScene(scene){
 
     forestPinesLocations.forEach(newPos => {
         const pineClone = treePineModel.scene.clone();
-        pineClone.position.x = newPos.x;
-        pineClone.position.y = newPos.y;
-        pineClone.rotation.y = Math.random() * Math.PI * 2;
-        scene.add(pineClone);
+        placeTree(pineClone, newPos);
     });
 
     const sakuraLocations = [{x:6.49, y:-9.89}, {x:9.1, y:-10.47}, {x:10.42, y:-9.44}, {x:12.6, y:-10.5}, {x:14.01, y:-9.89}, {x:15.6, y:-9.71}, {x:17.3, y:-10.4}, {x:18.81, y:-9.62},
@@ -252,10 +276,7 @@ export async function addAssetsOnScene(scene){
 
     sakuraLocations.forEach(newPos => {
         const sakuraClone = treeSakuraModel.scene.clone();
-        sakuraClone.position.x = newPos.x;
-        sakuraClone.position.y = newPos.y;
-        sakuraClone.rotation.y = Math.random() * Math.PI * 2;
-        scene.add(sakuraClone);
+        placeTree(sakuraClone, newPos);
     });
 
     const appleTreeLocations = [{x:-15.25,y:9.92}, {x:-9.02,y:9.92}, {x:-15.25,y:7.92}, {x:-9.02,y:7.92}, {x:-15.25,y:5.92}, {x:-9.02,y:5.92}, {x:-15.25,y:3.92}, {x:-9.02,y:3.92},
@@ -263,10 +284,7 @@ export async function addAssetsOnScene(scene){
 
     appleTreeLocations.forEach(newPos => {
         const treeAppleOakModelClone = treeAppleOakModel.scene.clone();
-        treeAppleOakModelClone.position.x = newPos.x;
-        treeAppleOakModelClone.position.y = newPos.y;
-        treeAppleOakModelClone.rotation.y = Math.random() * Math.PI * 2;
-        scene.add(treeAppleOakModelClone);
+        placeTree(treeAppleOakModelClone, newPos);
     });
 
     const OakTreeLocations = [{x:-4.5,y:4.8}, {x:-7.15,y:13}, {x:-20,y:6}, {x:-17.4,y:14.3}, {x:-14,y:21.5}, {x:-4.5,y:16}, {x:-11.7,y:15.46}, {x:-5.9,y:19.45},
@@ -278,10 +296,7 @@ export async function addAssetsOnScene(scene){
 
     OakTreeLocations.forEach(newPos => {
         const OakTreeClone = treeOakModel.scene.clone();
-        OakTreeClone.position.x = newPos.x;
-        OakTreeClone.position.y = newPos.y;
-        OakTreeClone.rotation.y = Math.random() * Math.PI * 2;
-        scene.add(OakTreeClone);
+        placeTree(OakTreeClone, newPos);
     });
 
     /* --------------------
@@ -631,6 +646,7 @@ export async function addAssetsOnScene(scene){
       }
 
       for (let i = 0; i < 140; i++) {
+        if(!shouldIPlaceThisModel())continue;
         let choosenGrassModel;
         let collision;