[whatwg] Canvas 2D context proposal: point/linear filtering modes
ashley at scirra.com
Fri Oct 28 12:26:29 PDT 2011
I'm running a startup heavily invested in HTML5 2D game development (see
www.scirra.com). I apologise if what I'm about to mention has been
discussed before, but I haven't been involved before now.
The retro (pixellated style) is still very popular in 2D gaming, and
many new games are still being made with this style. (Have a quick
scroll through http://www.tigsource.com/ and notice how many retro games
are still hitting headlines.) I've noticed most browsers today are
using bilinear filtering for scaling. Compared to point filtering (aka
nearest neighbour) this makes retro style games look blurry. See here:
Bilinear filtering does in fact result in a better quality display for
many modern games. However, it's unsuitable for retro style games as
the image demonstrates: seeing an entire game look that blurry is likely
to make the game unplayable. So I believe there's a real need for both,
but the standard leaves this as an implementation detail: "The user
agent may use any filtering algorithm (for example bilinear
interpolation or nearest-neighbor)." I propose that the standard is
amended so both modern and retro style games can use the most
appropriate sampling algorithm.
context.globalFilter = "point"; // set point filtering (nearest-neighbour)
context.globalFilter = "bilinear"; // set bilinear filtering
Some questions I anticipate:
"Won't this slow down software renderers?"
- Bilinear filtering can seriously impact performance in software
rendered implementations of the canvas 2D context. Generally bilinear
is only supported on hardware accelerated implementations. I think the
best solution is to allow implementors to choose the default, and not
require support for bilinear filtering (although it should be
recommended). Modern games using point filtering suffer a small
degradation in visual quality, but retro games using bilinear filtering
suffer a massive degradation in visual quality. So bilinear filtering
could be optional, and optionally be set as the default, but the ability
to set point filtering should be required.
"Why not just scale the artwork yourself with nearest-neighbour and use
that in the game?"
- HTML5 games have to run on a variety of screen sizes, ranging from
handsets to HD displays. A good solution to this is to use the scale()
method to fit to the window size. However, this scaling is done with
bilinear filtering in all current major browsers. Retro artwork drawn
large and scaled down looks blurry, and artwork drawn small and scaled
large looks blurry too. Also, rotating, scaling and sub-pixel
positioning individual objects can still make artwork look blurry, drawn
at any size.
"Why not use WebGL?"
- The WebGL API is much more complex than the Canvas 2D API. To make a
retro style 2D game, Canvas 2D is the obvious choice, and allows a much
quicker rate of development. This also avoids the issue of driver
support, hardware support and browser support associated with WebGL.
Overall, I think this proposal is very simple, straightforward to
standardise and implement, genuinely useful, and would significantly
encourage 2D gaming in HTML5 for comparitively little effort. Is it
possible that this could be included in the standard? Any
comments/suggestions/vendor-specific extensions I've missed?
More information about the whatwg