performance of hanzi-writer

[vaab]

I'm testing hanzi-writer on mobile platform, and with large displays I have real issue with general performance of animations (probably below 10fps) and it is really ugly (I'm on a google galaxy note 4 with a Android 4.4). Inkstone is based on the same data and same langage and technique here (javascript in webview and tween, the only difference is that they use Cordova, but to my limited knowledge, it shouldn't have any impact) and achieve much better on the same terminals.

I'm still quite new to all this, and I suspect that Inkstone is actually upscaling the resolution rather than drawing more pixel precise animation. I'll post updates if I have time about this topic here for any person finding Hanzi-Writer a little slow and possible technical solutions. Any thoughts on that subject are welcome.

One question I had related to that is : are the CSS animation faster than the javascript ones ? (I'd guess so), and if so, it seems that some actions can be transfered to CSS animation (using transition and keyframes ...).

[chanind]

Another possible difference is using SVG clip-path instead of SVG mask to control the way the stroke looks while animating. I think clip-path should have better performance, but the reason I didn't switch to it fully is because using clip-path doesn't allow adding stroke width, and currently there's small gaps between overlapping strokes in the data from make me a hanzi (skishore/makemeahanzi#28). I want to try working on adding caps to the strokes from make me a hanzi when I have some time. If that issue can be resolved we can switch to using clip-paths for everything.

Could you try setting usePolygonMasks: true in Hanzi Writer? This uses clip-path instead of mask but does more work in javascript to try to calculate a wider clipping path to avoid the stroke gap issue. It might result in smoother animations if mobile is slow due to SVG performance.

[vaab]

Just seen in the code that Inkstone is using createjs which uses canvas and enable all WebGL niceties and use the GPU mostly.

[chanind]

oooh interesting I hadn't considered using canvas. That could be worth investigating - it would certainly have better performance than SVG, but probably requires a fair bit of extra work to translate the SVG path strings from Make me a Hanzi into canvas pixels.

[vaab]

setting usePolygonMasks to true didn't change anything on my test mobile phone.

[vaab]

A valuable comparison on SVG vs Canvas: https://www.sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job/

[vaab]

I wouldn't be surprised if we could have most of both world by off-loading a lot to CSS animation that will be able to use hardware acceleration and keep SVG and crisp rendering. That would at least worth a try in my opinion.

[chanind]

I wonder if it's just that SVG performance isn't great on mobile. How do some of the SVG images from Make me a Hanzi look on mobile? They're using CSS to generate the animations: https://github.com/skishore/makemeahanzi/tree/master/svgs

[chanind]

Another possibility is that maybe having to calculate opacity for the highlight layer and the other hidden layers is straining on mobile. Maybe if we set display: none on elements after their opacity is 0 that might boost performance too?

[vaab]

The SVGs from makemeahanzi are not animated at all. I guess these CSS animation are not supported. I'll tinker a little more, but this is very possible that only a few CSS operations are supported... as I found out that CSS scale is not supported on my end. Android 4.4 is now fairly old, but I guess it is still an important target.

For the record, I tested in my app (a java based very simple app that only opens a webview on a provided index.html containing all the javascript) on my Galaxy Note 4 that I blocked on Android 4.4 . I basically added the svg as an <img src="">... (which perfectly plays the animation on my desktop Firefox) so I'll try other ways to include this svg to be sure.

[chanind]

Ah darn, it might be the case that SVG css animations aren't supported in older browsers. I think canvas should actually be pretty easy to implement though - it looks like there's a path element in canvas that can accept SVG path strings, and canvas supports clipping and transforms too. That should be everything we need for Hanzi Writer to work with canvas instead.

[chanind]

I made a proof-of-concept PR using canvas rendering here: #57. Does this perform better on your device? You'll need to build the dist files in that PR before testing. When I was testing in Chrome it appeared to have worse performance than using pure SVG, but it could be that Chrome has really optimized SVG rendering. It's also possible it needs more tweaking to optimize canvas rendering fully.

[pierophp]

Hello @chanind

I used your POC on a heavy page, that I open Hanzi Writer as a popup.

For my page, the Canvas version had a huge performance impact.

I recorded 2 videos in the same page, to demonstrate it.

SVG Version:
https://youtu.be/4M7Lo2Gt7eE

Canvas Version:
https://youtu.be/QF2mwjMPw-k

Thank you for your work.

What do you think is missing on the Canvas version?

[chanind]

The Canvas version should work, but when I tested it using Chrome developer tools it didn't seem to perform as well as the SVG version. It could be that Chrome is just really optimized for SVG rendering. Which browser is that in the video? It looks like a webview on Android?

[pierophp]

It's a PWA running on Google Chrome 70, Android 8.0, Moto Z2 Play

[chanind]

It probably makes sense to polish the canvas PR and allow it to be enabled as a config option, something like { renderer: 'canvas' }. I'm worried about switching over fully since there are likely users relying on CSS to style the SVG output like in #87. I'll put together a PR adding the canvas renderer as a config option.

[pierophp]

Great! Thank you!

I just found a bug on the Canvas version.

When you change the ideogram, it doesn't clean the previous ideogram loaded:

https://youtu.be/LYp-1yzM3Ms

To change, i'm using the setCharacter method.

That does't happen on the SVG version.