p5.js icon indicating copy to clipboard operation
p5.js copied to clipboard

Slower rendering of custom fonts (.otf, .ttf, etc)

Open dhowe opened this issue 5 years ago • 5 comments

It has been noted that there is a significant performance hit when using a custom font (.otf or .ttf) vs the default or other browser-fonts (see this post for one example). I've looked at the p5.js text rendering code and I don't think (others are welcome to chime in) there is much that can be done in terms of optimization here, as it largely delegates to opentype.js for the computation (and creation) of paths and then simply renders them with primitive canvas ops. There may well be optimizations that can be done within opentype, but this is a bigger undertaking.

Alternatively we may see some performance gains via the caching of paths returned from opentype, but this would likely not help (or not help much) with the sketch linked above as the characters change each frame. However, this sketch is probably not a very typical use case for p5, as most text will remain in place for multiple frames, thus recomputing the path data (and re-creating Path objects) is not optimal. The tradeoff would likely be a memory hit, but tests would be needed to see how significant this would be. I'm happy to look into this (though probably not right away) if people think it is worthwhile. Mostly I wanted to log this as a known issue.

dhowe avatar Jan 03 '19 09:01 dhowe