How to optimize this procedurall generated 2d platformer made with threejs?

Questions
41

This parraph solves the cause of perpetual incrementing lag by out of screen entities:

for(i1 in balls){
	if(Math.abs(balls[i1].position.x-cube.position.x)>30){
		scene.remove(balls[i1])
	}
}
balls = balls.filter(function(obj){ return Math.abs(obj.position.x-cube.position.x)<=30 })
for(i1 in thwomps){
	if(Math.abs(thwomps[i1].position.x-cube.position.x)>30){
		scene.remove(thwomps[i1])
	}
}
thwomps = thwomps.filter(function(obj){ return obj.position.y>=-25 })
for(i1 in jumpy){
	if(Math.abs(jumpy[i1].position.x-cube.position.x)>30){
		scene.remove(jumpy[i1])
	}
}
jumpy = jumpy.filter(function(obj){ return obj.position.y>=-25 })

Its very important, with your optimizations, which is separating geometries and materials from geometry meshes.

I doesnt understand the concept of web workers. It calculates, but… what it affects the main function or optimizing the code?

42

Data is sent to a WebWorker. The worker is a javascript file, which you instruct… for example collisions. Work is done off the main thread. You can even request several workers. The result is returned to the main script.

The examples are good. If you want a lot of enemies.

43

You refer to this?:

worker.js:

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

index.html:

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker() {
  if(typeof(Worker) !== "undefined") {
    if(typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker() { 
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>
```
44

Yes, a WebWorker. To farm out tasks, and to improve framerate.

A WebWorker does not excuse malformed understandings. I understand it is like using fetch to get a blob.

45

Ehm… w3schools webworker example causes lag. Its not relevant?

46

Your WebWorker event handler probably needs time to refine:

  • enclose too much – or too little – of function(s)
  • response event (such as bullet) interacts with external events (such as thwomp).
  • you have 3 RAFs, localStorage, and a recurring 1s setInterval.

WebWorker thread usage patterns

47

You optimized geometry (melon, mario…) with plane instead of box. Reduce further with custom BufferGeometry:

  • PlaneGeometry (melon, mario…) could use one triangle face for 50% savings.
  • BoxGeometry (grass, dirt, waterfall…) could skip the far-screen quad for 16.6% savings.