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

You’re right, I only meant stats comment implies an accurate timer/delta relies on enclosed code (position, updates, etc…). Regardless, with consistency, I rip the thumbnail. Barrancs look dang rad in Perlin noise.

…one draw instead of many:

  1. create InstancedMesh with material/geometry.
  2. set count.
  3. update boxes at indexes: use a dummy Object3d to easily get/set the position/rotation/scale.

But 30 barrancs looks nice.

I minified objects in background and there’s it, 60-50fps:

EDIT 1:

I made this approach:

1 Like

Super gStroll Galaxy

The way now is to apply instancedmesh to this game, or nothing…

I drop to you my HTML directory in a zip file:

v105.zip (5.9 MB)

EDIT 1: I dont think instancedmesh works, the lag is incrementing when the player moves, because at begining of the game when she/him do click, the fps are 60, but it rather down. May have another solution, but its had beeing hard to locate it into my code.

The zip file now is:

v120.zip (6.3 MB)

EDIT 2: Oh, corrected zip is:

v124.zip (6.3 MB)

EDIT 3:
I remember that I have made a 2d canvas mario platformer, and it isnt too much far at fps, very laggy, but idk if it uses this pseudoinfinite procedurall generation. The worst part is that i’ve lost the proyect.

EDIT 4: I improved, again, the terrain generation:

v135.zip (6.3 MB)

But fps are smaller now x_x

EDIT 5: I know why:

An out of render_distance block.

EDIT 6:
I tried to convert boxes to planes, but it bugged so far…

EDIT 7:
Now here’s the game:
v150.zip (6.3 MB)

EDIT 8:
I have a big trouble finding buggy versions, but I (think) i get one great version with huge waterfalls and more planets:

v188.zip (6.4 MB)

EDIT 9:

Transformer this:

    if (Math.abs((posX) % 16) < 1) {
        gHillBackground((posX), noise.simplex2((posX)/40,seed+4)*800-200, noise.simplex2((posX)/40,seed+3)*-800-400-125);
    }

into a instanced chunks is very laggy, the pc crashes entirely, so… i have no option, or that i think…

EDIT 10: I catched the bug, so… i tried to transform this:

for (let i = -4000; i < 4000; i++) {
	posX=Math.floor(cube.position.x+i)
	
    if (Math.abs((posX) % 16) < 1) {
        gHillBackground((posX), noise.simplex2((posX)/40,seed+4)*800-200, noise.simplex2((posX)/40,seed+3)*-800-400-125);
    }else if (Math.abs((posX) % 16) < 2) {
    	gHillBackground2((posX), noise.simplex2((posX)/40,seed+4)*800-200, noise.simplex2((posX)/40,seed+3)*-800-400-125);
    }else if (Math.abs((posX) % 16) < 3) {
    	gHillBackground3((posX), noise.simplex2((posX)/40,seed+4)*800-200, noise.simplex2((posX)/40,seed+3)*-800-400-125);
    }else if (Math.abs((posX) % 16) < 4) {
    	gHillBackground4((posX), noise.simplex2((posX)/40,seed+4)*800-200, noise.simplex2((posX)/40,seed+3)*-800-400-125);
    }
}

Into an instanced mesh code, and my pc crashed again.

index_mario.html (21.8 KB)

I organized it to reuse geometry assets. It run 60fps solid.

It was black because of CORS taint, so I had no texture and colored them instead… but maybe it should work the same?

Fun game, thanks.

1 Like

Ehm. It appears as this:

And the materials are that:

