Buttery smoothness 60fps performance issues

Hello, I’m trying to make a roguelike game (like nethack) in full screen browser, with lots of animations and full screen effects in ASCII. That is 211x60 characters on my 1080p screen. Each one may be different and may have different color or other attributes every 16 milliseconds. Xtermjs is not handling my case very well. From my own little investigation I found out that the canvas rendering and parsing are the two biggest offenders.

Suggestions/Ideas

• I was thinking maybe we could implement a webgl renderer to speed things up?
• Not sure how parsing is handled but maybe we could cache more intensively there?
• Make a canvas per line (or few lines) and let parsing/rendering for that chunk be done by web worker, make multiple of those webworker/few-lines combos to render entire terminal?

Details

• Browser and browser version: Chrome 66
• OS version: OSX 10.13
• xterm.js version: 3.3.0
• hardware: MacBook Air 2012 1,7GHz i5, 4GB DDR3

Steps to reproduce

const { columns, rows } = process.stdout
let counter = 0
let now = Date.now()
let then = now
function hm() {
  process.stdout.write('\x1b[H')
}
function cls() {
  process.stdout.write('\x1b[J')
}
function render() {
  process.nextTick(render)
  now = Date.now()
  const delta = now - then
  if (delta < 1000/60) {
    return false
  }
  counter = counter >= 9 ? 1 : ++counter
  let content = ''
  for (let i=0; i<columns*rows; i++) {
    content += String(counter)
  }
  hm()
  cls()
  process.stdout.write(content)
  hm()
  process.stdout.write(String(delta))
  then = now
}
process.nextTick(render)
hm()
cls()

1. Create myperftest.js somewhere with above contents
2. Run npm run start in xterm.js
3. Increase number of rows and columns (I was testing on 250x50)
4. Open the demo and run node myperftest.js
5. Run chrome devtools performance

I am not sure what’s happening here. This test code above is generating a screen full of a single character (every character on the screen is the same). I know that Xtermjs implements character atlases so this test code should be running very fast? I need this to be 60fps. I also need each character on the screen to be different and the frame rate to keep the stable 60fps.

[Tyriar]

@InDieTasten https://www.npmjs.com/package/xterm-addon-webgl, current issues: https://github.com/xtermjs/xterm.js/issues?utf8=✓&q=is%3Aissue+is%3Aopen+label%3Aarea%2Faddon%2Fwebgl+

[ghost]

Will try, lets see if I can come up with something. 😅