glBitmap rendering is fuzzy

[codefrau]

The orange status text (enabled via the TeapotMorph's red-halo-handle menu) is almost unreadable:

Each character is drawn using glBitmap(). WebGL does not have bitmap rendering, so I emulated it using a texture, a vertex/fragment shader, and drawing a quad. This is the implementation that needs fixing/reimplementing: https://github.com/codefrau/jasmine/blob/7b134fabb1216e745b8646838ee5d323988a782b/jasmine-opengl.js#L292-L447

However, you'll notice the Morphic overlay in the screenshot above looks fine. It uses primitiveCompositeTexture rather than glBitmap(). https://github.com/codefrau/jasmine/blob/7b134fabb1216e745b8646838ee5d323988a782b/jasmine-b3daccel-plugin.js#L430-L497

These implementations are very different, which may be the reason why one looks so much better than the other.

It's clear that in glBitmap() the rasterPos math is wrong (like the constant for bitmapScale which really needs to be calculated from the screen size). It might be best to scrap my glBitmap() altogether and start over from scratch.

Any ideas / code improvements welcome.

[codefrau]

Big improvement in squeakjs/884c4c6: But still not pixel-perfect – why is the m cut off? Why is the middle pixel column doubled in chars that are 3 px wide (e.g. /,t, i, (, ))? Seems like wide letters are squished and thin letters stretched.