Nicely in time for the 7DRL Challenge 2013 I present to you Unicodetiles.js 2.0.
Unicodetiles.js is a JavaScript tile engine based on Unicode (or ASCII if you wish) characters. It was originally made for last year's challenge and I used it for
Infiniverse (second pic).
This new major 2.0 release brings
a new WebGL-based renderer. This means there are now three options: WebGL has the best performance which also scales well for large viewport sizes with huge amount of tiles. If user's GPU or browser does not support WebGL, a regular 2D-canvas-based slower, but decent (and currently in some cases a bit more accurate) renderer is used. There's also a legacy DOM renderer, but it is by far the slowest and every browser I care about supports canvas. It does have mouse text selecting and DOM events for individual tiles going for it though.
WebGL performance for Firefox and Chrome seems to be in the same ballpark, each one scoring wins in some benchmarks (I'm actually surprised by this, usually Chrome always wins speed tests). Opera's WebGL implementation is not so great and in fact it loses to 2d canvas in some tests. In Opera's defence, its 2d canvas seems to be the fastest of these three browsers, at least with Unicodetiles' renderer. IE9 is also supported, although it obviosly won't have the WebGL renderer and the canvas is the slowest of the four browsers. You are free to benchmark yourself at
http://tapio.github.com/unicodetiles.js/tests/ but note that many of the tests are stress tests by design - for a simple roguelike even the DOM renderer should be fine.
Check out online demos and grab the code from http://tapio.github.com/unicodetiles.js/There are no API changes (a redesign is being thought of for 3.0) and no new examples, but there are several new tests/benchmarks.
Comments and suggestions appreciated!
PS. If you are interested in the technical side of the new WebGLRenderer, here's how it works: A cache of encountered characters is maintained and if the renderer sees new ones, it recreates a white font texture, rendering all the characters in the cache through a 2d canvas. The texture enlarges automatically if it can't fit all the characters. The correct texture coordinates for each tile (so it displays the right character) are calculated on the GPU based on a tile id passed to the vertex shader. The foreground and background colors are also passed in as attributes and the GPU blends them based on the font texture. Tile id and color data for every tile is uploaded to the GPU each frame, which sounds inefficient, but doesn't seem to matter in practise.
