ping-pong buffering and general graphics performance
Being a tenderfoot JavaScript/CANVAS/HTML5 user I was looking for a
performance tool to get a sense of this combination's limitations,
and turned to familiar ground. I decided to create a bench-marking
application that would let me get a sense of the speeds I could attain
with an old-time screen-saver-type algorithm like the Unix
xlock(1) command's many modes.
A survey found that there were some good starting points available.
This derivative of
David Webster's <CANVAS> demo
and
Lode's Computer Graphics Tutorial
is the resulting application (A work-in-progress). Using the
controls you can explore some of the limits of your browser and
it's JavaScript/ECMAScript interpreter and HTML5 <CANVAS>
element combination.
Sharing ..
Here are some things I learned and questions I did not find an
answer to while making this example (As of the time of this
writing! Things currently are changing in this realm):
- Some browsers flicker a lot when you are redrawing (opera(1) a
lot; firefox(1) very little, for example). In an attempt to reduce
the flicker I am simulating "double buffering". I am alternating
between two adjacent canvases; with the one being drawn to hidden and
the one last completed visible. This has worked in every browser I
have tried so far. You may compare this to a straight repaint of a
canvas by turning off buffering.
Is there another way to remove flicker, shearing, and tearing in a
<CANVAS> element?
- JavaScript is a larger part of the time that I first guessed. You can see
how much time is taken by JavaScript execution and how
much time by CANVAS rendering by turning off the graphics
and buffering and monitoring the "Frames Per Second" (FPS).
- There are surprising performance plateaus on my machine when I reach certain array sizes
- firefox(1) starts putting up alerts about scripts not responding when the graph gets large
- Can I lock up my browser if I make the graphic large? Probably.
- You can make a decent control module pretty quickly with standard elements.
Put your mouse over the brackets and hover and values will
change. Click on the labels and you can input a specific value.
- firefox(1) looks for -- once a comment starts, not -->; try and put this comment in a document : <!-- --------- -->.
The comment stops as soon as the -- is encountered. Apparently, that is according to the standard.
- Using vector graphics how large of a CANVAS can I use as a pseudo-pixmap and still keep up a certain frame rate?
I was surprised how much it depended on the hardware platform on what I thought were very similar platforms.
- Is this drawing being anti-aliased? Is there a way to turn that off?
- Any direct access to the bitmap at the pixel level?
If I make little images and composite them instead of drawing rectangles
(as a hard way to avoid anti-aliasing and do pixel addressing) what happens?
- Several browsers do not return time accurately to more than a one second resolution.
-
Next time in:
- set a target frame-per-second and do a scaled resize starting at current size until you get the approximate fps. That is, find a "good" size.
- play with circles and lines with thickness instead of rectangles for pixels out of curiosity
- add color palette options and other visual options
- optimize the rendering algorithm. I did not attempt to optimize the rendering algorithm at all
- reinvent the wheel one more time! re-create more effects from the Unix xload(1) screen lock/screen saver or something similar.
