Help fixing performance issues in my game jam entry

Questions
1

You can play my entry here https://alexswan.info/js13k-2023/ You can enable debug mode by using this link
And the source on GitHub

I’ve noticed that after only a couple minutes of hanging out in this area, especially in VR, the framerate tanks and input gets laggy. I would love some help figuring out what I’ve done to make it go bad so quickly.

I’m preparing this entry for the js13kgames.com game jam, so there’s a few hacks in there to keep the source code small, like everything is built out of primitive shapes and textures from html canvas elements.

Since this is a puzzle game, I’ll let you try it out yourself if you wish. For quick access to the second area, use debug mode above or use the code: 3 5 4

The most apparent issue is the statue over the water in VR mode. After solving a puzzle or two the statue will spin. It seems that each eye is seeing a different orientation of the statue. I had originally thought it was because the eyes weren’t rendering fast enough to display the same position. I realize that I am animating it with a registerBeforeRender event. Is registerBeforeRender called once for each eye, making my eyes see two different frames in its animation?

image
image1295×1225 101 KB

There’s a few things that might be worth looking at:
Banner.ts - This is a waving banner that updates the vertices of a Plane every frame with a sine wave based on the Date.now(). Is calling Date.now() going to affect performance, or invoking the sine function of an ever increasing number start taking more and more time?
image

Animation.ts - I set up my own animations so I could say where I wanted a mesh and when and had it do the lerping for me. I filter out animations when they’re done and only have one registerBeforeRender function that handles all animations, so I don’t think this would be the source of a memory leak, but if anyone sees something weird there I’d love to know.

2

Hello and happy cake day! And very cool project!

everything is built out of primitive shapes and textures from html canvas elements

This caught my eye as canvas is pretty slow. Do you generate the textures only once, or are they regenerated in some situation?

Even if they’re not regenerated, I see a loot of materials in the scene:

image

Which certainly slows things down. Reuse materials as much as possible. You might want to check the Performance Priority modes too: Optimizing Your Scene | Babylon.js Documentation (babylonjs.com)

3

I don’t have a VR device, so I can’t tell, but on my desktop, I didn’t see any differences when comparing a performance snaphsot (in Chrome) done at start and another one 30mn later or so.

4

I worked on the project all day so the demo was kind of a moving target. I haven’t had as much of a fps drop lately, but I don’t think I did anything specifically to address that. It might have gotten better after restarting my pc.

5

Thanks for this. I started checking for duplicate materials late in the project, so this morning I implemented it with all materials and dropped the total materials/textures to 143/21

I’ll have a look at that doc page

1 Like