const sprites = [
[“mesh1Material”, { “”: “dirt_greeded.png” }, “#fcf”],
[
“marioMaterial”,
{
1: “mario right 1.png”,
2: “mario right 2.png”,
3: “mario left 1.png”,
4: “mario left 2.png”,
5: “mario jump right.png”,
6: “mario jump left.png”,
},
#f00”,
],
[
“blockMaterial”,
{
Top: “grass.png”,
Top2: “grass2.png”,
Side: “grass_dirt.png”,
Bottom: “dirt.png”,
},
#0c0”,
],
[
“brownBlockMaterial”,
{
Bottom: “block.png”,
},
#a44”,
],
[
“waterfallMaterial”,
{
1: “waterfall-1.png”,
2: “waterfall-2.png”,
3: “waterfall-3.png”,
},
#66f”,
],
[
“pipeMaterial”,
{
1: “pipe top.png”,
2: “pipe center.png”,
3: “pipe bottom.png”,
},
#0f0”,
],
[
“purpleCoinMaterial”,
{
“”: “purple coin.png”,
2: “purple coin 2.png”,
3: “purple coin 3.png”,
4: “purple coin 4.png”,
},
#f0f”,
],
[
“melonMaterial”,
{
Top: “melon up.png”,
Side: “melon side.png”,
},
#cf0”,
],
[“melonSliceMaterial”, { “”: “melon_slice.png” }, “#fc0”],
[“bushMaterial”, { “”: “bush.png” }, “#cfc”],
[“treeMaterial”, { “”: “tree.png” }, “#cfc”],
[“bgHillMaterial”, { Top: “hill.png”, Top2: “hill2.png” }, “#040”],
];

What i should do? (Thanks your effort anyway) :smiley:

Youn should have my rar, use my textures, and put it into your xampp folder:

v200.zip (6.3 MB)

Xampp is a programm for run html files. You can download it here:

So, youre the second person which can improve my long code (Only if u want), so, just first download Xampp and then quit all files in htdocs, then put my .zip file and then extract to htdocs folder, open localhost and there is my example, working at 100%, but with that bug.

Yes, the whole screen was black, and I thought I was quickly making InstancedMesh. Not to doubt you. But trying to improve FPS I organized repeated code into loops. Then, I realized CORS/taint was preventing textures… but that was not actually the “problem”. So I didn’t proceed to use canvas and CrossOrigin or whatever workaround.

The FPS improves very very much… all you must do is declare the Geometry and Planes and reuse them! So ignore my changes, they are not directed at you, but I was progressing in my own way. The FPS for melons especially improves when you reuse geometry.

InstancedMesh with animated sprites seemed unnecessary, especially with animated textures. Cherry-pick or forget it but I think the only bottleneck was redeclaring new geometry new material @ 60fps x 1000 Meshes.

1 Like

Then the only obstacle is declarying boxes and materials or not?

Yes. I would declare the 6 audio and 8 geometry and 24 materials as a global var. Then reuse them, as opposed to new.

EDIT: I also tried early-exit from distance, and removed a score canvas… But mostly FPS improved from high 40s to solid 60 once I declared assets upfront. Then reference the var as opposed to new. Mostly melons.

1 Like

I have this couple of files:

v205.zip (6.3 MB)

I tried at 95% creating geometries before adding it to the cubes, and the fps keeps the same…

EDIT 1:
I had now separated all meshes from geometries and materials, so this is my code:

v210.zip (6.3 MB)

And its same laggy than the code before o3o…

And this zip file with the 9 meshes its same laggy as before, and it contains many bugs:

v220.zip (6.3 MB)

Maybe it’s your computer slow? I uploaded your zip files to codesandbox yesterday and the Perlin noise was undefined. So I opened locally, but the textures wouldn’t load. You can cherry-pick or ignore.

Fun game… it was solid 60FPS without instancedMesh, and mostly from melons. When I hit a couple of melons it created 200 new geometries and played a few wav files.

Textures should work, and InstancedMesh… But you are also modifying game boards.

EDIT1: I would say the new Audio which plays for each coin and jump could be a variable. Also I used a variable for the 40 MeshBasicMaterial to clone… supposedly that may share resources.

EDIT2: I think you missed some melon planes, but maybe those are in comment blocks? I don’t know…

1 Like

Finally, i have the solution, but im not sure… the zip is here:

v280.zip (6.3 MB)

And your credits are here (In the main url of the game):

1 Like

Sorry but the lag returned, I quitted solution and i will mark the last question as duplicate.
When I add enemies or more it returns. Check my proyects:

This is the most laggy:

v333.zip (6.8 MB)

Should I create a instance mesh for balls n’ jumpies, or not?

EDIT 1: I have this:

bulletMaterial=new THREE.MeshBasicMaterial({map:loader.load(“bullet.png”),transparent:true})

Should I change to this?:

bulletTexture=loader.load(“bullet.png”)
bulletMaterial=new THREE.MeshBasicMaterial({map:bulletTexture,transparent:true})
etc.

EDIT 2: I already renamed textures and materials appart, and get a little more fps, but not enough:

v503.zip (6.8 MB)

EDIT 3: I tried to fix the bugs and lag. There is, my proyect:

v525.zip (6.8 MB)

In attempt to project: without migrating to Unity (unpaid plan), FPS will converge at Dreams (PS Pro). My “unnamed institute” recently instituted a rule barring foreign technology: xampp.

Summarily:

  1. host Mafio Maker (Project Enemy) in dev environment
  2. enemy follows simple rules ( --x>-1 || ++x<1 )
  3. reduce overhead/headcount

EDIT 1: I am confused by Unity’s terms… is English not their legal language?
EDIT 2: CodeSandbox has Apache from the Vitality Gymnasium, can you export?

Accoutrements,
Sk888tes “Third Party” Loittery

What do u mean exactly?

Xampp download url is this:

And my proyect is this:

v535.zip (6.8 MB)

You can repair it by put it on htdocs folder on your xampp application. Its free, no cost… at the moment… i think…

And I have this alternative version, apparently with no-lag, but with jumpies bouncing at top of melons (If i implement it, it cause one of the major lags):

v1012.zip (6.3 MB)

I decided to apply a new enemie but it failed at fps:

v1025.zip (6.8 MB)

Apparently is a 60fps, but when i walk, it decrease more the fps in the v1025 version, so this is the most optimiced version (Without enemies):

v1045.zip (6.3 MB)

I have thaught to make a 1 or 3 or 5 enemies array and move swapping the horizontal screen, but idk if this work, so im trying that now.

In this version, every 5 seconds the enemies update (I cant do more):

v1205.zip (6.8 MB)

And I have this file with the 2 types of enemies and player shooting control:

v1503.zip (6.8 MB)

This is the same version, but i discovered many bugs into this copy of the version of up:

v1510.zip (6.8 MB)

And i fixed the bullet bug between ammo and jumpies:

v1520.zip (6.8 MB)

And the twomp-jumpy-bulletBall version is here:

v1545.zip (6.8 MB)

And a version which I reduced thwomp falling speed:

v2005.zip (6.8 MB)

With the last version i cant disable enemies or things because I’m not sure about when I will need them.

That version is very lagy (0-27fps), but I hope it doesnt crash. The lag now is distinct than before.

Use a WebWorker or some background task.

idk about webworker… could you teach me what is it?

There are examples:

Its a script???

And… its dedicated to run at more fps?

EDIT 1:
I found the solution of the lag with enemies via my discord bot in this html folder, but still is laggy now:

v2025.zip (6.8 MB)

It calculates off the main thread. I doubt you want the OffscreenCanvas version, but the general one. Copy-paste into the template (2 files).

If you want to shoot some different silver bullets.