I am trying to create a tiny Guitar Hero game using Paper.js as an experiment.
Here is a live and testable version of my code (wait for 1 second) -
http://codepen.io/anon/pen/GgggwK
I have an array with delays, e.g intervalArray =[200,300,500,100,200], and I use that array to fire up a function
that pushes a Raster Image into a group.
There are a total of 5 Groups(for 5 guitar chords) which are animated
with view.onFrame so their position.y changes at a specified
dropSpeed.
Hence whatever I push into those Groups is animated(flowing) down the
canvas.
There are also 5 Circles and the images/notes that are flowing down
overlap the circles at some point.
If the user clicks that circle at the right time(when note
overlaps), he gets some points.
I am recycling the images when they reach the end of the canvas, so I will not have too many objects to eat up memory.
The thing is, I was expecting to see a very, very fast performance with this.
I am using Raster Images which are supposed to be very fast to render
in comparison to vectors, I am recycling the images and using few
extra items on the Canvas but still on mobile browsers I am having
some serious performance issues.
Even on my iMac I was expecting to see this run at the full frame rate - 60fps that requestAnimationFrame(this is what view.onFrame uses internally) allows, but sometimes the frame rate variates there as well.
I have tested this on:
Galaxy S3, Stock and Chrome browsers (laggy at some points when animating, the framerate freezes for 5,6 frames every 35 frames).
Google Nexus 5, Stock and Chrome browsers (works somehow better, freezes for 5,7 frames and continues)
iPhone 4 Safari browser (very sluggish)
iMac 2011, 8GB ram, Core2 Duo processor (fairly good framerate, sometimes variates)
Related
WE have created a Unity-based AR car game that uses the head position of the user for moving the car left or right similar to any simple mobile car race video game.
The game is a web-based AR game and uses unity WebGL output. As for head tracking, we are using Mediapipe.js. We have tested the experience on different OS and the following are the fps results.
Model
Browser
FPS & Range
Benchmark
MediaPipe Face Detection
Chrome PC
62(60-74)
60/100
MediaPipe Face Detection
Chrome Android
10(6-11 )
30
MediaPipe Face Detection
Chrome IOS
12(8-12 )
30
We are looking to achieve benchmark 30fps in mobile devices using Mediapipe. Any solutions or insights on improving the performance to make the game smoother are appreciated.
references:
Mediapipe Face Detection {Model: #mediapipe/face_detection#0.4.1 | model-config: short}
Tech-stack
HTML5/CSS JS(ES6)
Start with profiling. First you need to understand what operations are slowing down your application. It could be:
Lots of CPU work per frame
Load on the GPU due to unoptimized and non-mobile shaders, a large number of vertices (100-150K+) or a large number of draw calls (if there are many different materials that are not batched)
Frequent memory allocation and deallocation
I develop web application for mobile browsers which processes video stream from back camera in real time. Based on some calculated feature we may store current frame for followed operations.
The detailed workflow is next:
Input video stream in browser has 4K resolution. We use 3 canvases: two canvases have 4K resolution and the last one has significant lower resolution ( approximately 400x600 ). We get frame from video stream and draw it on 4K canvas. Next we draw this 4K canvas onto smallest one. Then we get array representation of image from this small canvas and perform some calculation with it. Based on that calculation we decide if this frame should be stored or not ( we say that we found "Best frame" ). This best frame we store in original resolution 4K in the second 4K canvas for final processing and continue to process next frames in hope to fine little bit better.
In my work I faced with problem that Google Chrome shows less performance than FireFox on the same device and dramatically worse performance than Safari on the devices with same class.
In order to demonstrate the problem I created test html example. In it I use all of the operations which I consider as critical. There are: drawing frame from video stream onto first 4K canvas, scale this canvas and draw it onto smallest canvas, obtaining of array buffer from smallest canvas for calculation. These three operations are called for each frame therefore their performance is most critical for me.
Repository with example
Deployed example
Measured timers:
Execution time originalCanvas.drawFrame, ms - drawing of videoframe onto 4K canvas
Execution time scaledCanvas.drawFrame, ms - drawing 4K canvas onto small canvas
Execution time scaledCanvas.getBmpData, ms - obtaining byte array from small canvas
All big canvases in testing have resolution 3840x2160, all small ones have resolution 711x400.
Now let's move on to the most important thing... Why we have such big inequality in performance in different browsers and on different devices which have the same class? Unfortunately I can't test example in Chrome and FireFox on iPhones because of prohibition of access to camera there. I consider that manipulation with canvases is a simple operation which shouldn't be so long. And why Safari has extremely amazing performance compare with Chrome or even FireFox?
I hope my topic wasn't very boring. I would be glad to hear everything about my workflow in application or about my conclusions. Thanks a lot!
I have problem with canvas performance. At simplest operations I have 3-5 FPS and application is useless. It happens in every browser even when I have one object in canvas. Before last Chrome update application worked better but only on this browser.
On image you can see performance log from Google Chrome which is recorded when I move object by mouse and canvas has 4 objects but it happens with single object too. In step_2.onMouseMove is method which set object position based on pointer coords (very simple calculations)
I use fabric.js library in this project. What could be the reason? How to boost performance of this?
Ive been having a really baffling slow down issue with the game I am working on probably because I am unsure how to handle graphics (most likely responsible for the slow down) in javascript without using a third party framework like Phaser/ImapactJS/EaselJS etc)*. The following is the low down on how I am approaching my graphics. I would be very thankful for some tips or methods on how to do this right.
My game is tile based - using tiles designed at 500x500 px because I want them to display decently on high definition devices.
I am using a spritesheet to load all (most of) my tiles before the main loop is run. This image is roughly 4000 x 4000 (keeping it below 4096 because the GPU cant handle texture sizes larger than that).
I then use the drawImage function to cycle through and draw each tile on a part of the canvas using information (w, h, x, y) stored in the tile array. I do this on every cycle of the main loop using my drawMap function.
The map is currently 6x6 tiles in size
A character spritesheet is also loaded and drawn on to the canvas after the map has been drawn. The character displays a different frame of the animation on every cycle of the main loop. There are sets of animations for the character each contained in the same spritesheet.
The character sprite sheet is roughly 4000x3500
The character is roughly 350x250 px
Other objects also use the same sprite sheet. Currently there is only one object.
Possibly helpful questions:
Am I using too many spritesheets or too few?
Should I only draw something if it's coordinates are in bounds of the screen?
How should I go about garbage collection? Do I need to set image objects to null when no longer in use?
Thanks in advance for input. I would just like to know if I am going about it the right way and pick your brains as how to speed it up enough.
*Note that I plan to port the JS game to cocoonJS which provides graphics acceleration for the canvas element on mobile.
** If interested please visit my Patreon page for fun!
You have asked lots of questions here, I'll address the ones I've run into.
I would like to start out by saying very clearly,
Use a profiler
Find out whether each thing you are advised to do, by anybody, is making an improvement. Unless we work on your code, we can only give you theories on how to optimise it.
How should I go about garbage collection? Do I need to set image objects to null when no longer in use?
If you are no longer using an object, setting its reference to null will probably mean it gets garbage collected. Having nulls around is not necessarily good but this is not within the scope of this question.
For high performance applications, you want to avoid too much allocation and therefore too much garbage collection activity. See what your profiler says - the chrome profiler can tell you how much CPU time the garbage collector is taking up. You might be OK at the moment.
I then use the drawImage function to cycle through and draw each tile on a part of the canvas using information (w, h, x, y) stored in the tile array. I do this on every cycle of the main loop using my drawMap function.
This is quite slow - instead consider drawing the current on screen tiles to a background canvas, and then only drawing areas which were previously obscured.
For example, if your player walks to the left, there is going to be a lot of tiles on the left hand side of the screen which have come into view; you will need to draw the background buffer onto the screen, offset to account for the movement, and then draw the missing tiles.
My game is tile based - using tiles designed at 500x500 px because I want them to display decently on high definition devices
If I interpret this right, your tiles are 500x500px in diameter, and you are drawing a small number of these on screen. and then for devices without such a high resolution, the canvas renderer is going to be scaling these down. You really want to be drawing pixels 1:1 on each device.
Would you be able, instead, to have a larger number of smaller tiles on screen - thereby avoiding the extra drawing at the edges? Its likely that the tiles around the edges will sometimes draw only a few pixels of one edge, and the rest of the image will be cropped anyway, so why not break them up further?
Should I only draw something if it's coordinates are in bounds of the screen?
Yes, this is a very common and good optimisation to take. You'll find it makes a big difference.
Am I using too many spritesheets or too few?
I have found that when I have a small number of sprite sheets, the big performance hit is when I frequently switch between them. If during one draw phase, you draw all your characters from character_sheet.png and then draw all the plants from plant_sheet.png you'll be ok. Switching between them can cause lots of trouble and you'll see a slow down. You will know this is happening if your profiler tells you that drawImage is taking a big proportion of your frame.
Here's a test field. Just click on model1-model4 to add next model. Remember to move camera (by mouse) to see real FPS.
I got few simple models... no matter if I use reflection or not, or I smooth vertices or not, when got about 40 models drawn, got only about 20-25 fps (while moving scene!)... 55 models = about 12 fps! any idea why? Graphic card or computer doesn't really matter... tested on Quad Core 4x3.6Ghz, 8GB ram, Geforce 880GTX. But Xperia Z1 acts similar.
Am I doing something wrong? What can I do to make it better? For example Ogre can render up to 5000 exactly the same models without a choke (DirectX).
Instead of loading a new obj everytime you should do obj.clone() if you have loaded it already. That way you'll be reusing geometries and textures.
I notice you're trying to have a cubemap, but your textures are not power of 2 (432x432). Try resizing them to 256x256 or 512x512.