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

Questions
1

This is the game.html file:
2d platformer v155.html (15.7 KB)
When i test it it goes slower, and slowler, and crashes. Idk about this but its too weird, like the code gets alive. IDK about gettings it, but at least we made the platformer, so… it’s possible to optimize it? Thanks anyway!

EDIT1: Im improving it with all my efforts, but… it doesnt cause any result.

EDIT2: FPS Count:
image

EDIT 3 MB Count, ascendind per use:
image

EDIT 4:
I made Y-Greeding finally on this chunk, and the results are the same:
2d platformer v195.html (13.5 KB)

2

You’re calling renderer.resize() in one of your render loops.

You should only call that when the window has actually been resized.

Then also you have 2 requestAnimationFrames running, which isn’t great.

Inside :
render2=()=>{

You are:
imgPurpleCoin=new Image()
imgPurpleCoin.src=“purple coin 4.png”

you definitely don’t want to do that in the render function…
This is making it try to load a new image 60 times a second…
That is probably what is killing your framerate…

Instead, do that once at start time…

If you want more help with this whole thing, you could put it in a glitch and we can all poke at it.

1 Like
3

:twisted_rightwards_arrows: Premise:
In both histogram gaps, there is a wedge which is inversely identical. This leak/growth is your timer GC loop for unused blocks. To prove this in isolation, stand still and there will be no issue…? FYI memory may grow regardless of your code, from surreptitious code injections.
:warning: Action 1:
If player stops, i.e. movement delta is <1, perform thorough GC. This may entail async/await to ensure function hoist in a single-threaded loop. Excepting moving players or clouds, rebuild the entire world store…? Yes (not) production code but allow cleanup.
:snake: Action 2:
Radius may be refactored as a cone-of-visibility… to weight cleanup of the forward-facing FOV less than the rear. Assuming player trends on a path…? Join two biased influence spheres and perform cleanup as before (or use three vectors). This technique consumes gaps appropriately as the character moves.

Peak values,
Hillsk87 64 3 21 0

4

Hello. I tried greeding, but the meshes out of render distance doesnt dissapear:

image
image1893×161 116 KB

This is my html file:

2d platformer v195.html (13.5 KB)

EDIT 1:

Im on wrong html file, so I have corrected the outer area:

image
image959×210 71.9 KB

But after amount of time it crashes.

5

Do u say to use a PrevX and check the distance for if it is enough near, change PrevX and generate the terrain around the camera or generate terrain when players move?

EDIT 1: I have prepared that, but it crashed my game.

EDIT 2: I added:

		prevX1=0
		setInterval(()=>{
			if(Math.abs(prevX1-camera.position.x)>10){
				prevX1=camera.position.x
				init2()
			}
		},1000/60)
		init2()

But it doesnt worked for fixing the lag.

EDIT 3: I merged into X and Y axis the back geometry, and it didnt showed any result.

EDIT 4: I set the camera.position.z for smaller distance with the terrain and I deleted all out of camera borders, and didnt get any result.

6
  • before a mesh is removed, also dispose of its map materials.
  • disable texture interpolation and renderer aliasing. You may also find micro-optimizations in depth sorting.
  • Perlin noise array is regenerated every second. Can values be pre-populated on init, or as required by player movement?
  • animationframe can save some conditions as a variable to reduce code and cpu use. Also, some for loops can be combined.
  • a second canvas GUI is clearing a lot, which can be disproportionately slow. Can this be HTML/CSS?
  • use InstancedMesh if possible, or a texture atlas. Or revise to use clones of block prototypes, i.e. _ProtoPipe.
2 Likes